/* ==========================================================================
   Hero — "The Fracture"  ·  AOA Credit Solutions
   Design canvas: 1280 x 800 (design_handoff_hero/README.md).
   Three photo panels at 1.5fr / 2.8fr / 1.2fr, gold hairlines on the seams,
   a left-to-right scrim under the copy, and a black stats bar with a gold
   glow rising off it. Nothing here is rounded.
   ========================================================================== */

.hero {
  /* Component-local knobs. The stats bar reaches the frame edge by cancelling
     --hero-pad-x, so the two stay in sync when the breakpoints change it. */
  --hero-pad-x: var(--gutter);
  --hero-pad-top: var(--space-38);
  --hero-scrim: var(--scrim-flat);

  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  /* Fills the viewport. The handoff's 1280 x 800 canvas is the proportion the
     design was drawn at, not a cap — 800px left a band of the next section
     showing on a taller screen. min-height keeps the lockup from crushing on
     short windows. */
  height: 100svh;
  min-height: 700px;
  overflow: hidden;
  isolation: isolate;
  background: var(--black-deep);
  font-family: var(--font-ui);
}

/* --- Photo layer ---------------------------------------------------------
   Each panel holds an inner element inset -6% -2% carrying the image, so the
   filters and the entrance translate never expose an edge. */

/* Single-photo hero: the city, full bleed. The three-panel split from the
   handoff is still in the markup and in the rules below — restoring it is a
   matter of putting the grid columns back and dropping the two rules that
   hide the other panels. */
.hero__panels {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr;
}

.hero__panel--auto,
.hero__panel--texture { display: none; }

/* No panels, no seams. */
.hero__seams { display: none; }

.hero__panel {
  position: relative;
  overflow: hidden;
  animation: aoaPanel 1.3s var(--ease-out) both;
}

.hero__panel--skyline { --panel-tint: rgba(6, 5, 4, .20); animation-delay: 0.05s; }
.hero__panel--auto    { --panel-tint: rgba(6, 5, 4, .44); animation-delay: 0.16s; }
.hero__panel--texture { --panel-tint: rgba(6, 5, 4, .44); animation-delay: 0.27s; }

.hero__photo {
  position: absolute;
  inset: -6% -2%;
  /* Per layer. The highlight must not tile or the sweep repeats across the
     word; the metal MUST tile, because at 200% size offset -35% it does not
     cover the left of the span, and background-clip: text turns anything it
     misses invisible. */
  background-repeat: no-repeat, repeat;
}

/* The hero's full-bleed backdrop, and so the largest thing the page paints.
   The source is 5023 x 3349 / 4.1MB, which no display needs and a phone on
   cellular cannot afford; these are resampled WebP derivatives of it. */
.hero__panel--skyline .hero__photo {
  background-image: url('../images/city-hero.webp');
  background-size: cover;
  background-position: 50% 55%;
  filter: saturate(0.42) brightness(0.95) contrast(1.2);
}

.hero__panel--auto .hero__photo {
  background-image: url('../images/gwagen-night.png');
  background-size: cover;
  background-position: 76% 58%;
  filter: saturate(0.6) brightness(0.66) contrast(1.28);
}

/* Panel 3 is the watch photograph, rotated a quarter turn and centred.
   The rotated box's width tracks the panel's height and its height tracks the
   panel's width, so it covers the panel exactly at any viewport width — a
   hardcoded 800 x 279 only matches the panel at the 1280 canvas and would clip
   the photo on a narrower window. `contain` then keeps the whole frame inside
   it: the photograph is never cropped, it letterboxes into the panel's black. */
.hero__panel--texture { container-type: size; }

.hero__photo--texture {
  inset: auto;
  top: 50%;
  left: 50%;
  width: 800px;    /* fallback: the design canvas dimensions */
  height: 279px;
  width: 100cqh;
  height: 100cqw;
  transform: translate(-50%, -50%) rotate(90deg);
  background-image: url('../images/watch.jpeg');
  background-color: #0B0806;
  background-size: contain;
  background-position: 50% 50%;
  filter: saturate(0.52) brightness(0.9) contrast(1.2);
}

.hero__tint {
  position: absolute;
  inset: 0;
  background: var(--panel-tint);
}

/* --- Scrim, seams, vignette ---------------------------------------------- */

.hero__scrim {
  position: absolute;
  inset: 0;
  /* Flat scrim for even darkening, with the sky darkener layered on top. */
  background: var(--grad-hero-foot), var(--grad-sky), var(--hero-scrim);
}

.hero__seams {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero__seam {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--grad-seam);
}

.hero__seam--1 { left: 27.273%; }
.hero__seam--2 { left: 78.182%; }

.hero__vignette {
  position: absolute;
  inset: 0;
  background: var(--grad-vignette);
}

/* --- Content layer -------------------------------------------------------- */

.hero__content {
  position: relative;
  z-index: 2;
  flex: 1 1 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: var(--hero-pad-top) var(--hero-pad-x) var(--space-56);
}

/* Wordmark */

/* Nav frames the top of the frame: brand at one edge, navigation at the other,
   so the composition is anchored across its full width rather than hugging the
   left. */
.hero__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-38);
  animation: aoaRise 0.9s var(--ease-out) both;
}

.hero__wordmark {
  display: flex;
  /* Cap-centres, not baselines. Both halves are all-caps with no descenders,
     so a shared baseline pins the small half to the bottom of the large one
     and it reads as hanging rather than set with it — measured, the two ink
     centres were 3.5px apart. Centring the boxes puts them level, because in
     both faces the capitals sit centred in their own line box.

     (The name plate over the founder's photograph does the opposite, and for
     the same reason: "Zay" is mixed case with a descender, so there a shared
     baseline is what the eye wants.) */
  align-items: center;
  gap: var(--space-16);
}

.hero__wordmark:hover { color: inherit; }

.hero__nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-38);
  margin: 0;
  padding: 0;
  list-style: none;
}

.hero__nav-links a {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(240, 233, 220, .72);
  transition: color .25s;
}

.hero__nav-links a:hover { color: var(--gold); }

.hero__nav-cta {
  padding: 15px 28px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #160F03;
  background: var(--grad-cta);
  border-radius: var(--radius);
}

.hero__nav-cta:hover { color: #160F03; }

.hero__wordmark-name {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 19px;
  letter-spacing: 0.32em;
  color: var(--gold);
}

.hero__wordmark-divider {
  width: 1px;
  height: 13px;
  align-self: center;
  background: var(--gold-divider);
}

.hero__wordmark-sub {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--bone-mute);
}

/* Copy block */

.hero__copy {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--space-26);
  max-width: 980px;
  margin: 0 auto;
  text-align: center;
}

.hero__eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-16);
  animation: aoaRise 1s var(--ease-out) 0.55s both;
}

.hero__eyebrow-rule {
  width: 54px;
  height: 1px;
  background: var(--gold-deep);
}

.hero__eyebrow-text {
  font-size: 10px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(217, 169, 58, .82);
}

.hero__headline {
  /* The negative left margin and the asymmetric padding pull the optical edge
     back to the grid while leaving room for the accent line's descender. */
  margin: 0;
  padding: 0 0.1em 0.1em;
  overflow: visible;
  font-family: var(--font-display);
  font-weight: 800;
  /* Three lines now rather than two, so the handoff's flat 110px would run
     off the bottom of a laptop viewport. */
  font-size: clamp(38px, 4.6vw, 78px);
  line-height: 1.0;
  letter-spacing: -0.022em;
  color: var(--bone);
  text-shadow: var(--shadow-headline);
  animation: aoaRise 1.2s var(--ease-out) 0.7s both;
}

/* Line 2: italic Playfair filled with the metallic gradient via
   background-clip: text. The bottom padding gives the "y" descender room
   inside the painted box; the matching negative margin takes that space back
   out of the layout. Remove either one and the gradient clips the descender. */
.hero__headline-accent {
  display: inline-block;
  padding: 0 0.1em 0.22em 0;
  margin-bottom: -0.22em;
  font-style: italic;
  font-weight: 500;
  /* Two layers. The metal underneath never moves — it stays exactly where it
     rests today, so the settled look is unchanged. Only the highlight above it
     travels, and it is a single soft peak with long ramps either side, the way
     the CTA plate's highlight is built. Dragging the metal itself was the
     problem: it carries two bright points, so sliding it marched a pair of
     hard colour boundaries across the word. */
  background:
    /* Bright core with darkened flanks. Brightness alone could not register —
       the metal already sits near the top of its range, so a lighter band added
       almost nothing. The flanks dim the metal just ahead of and behind the
       core, and that local contrast is what the eye reads as a glint. */
    linear-gradient(100deg,
      rgba(6, 5, 4, 0) 18%,
      rgba(6, 5, 4, .42) 34%,
      rgba(255, 254, 248, 1) 50%,
      rgba(6, 5, 4, .42) 66%,
      rgba(6, 5, 4, 0) 82%),
    var(--grad-metal);
  background-size: 320% 100%, 200% 100%;
  background-position: 150% 0, -35% 0;
  /* Per layer. The highlight must not tile or the sweep repeats across the
     word; the metal MUST tile, because at 200% size offset -35% it does not
     cover the left of the span, and background-clip: text turns anything it
     misses invisible. */
  background-repeat: no-repeat, repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: aoaSheen 2.6s var(--ease-sheen) 0.85s both;
}

.hero__tagline {
  margin: calc(var(--space-26) * -0.45) 0 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(19px, 1.7vw, 25px);
  letter-spacing: 0.005em;
  color: var(--gold-cta-text);
  text-shadow: var(--shadow-body);
  animation: aoaRise 1.2s var(--ease-out) 0.86s both;
}

.hero__body {
  margin: 0;
  max-width: 54ch;
  margin-left: auto;
  margin-right: auto;
  font-size: 17px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--bone-body);
  text-wrap: pretty;
  text-shadow: var(--shadow-body);
  animation: aoaRise 1.2s var(--ease-out) 1s both;
}

/* CTAs */

.hero__ctas {
  display: flex;
  justify-content: center;
  gap: var(--space-14);
  animation: aoaRise 1.2s var(--ease-out) 1.14s both;
}

/* The hero used to roll its own pair of buttons: a flat --grad-cta fill with
   no shadow, no arrow, no divider, different type metrics, and — the thing you
   actually notice — none of .cta-plate's shimmer, because that lives in a
   background-position sweep this never had. They are the shared components
   now, so every call to action on the page is the same object.

   .cta-link is normally align-self: flex-start, which in this row would leave
   it hanging at the top rather than sitting level with the plate. */
.hero__ctas .cta-link {
  align-self: center;
  /* No underline on this one. Everywhere else the rule marks a quiet secondary
     link inside a block of copy; sitting directly under the hero's gold plate
     it just reads as a second gold line. */
  background-image: none;
}

.hero__ctas .cta-link:hover,
.hero__ctas .cta-link:focus-visible { background-image: none; }

/* Stats — inline under a hairline, part of the lockup rather than a band. */

.hero__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-38);
  position: relative;
  margin-top: var(--space-38);
  padding-top: var(--space-26);
  animation: aoaFade 1.4s var(--ease-out) 1.32s both;
}

/* Hairline as a gradient rather than a flat border: it fades out at both ends
   instead of stopping dead. */
.hero__stats::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    rgba(217, 169, 58, 0) 0%,
    rgba(217, 169, 58, .26) 22%,
    rgba(217, 169, 58, .3) 50%,
    rgba(217, 169, 58, .26) 78%,
    rgba(217, 169, 58, 0) 100%);
}

.hero__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}

.hero__stat-label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(240, 233, 220, .58);
}

/* Playfair defaults to old-style figures — without lining numerals forced on,
   the digits hang below the baseline. Both properties are required. */
.hero__stat-figure {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 2.4vw, 34px);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: lining-nums;
  font-feature-settings: 'lnum' 1, 'onum' 0;
  color: var(--gold-figure);
}

/* --- Motion --------------------------------------------------------------- */

@keyframes aoaRise {
  from { opacity: 0; transform: translateY(38px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes aoaPanel {
  from { opacity: 0; transform: translateY(64px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes aoaFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Only the highlight layer moves; the metal stays pinned at its resting
   position throughout. */
@keyframes aoaSheen {
  0%   { background-position: 150% 0, -35% 0; }
  100% { background-position: -55% 0, -35% 0; }
}

/* --- Responsive ----------------------------------------------------------
   The prototype is a fixed 1280 x 800 canvas; this is the adaptation the
   handoff prescribes. */

/* <= 1024px: the headline switches to the clamp here rather than at 768px so
   110px never overflows a ~900px viewport; the clamp still resolves to 110px
   at 1024px, so the canvas proportion is untouched. */
@media (max-width: 1024px) {
  .hero__headline { font-size: clamp(48px, 11vw, 110px); }
  .hero__nav-links { gap: var(--space-26); }
  .hero__nav-links a { font-size: 11px; }
}

/* Below 900px there is no room for five inline links beside the wordmark, so
   they are dropped here and css/menu.css puts the section menu in their place
   at exactly this width. */
@media (max-width: 900px) {
  .hero__nav-links { display: none; }
}

/* <= 768px: stats stack 2 x 2. The headline floor is 48px — never below ~44px. */
@media (max-width: 768px) {
  .hero {
    --hero-pad-top: var(--space-26);
    /* Height, not min-height. The hero is overflow:hidden, so a fixed 100svh
       silently clipped the tagline, body, CTAs and stats on any phone where
       the lockup did not happen to fit. It grows now and fills the screen at
       minimum. */
    height: auto;
    min-height: 100svh;
    padding-bottom: var(--space-38);
  }

  /* 1280 wide covers a 3x phone at this width; 2560 is 3.5x the pixels for no
     visible gain and it is the page's largest-contentful paint. */
  .hero__panel--skyline .hero__photo {
    background-image: url('../images/city-hero-1280.webp');
  }

  .hero__content { padding-bottom: var(--space-38); }
  .hero__copy { gap: var(--space-20); padding: var(--space-38) 0; }

  /* Nothing in the top bar may wrap: "Credit Solutions" broke to two lines and
     the Get started plate broke mid-label. */
  .hero__nav { gap: var(--space-16); }

  /* The only tap target on the page under 44px: 50 x 22 as drawn. Padding buys
     the height and the negative margin gives it back to the layout, so nothing
     moves. */
  .hero__wordmark {
    gap: 10px;
    padding: 11px 0;
    margin: -11px 0;
  }
  .hero__wordmark-name { font-size: 17px; letter-spacing: .26em; }
  .hero__wordmark-sub {
    font-size: 9px;
    letter-spacing: .16em;
    white-space: nowrap;
  }
  .hero__nav-cta { white-space: nowrap; }

  .hero__tagline { font-size: 19px; }
  .hero__body { font-size: 16px; line-height: 1.65; }

  .hero__ctas { flex-wrap: wrap; gap: var(--space-10); }
  .hero__ctas .cta-plate { flex: 1 1 auto; justify-content: center; }
  /* Full-width tap target rather than a small inline link. */
  .hero__ctas .cta-link {
    flex: 1 1 100%;
    justify-content: center;
    min-height: 52px;
  }

  .hero__stats {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-20) var(--space-16);
    margin-top: var(--space-20);
    padding-top: var(--space-20);
  }

  .hero__stat-figure { font-size: 30px; }
  .hero__stat-label { font-size: 9px; letter-spacing: .14em; }

  /* 16px of padding rather than 13 takes the plate from 38px to 44px tall. */
  .hero__nav-cta { padding: 16px 18px; font-size: 10px; letter-spacing: .1em; }
}

/* Small phones. The wordmark keeps its second half at every width — the brand
   is "AOA Credit Solutions", and "AOA" alone tells a first-time visitor
   nothing. What gives way instead is the menu toggle's label, which is
   redundant next to the icon. */
@media (max-width: 430px) {
  .hero__wordmark-name { font-size: 16px; letter-spacing: .2em; }
  .hero__wordmark-sub { font-size: 8.5px; letter-spacing: .12em; }

  .hero__eyebrow { gap: var(--space-10); }
  .hero__eyebrow-text { font-size: 9px; letter-spacing: .18em; }
  .hero__eyebrow-rule { width: 30px; }
}

/* --- Reduced motion ------------------------------------------------------
   Entrance animations and the sheen sweep are decorative; drop them to their
   resting state. */
@media (prefers-reduced-motion: reduce) {
  .hero__panel,
  .hero__wordmark,
  .hero__eyebrow,
  .hero__headline,
  .hero__tagline,
  .hero__body,
  .hero__ctas,
  .hero__stats {
    animation: none;
  }

  .hero__headline-accent {
    animation: none;
    /* No sweep: the highlight parks off-frame and the metal shows on its own. */
    background-position: -55% 0, -35% 0;
  }

  .hero__ctas .cta-plate,
  .hero__ctas .cta-link { transition: none; }
}