/* ============================================================
   Home page — Phase 2: hero only.
   Other home sections arrive in Phase D.
   ============================================================ */

/* Neutralize the global main padding-top — the hero is full-bleed
   and the fixed transparent header overlays it. (See the matching
   note in components.css line 420.) */
main { padding-block-start: 0; }

/* Cold-open scroll lock — added by JS during the cold-open timeline,
   removed once the hold completes. */
body.is-locked {
  overflow: hidden;
  height: 100vh;
  touch-action: none;
}
html:has(body.is-locked) {
  overflow: hidden;
}

/* ============================================================
   HERO
   ============================================================ */

.hero {
  position: relative;
  width: 100vw;
  height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
  background: var(--c-navy-deep);
}

.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    160deg,
    rgba(18, 63, 109, 0.35) 0%,
    rgba(18, 63, 109, 0.55) 60%,
    rgba(18, 63, 109, 0.70) 100%
  );
  pointer-events: none;
}

.hero__inner {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  padding-block: var(--section-py);
  padding-inline: clamp(24px, 5vw, 96px);
  max-width: 1400px;
}

/* ---- Eyebrow over dark hero ---- */
.hero__eyebrow {
  color: var(--c-text-on-dark-meta);
  margin-block-end: var(--sp-3);
}
.hero__eyebrow::before { background: currentColor; }

/* ---- Display headline ---- */
.hero__title {
  font-family: var(--ff-display);
  font-variation-settings: var(--fvar-display);
  font-size: clamp(40px, 5.5vw, 96px);
  font-weight: 600;
  line-height: 1.0;
  letter-spacing: -0.01em;
  color: var(--c-bone);
  margin-block: 0;
}

/* ---- Sub paragraph ---- */
.hero__sub {
  font-family: var(--ff-sans);
  font-weight: 400;
  font-size: clamp(16px, 1.4vw, 21px);
  line-height: 1.5;
  color: rgba(241, 242, 242, 0.85);
  max-width: 60ch;
  margin-block-start: var(--sp-4);
}

/* ---- CTAs ---- */
.hero__ctas {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-block-start: var(--sp-5);
}

/* Hero CTAs are flat (no .btn__inner wrapper) — apply the magnetic
   var-driven transform on the .btn itself so JS-driven --btn-mag-x / -y
   visibly move the button. Scoped to the hero only. */
.hero .btn {
  transform: translate3d(var(--btn-mag-x), var(--btn-mag-y), 0);
  transition: transform var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}

/* ---- Hero corner — parallelogram cut top-right, matching brand pack
   p.2/7-8 (the orange cover-image corner on the bridge photo).
   Four-point shape with the signature diagonal left edge from (40%, 0)
   to (70%, 100%). Overrides the default .brand-corner--tr clip-path. ---- */
.brand-corner--hero {
  --bc-w: clamp(180px, 18vw, 320px);
  --bc-h: clamp(64px, 9vw, 200px);
  z-index: 3;
  clip-path: polygon(40% 0, 100% 0, 100% 100%, 70% 100%);
}

/* ---- Scroll cue ---- */
.hero__scroll-cue {
  position: absolute;
  inset-block-end: var(--sp-5);
  inset-inline-end: clamp(24px, 5vw, 96px);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  color: rgba(241, 242, 242, 0.6);
  font-family: var(--ff-sans);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
.hero__scroll-cue:hover { color: var(--c-bone); }
.hero__scroll-cue-line {
  display: inline-block;
  inline-size: 32px;
  block-size: 1px;
  background: currentColor;
}

/* ---- Placeholder label ---- */
.hero__placeholder-label {
  position: absolute;
  inset-block-end: var(--sp-3);
  inset-inline-end: var(--sp-3);
  z-index: 3;
  margin: 0;
  font-family: var(--ff-sans);
  font-size: 11px;
  font-weight: 500;
  color: rgba(241, 242, 242, 0.45);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  pointer-events: none;
}

/* ============================================================
   PRE-ANIMATION INITIAL STATES
   Applied only when JS is enabled (root .js class) AND user has
   not opted into reduced motion. The .js class is set by an inline
   script in <head> before the body parses — prevents FOUC.
   ============================================================ */

.js .hero__title[data-mask] .mask__inner { transform: translateY(100%); }
.js .hero__eyebrow,
.js .hero__sub,
.js .hero__ctas .btn,
.js .hero__scroll-cue { opacity: 0; }
/* FIX C: placeholder label stays at its base CSS appearance permanently.
   Its color already carries 45% alpha, so no opacity ramp is needed and
   the label remains visible from first paint and across page swaps. */

/* Brand-corner collapsed to a 4-point degenerate polygon at the top-right.
   GSAP can morph all four corners simultaneously to the final 4-point
   brand-corner--tr polygon. */
.js .brand-corner--hero {
  clip-path: polygon(100% 0, 100% 0, 100% 0, 100% 0);
}

/* ============================================================
   REDUCED-MOTION FALLBACK
   No animation: all elements settled, corner fully drawn, scroll
   lock skipped. Curtain handled separately in animations.js.
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .js .hero__title[data-mask] .mask__inner { transform: none; }
  .js .hero__eyebrow,
  .js .hero__sub,
  .js .hero__ctas .btn,
  .js .hero__scroll-cue { opacity: 1; }
  /* placeholder label: no override needed — it stays at its base CSS
     appearance (rgba color with 0.45 alpha) in both motion modes. */
  .js .brand-corner--hero {
    clip-path: polygon(40% 0, 100% 0, 100% 100%, 70% 100%);
  }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 768px) {
  .hero__inner {
    padding-block: clamp(80px, 14vh, 120px);
    padding-inline: var(--sp-4);
  }
  .hero__ctas { width: 100%; }
  .hero__ctas .btn { flex: 1 1 auto; justify-content: center; }
  .hero__scroll-cue { display: none; }
  .brand-corner--hero {
    --bc-w: clamp(120px, 32vw, 200px);
    --bc-h: clamp(40px, 8vw, 70px);
  }
  .hero__placeholder-label {
    font-size: 10px;
    inset-block-end: var(--sp-2);
    inset-inline-end: var(--sp-2);
  }
}