/* ==========================================================================
   hero.css — Polowanie na Sukces 2026 · full-bleed cinematic hero
   Owns: #hero.polo-hero LAYOUT (media stack, scrim, overlay sizing) + the
   reveal-in animation + structural responsive breakpoints.
   Typography colors / CTA colors for the overlay content live in
   overrides.css §07 (that file owns "look", this file owns "layout +
   motion") — see overrides.css for the split rationale.
   HARD RULE: default (no-JS) state is fully readable. All hiding/animating
   styles are gated behind html.js-anim (class added by js/hero.js).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Hero section — full-bleed stage
   -------------------------------------------------------------------------- */
.polo-hero {
  /* style.css has a generic `section { max-width:1160px; margin:0 auto }`
     rule that applies to every <section>. Without an explicit override
     here, that generic rule caps this hero to a boxed 1160px column
     instead of a full-bleed viewport-width stage — override both. */
  max-width: none;
  margin: 0;

  position: relative;
  min-height: 100svh;
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  padding: clamp(120px, 20vh, 200px) 20px clamp(64px, 10vh, 104px);
  color: #ffffff;

  /* RT hero-video standard: the poster lives in CSS as the base layer,
     not only on the <video poster> attribute — guarantees a populated
     hero even if the <video> element itself is hidden/unsupported. */
  background-color: #150b07;
  background-image: url('../images/hero-poster.webp');
  background-size: cover;
  background-position: center 38%;
  background-repeat: no-repeat;
}

/* --------------------------------------------------------------------------
   2. Media stack — <video> layer (behind the scrim, above the CSS poster)
   -------------------------------------------------------------------------- */
.polo-hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.polo-hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
}

/* Belt-and-braces: JS-independent kill switch for reduced motion. */
@media (prefers-reduced-motion: reduce) {
  .polo-hero-video { display: none; }
}

/* --------------------------------------------------------------------------
   3. Scrim — legibility gradient, strongest where the text sits (bottom
      third), plus a faint full-area tint. The photo/video must stay
      clearly visible through it — never drowned to near-black.
   -------------------------------------------------------------------------- */
.polo-hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-color: rgba(24, 12, 8, 0.18);
  /* Stops extend further up than the bottom-CTA-only case: the eyebrow
     line sits near the top of the overlay column, so the mid/upper
     stops stay dark enough for gold-on-sky legibility without drowning
     the photo — only the top ~15% (above all text) is left untinted. */
  background-image: linear-gradient(
    to top,
    rgba(24, 12, 8, 0.82) 0%,
    rgba(24, 12, 8, 0.55) 55%,
    rgba(24, 12, 8, 0.30) 82%,
    rgba(24, 12, 8, 0) 100%
  );
}

/* --------------------------------------------------------------------------
   4. Overlay content column — replaces the former paper invitation card.
      Structural sizing only; colors/fonts live in overrides.css §07.
   -------------------------------------------------------------------------- */
.invite-card {
  position: relative;
  z-index: 2;
  width: min(880px, 100%);
  margin: 0 auto;
  padding: 0 clamp(0.5rem, 4vw, 2rem);
  text-align: center;
}

/* --------------------------------------------------------------------------
   5. Reveal-in animation — EVERYTHING below is gated on html.js-anim.
      Without JS, none of these selectors match: overlay stays fully visible.
   -------------------------------------------------------------------------- */
.js-anim .invite-card:not(.is-revealed) > * {
  opacity: 0;
  transform: translateY(18px);
}

.js-anim .invite-card.is-revealed > * {
  animation: polo-fade-up 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.js-anim .invite-card.is-revealed > :nth-child(1) { animation-delay: 0.05s; }
.js-anim .invite-card.is-revealed > :nth-child(2) { animation-delay: 0.12s; }
.js-anim .invite-card.is-revealed > :nth-child(3) { animation-delay: 0.19s; }
.js-anim .invite-card.is-revealed > :nth-child(4) { animation-delay: 0.26s; }
.js-anim .invite-card.is-revealed > :nth-child(5) { animation-delay: 0.33s; }
.js-anim .invite-card.is-revealed > :nth-child(n+6) { animation-delay: 0.40s; }

@keyframes polo-fade-up {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 5a. Instant path: JS decided to skip animation (reduced motion, mobile
       fast lane, or revisit). .is-revealed present with no fade lingering. */
.js-anim .invite-card.is-revealed.no-anim > * {
  animation: none !important;
  transition: none !important;
  opacity: 1;
  transform: none;
}

/* --------------------------------------------------------------------------
   6. Reduced motion — belt AND braces (JS also skips, CSS enforces)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .js-anim .invite-card > * {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* --------------------------------------------------------------------------
   7. Mobile (<720px): first viewport must show event name, date and
      primary CTA. Single owner of mobile hero sizing (this shorthand
      `padding` loads after overrides.css so it always wins the cascade).
   -------------------------------------------------------------------------- */
@media (max-width: 719.98px) {
  .polo-hero {
    min-height: 100svh;
    padding: 100px 16px 48px;
  }

  /* Scrim reads stronger on mobile, where the taller stacked content
     column (eyebrow through CTAs) covers more of the viewport height. */
  .polo-hero-scrim {
    background-image: linear-gradient(
      to top,
      rgba(24, 12, 8, 0.88) 0%,
      rgba(24, 12, 8, 0.60) 50%,
      rgba(24, 12, 8, 0.34) 80%,
      rgba(24, 12, 8, 0) 100%
    );
  }

  .invite-card {
    width: 100%;
    padding: 0 0.25rem;
  }

  /* Hard cap: even if the animated path runs, everything lands ≤ 0.8s */
  .js-anim .invite-card.is-revealed > * {
    animation-duration: 0.3s;
  }
  .js-anim .invite-card.is-revealed > :nth-child(1),
  .js-anim .invite-card.is-revealed > :nth-child(2),
  .js-anim .invite-card.is-revealed > :nth-child(3) { animation-delay: 0.1s; }
  .js-anim .invite-card.is-revealed > :nth-child(n+4) { animation-delay: 0.25s; }
}