/* ==========================================================================
   EITRI — hero atmosphere

   The same sentence the mark makes and the tier panels make: a cold place
   with exactly one warm thing in it. Here it is the horizon a long way off,
   and a single ember on it.

   Drawn, not filmed. A video hero is the first thing a phone downloads and
   the last thing it finishes; this is a few kilobytes of gradients and
   cannot fail to load, stall on a slow connection, or be blocked by iOS
   Low Power Mode the way an autoplaying <video> is.

   RULES THIS FILE OBEYS
   - The centre stays dark and empty. Headline type sits there and has to
     hold 17:1 against it, so every layer is either low in the frame or
     very low in opacity.
   - One warm element. The ember, once. Everything else is silver or near
     black, exactly as the accent rule requires.
   - Nothing moves fast. This is weather, not animation — if it draws the
     eye away from the headline it has failed.
   ========================================================================== */

.hero{position:relative;isolation:isolate}

/* Full-bleed. The hero sits inside a max-width column, so an absolutely
   positioned child would end on a visible vertical edge partway across the
   screen — which reads as a stray box, not as weather. */
.hero-scene{
  position:absolute;
  left:50%;width:100vw;margin-left:-50vw;
  top:-90px;bottom:-110px;
  z-index:-1;
  overflow:hidden;
  pointer-events:none;
  /* Fades out downward rather than ending on a line. */
  -webkit-mask-image:linear-gradient(#000 68%,transparent 100%);
  mask-image:linear-gradient(#000 68%,transparent 100%);
}

/* -- depth ---------------------------------------------------------------- */
/* Cool light gathering at the horizon, so the ridges have something to be
   silhouetted against. Kept to the lower half — the top is where the type is. */
.hero-glow{
  position:absolute;left:-10%;right:-10%;bottom:0;height:64%;
  background:
    radial-gradient(70% 100% at 38% 100%, rgba(122,133,150,.30) 0%, transparent 70%),
    radial-gradient(90% 100% at 78% 100%, rgba(80,90,104,.20) 0%, transparent 72%);
}

/* -- aurora --------------------------------------------------------------- */
/* Silver, not green. A slow band of light, barely there, drifting across the
   sky at a speed that reads as still unless you watch for it. */
.hero-aurora{
  position:absolute;left:-25%;right:-25%;bottom:26%;height:22%;
  background:linear-gradient(102deg,
    transparent 0%,
    rgba(200,204,210,.05) 32%,
    rgba(200,204,210,.11) 48%,
    rgba(200,204,210,.04) 64%,
    transparent 100%);
  filter:blur(18px);
  animation:hero-aurora 34s ease-in-out infinite;
}
@keyframes hero-aurora{
  0%,100%{transform:translateX(-6%) skewY(-1.2deg)}
  50%{transform:translateX(6%) skewY(1.2deg)}
}

/* -- ridges --------------------------------------------------------------- */
/* Two planes, far one lighter. Both sit low so the headline never crosses
   them, and both are close to the ground colour — this is a horizon, not a
   feature. */
.hero-ridge{position:absolute;left:0;right:0;bottom:0}
.hero-ridge-far{
  height:34%;
  background:#1B2029;
  clip-path:polygon(0 68%,9% 46%,18% 60%,29% 32%,40% 54%,51% 36%,63% 58%,74% 40%,86% 56%,100% 44%,100% 100%,0 100%);
}
.hero-ridge-near{
  height:25%;
  background:#0C0E13;
  clip-path:polygon(0 82%,8% 60%,16% 74%,27% 48%,37% 68%,49% 50%,60% 70%,72% 52%,84% 70%,100% 56%,100% 100%,0 100%);
  /* The rim: the one detail that says "graded" rather than "dark". */
  filter:drop-shadow(0 -1px 0 rgba(200,204,210,.26));
}

/* -- mist ----------------------------------------------------------------- */
.hero-mist{
  position:absolute;left:-15%;right:-15%;bottom:14%;height:14%;
  background:linear-gradient(90deg,transparent,rgba(200,204,210,.10),transparent);
  filter:blur(14px);
  animation:hero-mist 46s linear infinite;
}
@keyframes hero-mist{
  0%{transform:translateX(-8%)}
  50%{transform:translateX(8%)}
  100%{transform:translateX(-8%)}
}

/* -- the ember ------------------------------------------------------------ */
/* The only warm thing on the page above the fold, and the reason the rest of
   it is cold. Small, off to one side, well clear of the headline. */
/* Right of centre: the copy column runs down the left, and an ember sitting
   behind a line of text reads as a rendering fault rather than a light on a
   hill. */
.hero-ember{
  position:absolute;left:72%;bottom:24%;
  width:4px;height:4px;border-radius:50%;
  background:var(--orange);
  box-shadow:0 0 10px 3px rgba(255,106,31,.34);
  animation:hero-ember 7s ease-in-out infinite;
}
@keyframes hero-ember{
  0%,100%{opacity:.6;transform:scale(1)}
  50%{opacity:1;transform:scale(1.14)}
}

/* Phones: pull the horizon down and lighten the load. There is less room
   above the fold, and the copy needs all of it. */
@media (max-width:759px){
  .hero-scene{top:-60px}
  .hero-aurora{display:none}
  .hero-ember{left:68%;bottom:20%}
}

/* Weather is still weather when it holds still. Freeze rather than remove —
   the horizon is composition, not decoration. */
@media (prefers-reduced-motion:reduce){
  .hero-aurora,.hero-mist,.hero-ember{animation:none}
}