/*
  www/css/hero.css
  Hero scene (v4, calm): five absolutely positioned depth layers — sky
  (sunburst + halftone + planes flying across it), two back clouds, the
  island group (island and three units), and two front cloud banks —
  plus the hero grid that holds the copy.
  The headline block (kicker, sticker tag) lives in css/hero-banner.css.
  js/hero.js adds the fly-in, the fly-by planes, scroll and mouse parallax.

  Placement system: every layer is sized and placed in "scene units" (--u),
  so the composition keeps its shape on any screen. --x is the layer's centre
  and --y its top edge, both measured from the hero's centre (--cx, --cy).
*/

.hero {
  --u: min(1vw, 1.6vh);
  --cx: 50%; --cy: 50%;
  position: relative; z-index: 2; isolation: isolate;
  min-height: 100svh; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center;
  padding: 120px var(--gutter) 90px;
  background: var(--rojo);
}

.hero__scene { position: absolute; inset: 0; pointer-events: none; }
.layer {
  position: absolute; z-index: var(--z, 1);
  left: calc(var(--cx) + (var(--x) - var(--w) / 2) * var(--u));
  top: calc(var(--cy) + var(--y) * var(--u));
  width: calc(var(--w) * var(--u));
}
.layer img, .layer [data-enter] { display: block; width: 100%; }
/* Only promote layers to the GPU while motion is actually running (js/hero.js adds .has-motion). */
.has-motion .layer, .has-motion .layer [data-enter], .has-motion .flyby { will-change: transform; }

/* Hidden until js/hero.js sets the fly-in start state (see the inline script in index.html). */
.intro .hero [data-enter], .intro .hero [data-intro], .intro .hero [data-slam],
.intro .hero [data-stamp] { visibility: hidden; }

/* ---------- Sky: very slow sunburst + halftone + fly-by planes ---------- */
.layer.sky { inset: -6%; width: auto; --z: 0; }
.sky__fly { position: absolute; inset: 0; }
.sunburst {
  position: absolute; left: 62%; top: 50%; width: 260vmax; aspect-ratio: 1; translate: -50% -50%;
  background: repeating-conic-gradient(from 0deg, var(--rojo-hi) 0deg 7.5deg, var(--rojo) 7.5deg 15deg);
  -webkit-mask: radial-gradient(closest-side, #000 18%, rgba(0,0,0,.35) 60%, transparent 85%);
          mask: radial-gradient(closest-side, #000 18%, rgba(0,0,0,.35) 60%, transparent 85%);
  animation: spin 240s linear infinite;
}
.enlist__sky { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero__dots {
  position: absolute; inset: auto 0 0; height: 45%;
  background: radial-gradient(circle, var(--rojo-lo) 1.6px, transparent 2.2px) 0 0 / 12px 12px;
  -webkit-mask: linear-gradient(transparent, #000); mask: linear-gradient(transparent, #000);
  opacity: .6;
}

/* Planes crossing the sky between the nav and the copy block, behind the clouds and island.
   js/hero.js computes that band from the live layout. Each plane is hidden until it launches,
   so reduced motion (no JS motion) shows none. Smaller = farther = softer and slower. */
.flybys { position: absolute; inset: 0; } /* js/hero.js fades this out while the page is scrolled */
.flyby { position: absolute; left: 0; top: 0; visibility: hidden; }
.flyby--far  { width: calc(4.5 * var(--u)); opacity: .75; filter: saturate(.7) contrast(.85) blur(.3px); }
.flyby--mid  { width: calc(7 * var(--u)); opacity: .92; filter: saturate(.9); }
.flyby--near { width: calc(9.5 * var(--u)); }
.flyby--mid img { --d: -1.1s; } .flyby--near img { --d: -2.2s; }

/* ---------- Layers, back to front (desktop placement) ---------- */
.cloud--back1 { --w: 30; --x: 41;  --y: -27; --z: 2; }
.cloud--back2 { --w: 13; --x: -25; --y: -27; --z: 2; }
.island       { --w: 54; --x: 22;  --y: -23; --z: 5; }
.bank--l      { --w: 56; --x: -30; --y: 23;  --z: 31; }
.bank--r      { --w: 64; --x: 36;  --y: 19;  --z: 32; }

/* Copy sits above the scene but below the foreground clouds. */
.hero__copy { position: relative; z-index: 20; }

.cloud img { filter: drop-shadow(0 16px 20px rgba(100, 0, 0, .22)); }
.cloud--back2 .drift { animation-direction: reverse; animation-duration: 23s; }
.bank img { filter: drop-shadow(0 -10px 30px rgba(120, 0, 0, .25)); }

/* Island group: the island, its three units and the looping plane float together. */
.island__stage { position: relative; animation: float 8s ease-in-out infinite; }
.island__img { position: relative; z-index: 1; filter: drop-shadow(0 calc(3 * var(--u)) calc(3 * var(--u)) rgba(80, 0, 0, .45)); }
.unit { position: absolute; z-index: 3; filter: drop-shadow(0 12px 10px rgba(60, 0, 0, .35)); }
.layer .unit--tank  { left: 0;   top: 70%; width: 22%; --d: -.6s; }
.layer .unit--grunt { left: 76%; top: 70%; width: 11%; --d: -1.7s; }
.layer .unit--boat  { left: 86%; top: 47%; width: 17%; --d: -2.4s; }

/* Slow idle drift (on the img, never on GSAP's elements). */
.drift { animation: drift 30s ease-in-out infinite; }

.hero__scroll {
  position: absolute; left: 0; right: 0; bottom: 22px; z-index: 33; width: max-content; margin: auto;
  font: 400 12px/1 var(--f-stencil); letter-spacing: .24em; text-transform: uppercase; text-decoration: none;
  color: var(--ink);
}
.hero__scroll span { display: inline-block; margin-left: 6px; animation: bob 1.6s ease-in-out infinite; }

@keyframes float { 50% { transform: translateY(-12px); } }
@keyframes drift { 50% { transform: translateX(-5%); } }

/* ---------- Mobile: island on top, copy below, lighter ---------- */
@media (max-width: 860px) {
  .hero {
    --u: 1vw; --cy: 0px;
    grid-template-columns: 1fr; align-content: start;
    padding-top: calc(104px + 86 * var(--u)); padding-bottom: 72px;
  }
  .cloud--back1 { --w: 56;  --x: 40;  --y: 22; }
  .cloud--back2 { --w: 26;  --x: -36; --y: 24; }
  .island       { --w: 118; --x: 6;   --y: 30; }
  .bank--r      { --w: 150; --x: 20;  --y: 90; --z: 4; } /* behind the island: it rises out of the cloud */
  .layer .unit--boat { left: 74%; top: 40%; } /* keep the gunboat on screen at phone widths */
  .bank--l, .flyby--mid, .flyby--near { display: none; } /* phones: one small far plane at most */
  .flyby--far { width: calc(12 * var(--u)); }
  .hero__scroll { display: none; }
}