/* Aureum Mobility — HomeHero styles (the brand-film hero).
   Pairs with src/components/HomeHero.astro. Uses the site's onyx / champagne /
   gold tokens so it reads as the brand's gallery moment. Home-only stylesheet;
   remove the <link> in index.astro to delete.

   Layering inside the stage:
     z0  .dp-hero-poster  — real <img> (LCP candidate + no-JS / reduced-motion frame)
     z1  .dp-hero-video   — the ~15s looping brand film, painted over the poster
     z2  .dp-hero-veil    — legibility + brand darkening
     z3  .dp-hero-copy    — headline / subhead / CTA (visible at load; 5-second test)

   (The 121-frame scroll-scrub hero this replaced lives in git history:
    DroneportScrub.jsx + the pre-2026-07-04 version of this file.) */

.dp-hero {
  position: relative;
  height: 100vh;
  height: 100dvh; /* avoid mobile browser-chrome clipping; falls back to 100vh */
  min-height: 600px;
  background: var(--onyx-1000);
  color: var(--champagne-50);
}

.dp-hero-stage {
  position: relative;
  height: 100%;
  overflow: hidden;
  isolation: isolate;
}

.dp-hero-poster,
.dp-hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.dp-hero-poster { z-index: 0; }
.dp-hero-video { z-index: 1; }

/* No-JS + reduced-motion: nothing strips the autoplay attribute, so suppress the
   film entirely and let the poster stand. (With JS, Base initPage handles RM.) */
@media (prefers-reduced-motion: reduce) {
  html:not(.js) .dp-hero-video { display: none; }
}

/* The hero's pause control sits top-right, under the 88px header — the copy and
   CTA row own the bottom of the frame (site.css default is bottom-right). */
.dp-hero .video-toggle { top: 104px; bottom: auto; }

/* Legibility + brand veil — darkens bottom and left so the bottom-left copy
   reads cleanly over any frame of the film. */
.dp-hero-veil {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(180deg,
      rgba(11, 11, 14, 0.42) 0%,
      rgba(11, 11, 14, 0) 26%,
      rgba(11, 11, 14, 0) 48%,
      rgba(11, 11, 14, 0.55) 86%,
      rgba(11, 11, 14, 0.9) 100%),
    linear-gradient(95deg,
      rgba(11, 11, 14, 0.55) 0%,
      rgba(11, 11, 14, 0) 55%);
}

/* ── Copy ─────────────────────────────────────────────────────────────────── */
.dp-hero-copy {
  position: absolute;
  z-index: 3;
  left: var(--gutter, 56px);
  right: var(--gutter, 56px);
  bottom: 14vh;
}
.dp-hero-h1 {
  margin: 0;
  font-family: var(--font-sans-condensed);
  font-weight: 500;
  /* Width-driven scale, capped by BOTH axes: 8vw keeps the longest declared line
     ("Vertiport infrastructure", ~11em) inside the gutters at every desktop width,
     and 15vh keeps the bottom-anchored block from overflowing the top on short
     viewports (1366x768 laptops, 1080p at 125% OS scale). */
  font-size: clamp(56px, min(8vw, 15vh), 150px);
  line-height: 0.92;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  color: var(--champagne-50);
  text-wrap: balance;
  /* Travels with the glyphs: keeps AA legibility through the film's brightest
     frames (the sunset beat), invisible over the dark ones. */
  text-shadow: 0 2px 28px rgba(11, 11, 14, 0.55), 0 1px 3px rgba(11, 11, 14, 0.45);
}
.dp-hero-h1 .line { display: block; }
.dp-hero-h1 .underrule {
  display: block;
  width: 88px; /* matches .phero .keyline — one brand keyline width sitewide */
  height: 2px;
  margin-top: 24px;
  background: var(--aureum-gold);
}
.dp-hero-sub {
  margin: 32px 0 0;
  max-width: 44ch;
  font-family: var(--font-sans);
  font-size: clamp(17px, 1.35vw, 21px);
  line-height: 1.55;
  font-weight: 400;
  color: rgba(250, 248, 242, 0.86);
  text-shadow: 0 1px 16px rgba(11, 11, 14, 0.5), 0 1px 2px rgba(11, 11, 14, 0.4);
}
.dp-hero-actions {
  margin-top: 32px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

/* CTA — same metrics as the sitewide .btn so the first button a visitor sees
   speaks the same dialect as every other primary button. */
.dp-hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 28px;
  border: 1px solid var(--aureum-gold);
  background: transparent;
  color: var(--aureum-gold-light);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  transition:
    background var(--dur-base, 200ms) var(--ease-out, cubic-bezier(0.2, 0.7, 0.2, 1)),
    color var(--dur-base, 200ms) var(--ease-out, cubic-bezier(0.2, 0.7, 0.2, 1)),
    transform var(--dur-fast, 120ms) var(--ease-out, cubic-bezier(0.2, 0.7, 0.2, 1));
}
.dp-hero-cta:hover { background: var(--aureum-gold); color: var(--onyx-1000); }
.dp-hero-cta:active { transform: translateY(1px); }
.dp-hero-cta:focus-visible {
  outline: 2px solid var(--aureum-gold-light);
  outline-offset: 3px;
}
.dp-hero-cta .arr { display: inline-flex; transition: transform var(--dur-base, 200ms) var(--ease-out, cubic-bezier(0.2, 0.7, 0.2, 1)); }
.dp-hero-cta:hover .arr { transform: translateX(4px); }
/* Secondary hero action: ghost register (hairline, no gold, no fill on hover). */
.dp-hero-cta.is-secondary {
  border-color: rgba(250, 248, 242, 0.4);
  color: var(--champagne-50);
}
.dp-hero-cta.is-secondary:hover {
  background: transparent;
  border-color: var(--champagne-50);
  color: var(--champagne-50);
}

/* Warm bleed into the following section — the hero flows into the continuous
   golden-hour dark field with no hard seam. */
.dp-hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 96px;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(11, 11, 14, 0) 0%,
    rgba(40, 32, 24, 0.55) 55%,
    rgba(20, 16, 11, 0.94) 85%,
    var(--dusk-1, #14100B) 100%
  );
}

/* Reduced transparency: collapse the veil to a near-solid bottom scrim so copy
   legibility never depends on translucency. */
@media (prefers-reduced-transparency: reduce) {
  .dp-hero-veil {
    background: linear-gradient(180deg,
      rgba(11, 11, 14, 0.55) 0%,
      rgba(11, 11, 14, 0.35) 45%,
      rgba(11, 11, 14, 0.82) 80%,
      rgba(11, 11, 14, 0.95) 100%);
  }
}

@media (max-width: 768px) {
  .dp-hero-copy { left: 5vw; right: 5vw; bottom: 16vh; }
  .dp-hero::after { height: 72px; }
}

/* Short viewports — wide-and-short laptops (1366x768 after browser chrome),
   1080p at 125% OS scale, ultrawide-short windows, and landscape phones. The
   copy is bottom-anchored, so on a short viewport a width-scaled 3-line headline
   would overflow the TOP. Drive the headline by height, pull the copy toward the
   bottom, and tighten inter-tier gaps so the whole block always fits on-screen.
   Placed after the max-width rule so it wins the bottom-offset on short phones. */
@media (max-height: 700px) {
  .dp-hero-copy { bottom: 7vh; }
  .dp-hero-h1 { font-size: clamp(46px, min(8vw, 13vh), 132px); }
  .dp-hero-h1 .underrule { margin-top: 12px; }
  .dp-hero-sub { margin: 16px 0 0; }
  .dp-hero-actions { margin-top: 18px; }
}

/* Reduced motion: the poster stands (Base strips autoplay), no hover slides. */
@media (prefers-reduced-motion: reduce) {
  .dp-hero-cta, .dp-hero-cta .arr { transition: none; }
}