/* TLA Travels — home hero (layered: sky → clouds → plane → copy → rock → grain). From hero-reference.html. */
.hero-tla {
  --plane-dur: 80s;             /* time to cross the screen: bigger = slower */
  --plane-delay: 1.5s;
  /* Everything that must line up with the rock is in cqw (the foreground image is scaled to the hero's width,
     so 1cqw = 1/100 of the image width on every screen size and height). */
  --fg-shift: 4cqw;             /* push the rock/sea down so the summit clears the header */
  --plane-top: 21cqw;           /* flight line: 4cqw shift + ~30% down the image, where the rock spans ≈23–41cqw */
  --plane-nose-start: 41cqw;    /* nose start x: just inside the rock's right edge at the flight line */
  --rise: 24cqw;                /* how far the copy rises from the horizon */
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 560px;
  max-height: 100vh;
  overflow: hidden;
  container-type: inline-size;  /* children use cqw = % of hero width */
  background: var(--navy);
}
.hero-tla__abs { position: absolute; pointer-events: none; }

/* 1 — sky: header navy at the top → page snow at the bottom */
.hero-tla__sky {
  inset: 0; z-index: 1;
  background: linear-gradient(180deg, var(--navy) 0%, var(--navy) 6%, var(--ocean) 40%, var(--ocean-soft) 58%, var(--mist) 80%, var(--snow) 100%);
}
.hero-tla__blob { z-index: 1; border-radius: 50%; will-change: transform; }
.hero-tla__blob--a { width: 70cqw; height: 52cqw; top: -22cqw; right: -14cqw; background: radial-gradient(closest-side, rgba(0, 110, 180, .75), rgba(0, 86, 145, 0)); animation: hero-drift-a 48s ease-in-out infinite alternate; }
.hero-tla__blob--b { width: 60cqw; height: 40cqw; top: 16cqw; right: -6cqw; background: radial-gradient(closest-side, rgba(232, 241, 245, .55), rgba(232, 241, 245, 0)); animation: hero-drift-b 62s ease-in-out infinite alternate; }
.hero-tla__glow { inset: 0; z-index: 1; background: radial-gradient(ellipse 30% 46% at 33% 46%, rgba(232, 241, 245, .62), rgba(232, 241, 245, 0) 72%); animation: hero-breathe 14s ease-in-out infinite alternate; }
@keyframes hero-drift-a { to { transform: translate(-8cqw, 5cqw) scale(1.08); } }
@keyframes hero-drift-b { to { transform: translate(-14cqw, -2cqw) scale(1.15); } }
@keyframes hero-breathe { from { opacity: .75; } to { opacity: 1; } }

/* 2 & 4 — cloud strips (seamless tiles, 200% wide, scroll by exactly one tile) */
.hero-tla__clouds { left: 0; width: 200%; background-repeat: repeat-x; background-size: 50% 100%; will-change: transform; animation: hero-scroll-x linear infinite; }
.hero-tla__clouds--far { z-index: 2; top: 2%; height: 62%; background-image: url("../assets/hero/cloud-far.webp"); opacity: .85; animation-duration: 300s; }
.hero-tla__clouds--near { z-index: 4; top: 12%; height: 66%; background-image: url("../assets/hero/cloud-near.webp"); opacity: .5; animation-duration: 170s; }
/* layer order: sky 1 → far clouds 2 → copy 3 → near clouds 4 → plane 5 → rock/sea 6 → grain 7 */
@keyframes hero-scroll-x { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* 5 — plane + banner, in front of the copy, behind the rock (one-shot: hero.js removes it when it has left the screen) */
.hero-tla__plane {
  --w: clamp(220px, 16cqw, 360px);   /* narrower than the rock at the flight line, so the whole banner starts hidden */
  z-index: 5; top: var(--plane-top); left: 0; width: var(--w);
  transform: translateX(2cqw);       /* starts at the left edge, whole plane + banner in view */
  animation: hero-cross var(--plane-dur) linear var(--plane-delay) 1 both;
  will-change: transform;
}
.hero-tla__plane img { width: 100%; height: auto; filter: saturate(.9) brightness(.98) blur(.25px); opacity: .94; }
@keyframes hero-cross {
  0%   { transform: translateX(2cqw); }
  100% { transform: translateX(105cqw); }
}

/* 3 — copy: each line rises out of the sea at the horizon (the foreground layer is in front, so it masks the start) */
.hero-tla__copy {
  position: absolute; left: 52cqw; top: 24%; z-index: 3; max-width: 44cqw;
  color: var(--snow); text-shadow: 0 2px 22px rgba(0, 40, 70, .45);
}
.hero-tla__copy > * { animation: hero-rise 1.6s var(--ease-out) both; }
.hero-tla__copy > :nth-child(1) { animation-delay: .35s; }
.hero-tla__copy > :nth-child(2) { animation-delay: .5s; }
.hero-tla__copy > :nth-child(3) { animation-delay: .68s; }
.hero-tla__copy > :nth-child(4) { animation-delay: .86s; }
.hero-tla__copy > :nth-child(5) { animation-delay: .86s; }
.hero-tla__copy > [hidden] { display: none; }
/* spotlight card (styles in components.css .hero-spot); sits where the intro line was */
.hero-tla__spot { margin: 0 0 1.4em; text-shadow: none; max-width: 34cqw; }
.hero-tla__copy .eyebrow {
  display: inline-flex; align-items: center; gap: .7em; text-shadow: none;
  color: #fff; font-size: clamp(10px, .85cqw, 14px); letter-spacing: .28em;
}
.hero-tla__copy .eyebrow::before { content: ""; width: 3.2em; height: 2px; background: var(--accent); border-radius: 2px; }
.hero-tla__copy h1 {
  color: #fff; font-size: clamp(30px, 5cqw, 92px); font-weight: 800; line-height: .98; letter-spacing: -.035em; margin: 0 0 .3em;
  text-wrap: balance; text-shadow: 0 4px 30px rgba(0, 40, 70, .5);
}
.hero-tla__copy h1 em {
  font-style: normal; background: linear-gradient(100deg, #ffd9b8 0%, #ffb072 55%, var(--accent) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; filter: drop-shadow(0 3px 14px rgba(0, 40, 70, .35));
}
.hero-tla__copy p { font-size: clamp(14px, 1.3cqw, 22px); line-height: 1.55; color: #e8f1f5; margin: 0 0 1.4em; max-width: 32ch; padding-left: 1em; border-left: 2px solid rgba(255, 255, 255, .45); }
.hero-tla__cta { display: flex; gap: .75rem; flex-wrap: wrap; text-shadow: none; }
@keyframes hero-rise { 0% { transform: translateY(var(--rise)); opacity: 0; } 40% { opacity: 1; } 100% { transform: translateY(0); opacity: 1; } }

/* 6 — foreground (rock, sea, islands), pushed down by --fg-shift.
   The image is anchored to its TOP so the summit is never cropped when the hero is wider than 16:9 (it is on most
   screens, because of max-height: 100vh); any overflow comes off the sea. The fade sits on the wrapper so it is
   always relative to the hero's bottom edge, whatever the aspect ratio. */
.hero-tla__fg-wrap {
  inset: 0; z-index: 6; overflow: hidden;
  /* no fade at the bottom: the sea runs to the hero's edge (the old mask faded it into the page colour, which read as fog) */
}
.hero-tla__fg {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 0;
  transform: translateY(var(--fg-shift));
}

/* 7 — film grain */
.hero-tla__grain { inset: 0; z-index: 7; opacity: .07; mix-blend-mode: overlay; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }

/* scroll cue */
.hero-tla__scroll { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 8; color: var(--navy); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; display: flex; flex-direction: column; align-items: center; gap: 4px; opacity: .7; }
.hero-tla__scroll svg { width: 18px; height: 18px; animation: hero-bob 1.6s ease-in-out infinite; }
@keyframes hero-bob { 50% { transform: translateY(5px); } }

/* narrow screens: the rock fills the frame, so the copy moves ABOVE the foreground with a scrim; plane hidden (banner unreadable that small) */
.hero-tla__scrim { display: none; }
@media (max-width: 767px) {
  /* Phone sky: the whole first screen. Its own portrait cloud tiles (1:2, never stretched) and a taller gradient. */
  .hero-tla { --rise: 28px; --hh: max(100vh, 600px); --hh: max(100svh, 600px); aspect-ratio: auto; height: var(--hh); min-height: 0; max-height: none; }
  .hero-tla__fg-wrap { display: none; }   /* phones: sky only, no rock */
  .hero-tla__plane { display: none; }
  /* Sky, full screen: the source photo's real sky re-graded to the brand blues (tools/build_mobile_sky.py), anchored at
     the horizon so the pale haze meets the page colour; deep navy overhead. No gradient blobs/glow (they read as patches). */
  .hero-tla__sky { background: var(--navy-deep) url("../assets/hero/sky-mobile.webp") center bottom / cover no-repeat; }
  .hero-tla__blob, .hero-tla__glow, .hero-tla__clouds--near { display: none; }
  /* a strip of thin high cloud (crop + mirror = loop unit, 2760x430) drifting slowly so the sky isn't dead still */
  .hero-tla__clouds--far { top: 26%; height: 34cqw; width: calc(2 * 34cqw * 2760 / 430); background-size: 50% 100%; background-image: url("../assets/hero/sky-mobile-far.webp"); opacity: .7; animation-duration: 300s; }
  .hero-tla__scrim { display: block; inset: 0; z-index: 7; background: linear-gradient(180deg, rgba(0, 54, 92, .55) 0%, rgba(0, 54, 92, .25) 45%, rgba(0, 54, 92, 0) 65%); }
  .hero-tla__copy { left: var(--container-pad); right: var(--container-pad); top: 47%; translate: 0 -52%; max-width: none; z-index: 8; }
  .hero-tla__copy { text-align: center; }
  .hero-tla__copy h1 { font-size: clamp(2.1rem, 10vw, 3.4rem); }
  .hero-tla__copy .eyebrow { justify-content: center; }
  .hero-tla__copy .eyebrow::after { content: ""; width: 3.2em; height: 2px; background: var(--accent); border-radius: 2px; }
  .hero-tla__copy p { font-size: 1rem; max-width: 30ch; margin-inline: auto; padding-left: 0; border-left: 0; }
  .hero-tla__spot { max-width: 360px; margin-inline: auto; text-align: left; }
  .hero-tla__cta { flex-direction: column; align-items: center; justify-content: center; }
  .hero-tla__cta .btn-tla { width: min(100%, 320px); justify-content: center; }
  .hero-tla__cta .btn-tla--ghost-light { background: rgba(0, 54, 92, .34); border-color: rgba(255, 255, 255, .7); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }   /* stays readable over the pale horizon */
  .hero-tla__scroll { display: none; }
}

/* Phone-only flyover. A top-down photo of the plane rises from below the screen and leaves over the top, once.
   It is fixed to the viewport and above the header, so it reads as flying over the phone, not across the page:
   it grows as it nears the glass, banks as it goes, and casts a soft shadow on the page underneath. */
.hero-jet { display: none; }
@media (max-width: 767px) {
  .hero-jet {
    display: grid; place-items: center; position: fixed; inset: 0; z-index: 2000; overflow: hidden; pointer-events: none;
    visibility: hidden;                         /* js/hero.js adds .is-flying once the image has decoded */
    --jw: min(112vw, 62svh);                    /* wingspan at scale 1 */
    --jet-dur: 8s;
  }
  .hero-jet.is-flying { visibility: visible; }
  .hero-jet img {
    width: var(--jw); height: auto; will-change: translate, scale, transform;
    filter: drop-shadow(0 30px 24px rgba(0, 28, 56, .36));
    translate: -4vw calc(50svh + var(--jw) * .55);
  }
  .hero-jet.is-flying img {
    animation:
      jet-rise var(--jet-dur) cubic-bezier(.35, .08, .55, .96) .9s 1 both,
      jet-grow var(--jet-dur) cubic-bezier(.4, 0, .6, 1) .9s 1 both,
      jet-bank var(--jet-dur) ease-in-out .9s 1 both;
  }
}
@keyframes jet-rise {
  from { translate: -4vw calc(50svh + var(--jw) * .55); }
  to   { translate: 5vw calc(-50svh - var(--jw) * .85); }
}
@keyframes jet-grow {
  from { scale: .68; }
  to   { scale: 1.4; }
}
@keyframes jet-bank {
  0%   { transform: perspective(700px) rotateY(-12deg) rotateZ(-2.5deg); }
  45%  { transform: perspective(700px) rotateY(9deg) rotateZ(1.5deg); }
  100% { transform: perspective(700px) rotateY(-5deg) rotateZ(2deg); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-jet { display: none; }
  .hero-tla__plane { display: none; }
  .hero-tla__blob, .hero-tla__glow, .hero-tla__clouds, .hero-tla__copy > *, .hero-tla__scroll svg { animation: none; }
}