/* Hero text choreography: rule draws, then label > H1 > lead > buttons slide up out of a mask.
   Pure CSS (keyframes), only transform / opacity / clip-path animate. Motion resolves upward only. */
.hero {
  --hero-ease: cubic-bezier(.22, .8, .3, 1);   /* ease-out, no overshoot */
}

/* Mask: clips the bottom edge while the child rises; opens fully when done so focus rings are never cut. */
.hero-mask { display: block; animation: hero-mask-open var(--d, .45s) linear var(--delay, 0s) both; }
.hero h1 .hero-mask { padding-bottom: .2em; margin-bottom: -.2em; }   /* room for descenders, no layout shift */
.hero .eyebrow .hero-mask { padding-block: .3em; margin-block: -.3em; }
span.hero-rise { display: block; }
.hero-rise { animation: hero-rise var(--d, .45s) var(--hero-ease) var(--delay, 0s) both; }

/* Eyebrow rule: draws left to right */
.hero .eyebrow::before { transform-origin: left center; animation: hero-rule .4s var(--hero-ease) 0s both; }

/* Sequence: reveals 0.4-0.5 s each, staggered 0.1-0.13 s; whole block settled by ~0.93 s */
.hero .eyebrow .hero-mask { --delay: .1s; --d: .4s; }
.hero h1 .hero-mask       { --delay: .22s; --d: .5s; }
.hero-lead-mask           { --delay: .35s; --d: .45s; }
.hero-actions-mask        { --delay: .48s; --d: .45s; }

/* Legibility: local scrim (left-anchored, fades out toward the right so the video stays vivid there).
   Sits between the global overlay (::before) and the text (.hero-inner, z-index 2). */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(ellipse 62% 78% at 12% 52%, rgba(0,18,56,.62) 0%, rgba(0,18,56,.4) 48%, rgba(0,18,56,0) 100%);
}
@media (max-width: 900px) {
  .hero::after { background: linear-gradient(0deg, rgba(0,18,56,.55) 0%, rgba(0,18,56,.5) 55%, rgba(0,18,56,.2) 100%); }
}

/* Supporting text: eyebrow and lead read clearly over bright concrete */
.hero .eyebrow { font-size: .8rem; text-shadow: 0 1px 12px rgba(0,18,56,.55); }
.hero-lead { color: #fff; font-weight: 500; text-shadow: 0 1px 14px rgba(0,18,56,.6); }

/* Second action: quiet editorial text link, short line grows on hover / focus (0.25 s) */
.hero-actions { align-items: center; gap: 14px 32px; }
.hero-actions .btn-ghost {
  position: relative; display: inline-flex; align-items: center; gap: 12px;
  padding: 15px 0; border: 0; border-radius: 0; background: none; color: #fff;
}
.hero-actions .btn-ghost::after {
  content: ""; width: 44px; height: 1.5px; background: currentColor;
  transform: scaleX(.45); transform-origin: left center; transition: transform .25s;
}
.hero-actions .btn-ghost:hover, .hero-actions .btn-ghost:focus-visible { background: none; color: #fff; border-color: transparent; }
.hero-actions .btn-ghost:hover::after, .hero-actions .btn-ghost:focus-visible::after { transform: scaleX(1); }
.hero-actions .btn-ghost:focus-visible { outline: 2px solid #5fd0f5; outline-offset: 4px; }

/* Hero buttons: hover / focus transitions are exactly 0.25 s */
.hero-actions .btn { transition: background-color .25s, color .25s, border-color .25s; }
.hero-actions .btn-ghost { transition: color .25s, border-color .25s; }

@keyframes hero-mask-open {
  0%, 99.9% { clip-path: inset(-40px -40px 0 -40px); }
  100%      { clip-path: inset(-40px -40px -40px -40px); }
}
@keyframes hero-rise {
  from { opacity: 0; transform: translateY(110%); }
  to   { opacity: 1; transform: none; }
}
@keyframes hero-rule {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-mask, .hero-rise, .hero .eyebrow::before { animation: none; }
  .hero-actions .btn-ghost::after { transition: none; }
}