/* ==========================================================================
   05-HERO.CSS  —  the opening screen only
   Eyebrow, wordmark (with the signature light sweep), description,
   CTA button, scroll cue.
   ========================================================================== */

.hero {
  position: relative;
  min-height: 100vh;        /* fallback for older browsers */
  min-height: 100svh;       /* svh = the small viewport height, so mobile
                               browser chrome can never crop the content */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;         /* keeps the glow and grain inside the section */

  padding-top: calc(var(--nav-h-mobile) + var(--space-6));
  padding-bottom: max(var(--space-7), env(safe-area-inset-bottom));
}

/* --------------------------------------------------------------------------
   BACKGROUND — paper grain
   An inline SVG noise texture at 2.5% opacity. It should be felt, not seen.
   Set --grain-opacity to 0 in 01-tokens.css to switch it off completely.
   -------------------------------------------------------------------------- */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: var(--grain-opacity);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  background-repeat: repeat;
}

/* --------------------------------------------------------------------------
   THE SCROLL MARKER
   A 1px invisible strip pinned to the bottom of the hero. js/nav.js watches
   it to know when the hero has been scrolled past, which is what switches
   the navbar to its slimmed-down state. It is never seen or clicked.
   -------------------------------------------------------------------------- */
.hero__sentinel {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  pointer-events: none;
}

.hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

/* ==========================================================================
   1. EYEBROW  —  ──── INVITE · IMPRESS · INSPIRE ────
   The eyebrow itself is a shared component, defined once in 03-layout.css and
   reused above every section heading. Nothing hero-specific is needed here.
   ========================================================================== */

/* ==========================================================================
   2. WORDMARK  —  the page's single <h1>
   Filled with the brand gradient, and carrying the one signature motion
   moment on the whole page: a slow diagonal light sweep, once, on load.
   ========================================================================== */

/* The wrapper exists for two reasons: it holds the soft amber glow in place
   directly behind the letters at every screen size, and it carries the
   fade-up so the wordmark itself is free to run the light sweep. */
.hero__wordmark-wrap {
  position: relative;
  margin-top: var(--space-4);
}

.hero__wordmark-wrap::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 125%;
  min-width: 320px;
  aspect-ratio: 3 / 2;
  transform: translate(-50%, -50%);
  background-image: var(--glow-amber);
  pointer-events: none;
  z-index: 0;
}

.hero__wordmark {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-hero);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-wordmark);

  /* FALLBACK FIRST: any browser that cannot clip a background to text
     still gets solid brand orange rather than invisible letters. */
  color: var(--orange);
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero__wordmark {
    /* Two stacked layers:
       1. the gloss band that travels across (narrow, mostly transparent)
       2. the resting brand gradient (fills the letters permanently) */
    background-image: var(--gloss-wordmark), var(--brand-gradient);
    background-size: 45% 100%, 100% 100%;
    background-position: -120% 0, 0 0;
    background-repeat: no-repeat;

    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;

    /* THE SIGNATURE MOMENT: one slow diagonal gloss travels across the
       letters, 400ms after the wordmark has arrived, and then stops for
       good. It never loops. --load-step is inherited from the wrapper. */
    animation: ribbon-sweep var(--dur-sweep) var(--ease-soft) forwards;
    animation-delay: calc((var(--load-step, 0) * var(--stagger)) + var(--delay-sweep));
    animation-iteration-count: 1;
  }
}

@keyframes ribbon-sweep {
  from { background-position: -120% 0, 0 0; }
  to   { background-position:  220% 0, 0 0; }
}

/* ==========================================================================
   3. DESCRIPTION
   ========================================================================== */
.hero__lead {
  margin-top: var(--space-4);
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
  color: var(--ink-soft);
  max-width: var(--measure);
  text-wrap: pretty;
}

/* ==========================================================================
   4. CTA BUTTON
   The button itself is the shared .btn--primary, defined in 06-buttons.css
   because the template cards use exactly the same one. Only its position in
   the hero is set here.
   ========================================================================== */
.hero__cta-wrap {
  margin-top: var(--space-5);
}

/* ==========================================================================
   5. SCROLL CUE
   Purely decorative, so it is hidden from screen readers in the HTML.
   ========================================================================== */
.hero__cue {
  margin-top: var(--space-6);
  color: var(--ink-faint);
  animation: cue-bob 2.4s var(--ease-soft) infinite;
}

.hero__cue svg {
  width: 22px;
  height: 22px;
}

@keyframes cue-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(6px); }
}

/* The load-in fade and the endless bob are two animations on one element,
   so the bob only starts after the item has arrived. */
.hero__cue.load-item {
  animation:
    rise-in var(--dur-slow) var(--ease-out) both,
    cue-bob 2.4s var(--ease-soft) infinite;
  animation-delay:
    calc(var(--load-step, 0) * var(--stagger)),
    calc((var(--load-step, 0) * var(--stagger)) + var(--dur-slow));
}

/* ==========================================================================
   6. FUTURE SECTIONS
   Empty anchor targets so the menu links have somewhere to go. Nothing to
   style yet — each will get its own numbered CSS file as it is built.
   ========================================================================== */