/* ════════════════════════════════════════════════════════════════════
   LORDLY cinematic hero — chrome-reflective-red mark over a white cloud sea,
   scroll-scrubbed. Pinned for the duration of the scroll, then melts (via
   .lhero-bridge) into the cream of the #tax-reform section.
   Vars from styles.css :root  (--accent #B73344, --accent-deep #7A1422, etc.)
   ════════════════════════════════════════════════════════════════════ */

.lhero {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: #0b0c10; /* brief dark base behind clouds while plates load */
  isolation: isolate;
}

/* ── No-JS / reduced-motion fallback ───────────────────────────────── */
.lhero__noscript {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  text-align: center;
  gap: 18px;
  color: #fff;
}
.lhero__noscript h1 { font-size: clamp(34px, 6vw, 72px); font-weight: 800; letter-spacing: -.02em; }
.lhero__noscript p  { max-width: 560px; color: rgba(255,255,255,.8); font-size: 18px; }

/* ── White cloud sea (video plates) ────────────────────────────────── */
.lhero__sky {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.lhero__plate {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  /* Grade the (originally golden) plates toward a clean white cloud sea:
     kill saturation, lift brightness + ease the contrast so the warm/sepia
     tone reads as a bright white sky. */
  filter: brightness(1.42) saturate(0) contrast(1.02);
  transform: scale(1.06);
  will-change: opacity, transform;
}
.lhero__plate[data-plate="0"] { opacity: 1; }

/* A soft white veil that intensifies near the end to wash everything out */
.lhero__whitewash {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 50% 40%, rgba(255,255,255,0) 38%, rgba(255,255,255,.55) 100%),
    linear-gradient(180deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.28) 100%);
  opacity: .5;
  pointer-events: none;
}

/* ── 3D canvas (the chrome-red LORDLY mark) ────────────────────────── */
.lhero__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  display: block;
  pointer-events: none;
}

/* ── Scroll-linked text beats ──────────────────────────────────────── */
/* Beats sit near the BOTTOM of the frame (matching the VanguardCore hero),
   so the spinning chrome mark owns the centre. */
.lhero__beats {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  pointer-events: none;
  padding: 0 24px clamp(120px, 22vh, 230px);
}
.lhero__beat {
  position: absolute;
  bottom: clamp(120px, 22vh, 230px);
  left: 50%;
  transform: translate(-50%, 0);
  max-width: 920px;
  text-align: center;
  color: #fff;
  opacity: 0;
  will-change: opacity, transform;
  text-wrap: balance;
  text-shadow: 0 2px 14px rgba(20,4,8,.55);
}
/* Spaced, light uppercase — the VanguardCore title-beat treatment */
.lhero__beat--title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(17px, 2.4vw, 34px);
  letter-spacing: 0.42em;
  text-transform: uppercase;
  line-height: 1.1;
  text-indent: 0.42em; /* balance the trailing letter-space so it reads centred */
}
.lhero__beat--lede {
  font-family: var(--font);
  font-weight: 300;
  font-size: clamp(14px, 1.5vw, 19px);
  line-height: 2.05;            /* airy, editorial leading */
  letter-spacing: 0.045em;      /* gentle tracking so it breathes */
  word-spacing: 0.06em;
  color: rgba(255,255,255,.82);
  max-width: 600px;
}
/* Brand phrase inside the lede — refined silver-white accent */
.lhero__beat--lede .lhero__agent {
  font-weight: 500;
  letter-spacing: 0.14em;
  color: #fff;
  background: linear-gradient(180deg, #fff 0%, #ffe7ea 55%, #f6b8bf 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  white-space: nowrap;
}
/* "Keep scrolling" hint below the lede — fades in/out with the beat and
   gently bounces to invite the next scroll. */
.lhero__lede-cue {
  display: block;
  margin: clamp(20px, 3vh, 34px) auto 0;
  color: rgba(255,255,255,.55);
  filter: drop-shadow(0 2px 10px rgba(20,4,8,.5));
  animation: lhero-cue-bob 1.9s ease-in-out infinite;
}
@keyframes lhero-cue-bob {
  0%, 100% { transform: translateY(0); opacity: .55; }
  50%      { transform: translateY(7px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .lhero__lede-cue, .lhero__end-cue { animation: none; }
}

/* ── Mobile: keep the two CTA buttons SIDE BY SIDE on one row ──────────
   They shrink to share the row equally (instead of wrapping/stacking); the
   scroll-cue chevron still wraps to its own line below them. */
@media (max-width: 640px) {
  .lhero__end {
    width: min(92%, 430px);
    gap: 10px;
    padding: 0;
  }
  .lhero__btn {
    flex: 1 1 0;
    min-width: 0;
    justify-content: center;
    padding: 14px 12px;
    font-size: 14px;
    gap: 7px;
    white-space: nowrap;
  }
}
/* "REPLACE THE AGENT." in black — it reads against the bright white opening sky.
   Swap the dark drop-shadow for a soft white halo so it stays crisp on clouds. */
.lhero__beat[data-beat="0"] {
  color: #120406;
  font-weight: 700;
  text-shadow: 0 1px 12px rgba(255,255,255,.65);
}

/* ── End CTA (Download / Demo) ─────────────────────────────────────── */
.lhero__end {
  position: absolute;
  left: 50%;
  bottom: clamp(90px, 16vh, 180px);
  transform: translate(-50%, 24px);
  z-index: 5;
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
  opacity: 0;
  will-change: opacity, transform;
  pointer-events: none; /* enabled by JS once revealed */
}
.lhero__end.is-live { pointer-events: auto; }

.lhero__btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 15px 26px;
  border-radius: var(--r-full);
  font-family: var(--font);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -.01em;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-med) var(--ease), background var(--t-med) var(--ease);
}
.lhero__btn svg { display: block; }
.lhero__btn--primary {
  color: #fff;
  background: linear-gradient(135deg, #7A1422 0%, #B73344 52%, #9A1C2C 100%);
  box-shadow: 0 10px 30px rgba(122,20,34,.45), inset 0 1px 0 rgba(255,255,255,.18);
}
.lhero__btn--primary:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(122,20,34,.55); }
.lhero__btn--ghost {
  color: var(--accent-deep);
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(122,20,34,.18);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 8px 24px rgba(31,6,8,.12);
}
.lhero__btn--ghost:hover { transform: translateY(-2px); background: #fff; }

/* "Keep scrolling" hint below the CTA — full-width row so it wraps under the
   buttons, fades in/out with the whole .lhero__end block, and bobs. */
.lhero__end-cue {
  flex: 0 0 100%;
  display: block;
  margin: 6px auto 0;
  color: rgba(255,255,255,.6);
  filter: drop-shadow(0 2px 10px rgba(20,4,8,.5));
  animation: lhero-cue-bob 1.9s ease-in-out infinite;
}

/* ── Scroll cue ────────────────────────────────────────────────────── */
.lhero__cue {
  position: absolute;
  left: 50%;
  bottom: 30px;
  transform: translateX(-50%);
  z-index: 4;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: rgba(255,255,255,.82);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  text-decoration: none;
  will-change: opacity;
}
.lhero__cue svg { animation: lhero-bob 1.8s var(--ease) infinite; }
@keyframes lhero-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(5px); } }

/* ── Cloud bridge → dissolves seamlessly INTO the next section ───────
   The bridge is pulled up over the top of #tax-reform (negative margin) and
   the cloud video is masked to transparent at its base, so the white cloud
   sea literally melts into the cream of the next section with no seam. */
.lhero-bridge {
  position: relative;
  width: 100%;
  height: clamp(320px, 44vh, 520px);
  margin-bottom: calc(-1 * clamp(320px, 44vh, 520px)); /* overlay onto next section */
  /* visible so the cloud video can bleed UP over the hero's bottom edge and
     blend the seam — without changing where the next section sits in flow. */
  overflow: visible;
  z-index: 3;
  pointer-events: none;
}
.lhero-bridge__clouds {
  position: absolute;
  left: 0;
  width: 100%;
  /* Extend the clouds well ABOVE the bridge box, up over the hero's bottom, so
     the two cloud fields overlap and cross-blend instead of meeting at a line. */
  top: calc(-1 * clamp(150px, 22vh, 280px));
  height: calc(100% + clamp(150px, 22vh, 280px));
  object-fit: cover;
  /* EXACTLY the hero plate grade so the footage continues with no tonal step */
  filter: brightness(1.42) saturate(0) contrast(1.02);
  transform: scale(1.16); /* matches the hero's end-of-scroll parallax scale */
  /* Feather IN over the hero (top), stay opaque across the seam, then feather
     back out to transparent before the next section's heading — a long, soft,
     blurry blend with no hard edge anywhere. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.4) 18%, #000 32%, #000 44%, rgba(0,0,0,.4) 58%, transparent 72%);
  mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.4) 18%, #000 32%, #000 44%, rgba(0,0,0,.4) 58%, transparent 72%);
}
.lhero-bridge__fade {
  position: absolute;
  inset: 0;
  /* Clear at top (sky continues), a gentle cream wash mid to help the clouds
     dissolve, fully transparent again low down so it NEVER veils the text. */
  background: linear-gradient(180deg,
    rgba(251,248,242,0) 0%,
    rgba(251,248,242,0) 22%,
    rgba(251,248,242,.34) 46%,
    rgba(251,248,242,0) 70%);
}

/* The next section's 1px top divider was the visible "line" between sections
   — hide it so the hero flows straight into the cream. */
.tx::before { display: none !important; }

/* Give the next section enough top room that its heading lands in the clear
   cream BELOW the dissolving clouds — so the sky flows in AND the words stay
   fully legible (no cloud/veil over the text). */
.tx { padding-top: clamp(210px, 30vh, 340px) !important; }

/* ── Reduced motion: drop the cinematic layer, show a clean static hero ─ */
@media (prefers-reduced-motion: reduce) {
  .lhero__canvas { display: none; }
  .lhero__plate { animation: none !important; }
  .lhero__beat[data-beat="0"] { opacity: 1; transform: none; position: relative; }
  .lhero__beat[data-beat="1"], .lhero__beat[data-beat="2"] { display: none; }
  .lhero__end { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; bottom: clamp(48px,10vh,90px); }
  .lhero__cue { display: none; }
}