/* ==========================================================================
   hero.css — the parallax mountain scene.

   How it is built, back to front:

     1  .hero            the section, painted with the back sky gradient
     2  .hero__sky       a taller gradient plate
     3  .hero__glow      a blurred disc — the bloom behind the type
     4  .hero__wordmark  "Welcome to" + the polyphus_ logotype        (z 1)
     5  .hero__stage     clips the plates
     6    .hero__layer ×4  cut-out mountain plates                    (z 2)
     7  .hero__nav / __tagline / __strip / __lede                     (z 3/4)

   Step 6 sitting above step 4 is the whole trick: the plates are transparent
   PNGs, so the mountain occludes the letterforms and the wordmark reads as
   though it is buried in the landscape. The logotype is live text, so it
   stays editable — it is not baked into an image.

   ONE SCALE, --scene
   ------------------
   The hero is a poster with a fixed composition: the pink band of the sky
   has to land behind the wordmark, the power station has to sit under it,
   the ridge has to fill the bottom of the first screen. That only holds if
   the artwork and the type scale *together*.

   So every offset below is a fraction of --scene rather than a px value or
   an independent vw. The fractions are the design pixels at 1440 ÷ 1440,
   and each one is written next to its rule. Change --scene and the entire
   scene moves as a unit.

   The bug this replaces: the plates were sized from the viewport while the
   type was capped at its 1440 pixel values. Above 1440 the landscape kept
   growing and the type did not, so the pink band slid out from behind the
   wordmark — at 1900px it sat 123px below it. Do not reintroduce a px cap
   on anything positioned in scene coordinates.
   ========================================================================== */

.hero {
  --scene: 100vw;

  position: relative;
  height: calc(var(--scene) * 1.25);          /* 1800 */
  background: var(--sky-back);
  overflow: hidden;
  isolation: isolate;
}

/* -- 2. sky plate and 3. the bloom ----------------------------------------
   Both live directly in the hero at the default stacking level, so the
   logotype (z 1) sits in front of them and the mountains (z 2) in front of
   it. Put these back inside the stage and the sky buries the wordmark.
   ------------------------------------------------------------------------- */

.hero__sky {
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--scene);
  height: calc(var(--scene) * 1.786111);      /* 2572 */
  margin-left: calc(var(--scene) * -0.5);
  background: var(--sky-front);
}

.hero__glow {
  position: absolute;
  top: calc(var(--scene) * 0.179167);         /* 258 */
  left: 50%;
  width: calc(var(--scene) * 0.397222);       /* 572 */
  height: calc(var(--scene) * 0.397222);
  margin-left: calc(var(--scene) * -0.198611);
  border-radius: 999px;
  background: var(--glow);
  filter: blur(60px);
}

/* -- 5. clipping stage ----------------------------------------------------- */

.hero__stage {
  position: absolute;
  top: calc(var(--scene) * 0.034722);         /* 50 */
  left: 0;
  right: 0;
  height: calc(var(--scene) * 1.25);
  overflow: hidden;
  z-index: 2;
  pointer-events: none;
}

/* -- 6. mountain plates ---------------------------------------------------- */

.hero__layer {
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--scene);
  height: calc(var(--scene) * 1.786111);      /* 2572 */
  margin-left: calc(var(--scene) * -0.5);
  will-change: transform;
}

.hero__layer img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The nearest plate starts higher so its ridge already fills the bottom of
   the first screen. */
.hero__layer--near { top: calc(var(--scene) * -0.107639); }   /* -155 */

/* -- 1. nav ---------------------------------------------------------------
   Chrome, not scene — it keeps its own size at every width.
   ------------------------------------------------------------------------- */

.hero__nav {
  position: absolute;
  top: min(2.083vw, 30px);
  left: 0;
  right: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: var(--gutter);
}

/* The mark itself is sized by .logo-mark in components.css. */

.hero__links {
  display: flex;
  align-items: center;
  gap: 35px;
}

.hero__links a {
  font-size: var(--fs-nav);
  font-weight: 500;
  letter-spacing: var(--ls-tight);
  color: #fff;
  transition: opacity var(--dur-fast) var(--ease-out);
}

.hero__links a:hover { opacity: 0.7; }

/* The one nav item that starts something. */
.hero__start {
  padding: 9px 18px;
  border-radius: var(--r-pill);
  background: var(--orange);
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: background-color var(--dur-fast) var(--ease-out);
}

.hero__start:hover { opacity: 1; background: #ff5630; }

/* -- 4. wordmark ----------------------------------------------------------- */

.hero__wordmark {
  position: absolute;
  top: calc(var(--scene) * 0.163194);         /* 235 */
  left: 50%;
  width: calc(var(--scene) * 0.889583);       /* 1281 */
  margin-left: calc(var(--scene) * -0.444792);
  z-index: 1;
}

.hero__welcome {
  position: absolute;
  top: calc(var(--scene) * 0.011806);         /* 17 */
  left: 0;
  font-size: max(18px, calc(var(--scene) * 0.022222));   /* 32 */
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--off-white);
}

/* polyphus_ — lowercase in the wordmark, always. Sized so the word fills the
   measure the scene was composed around. */
.hero__logotype {
  margin: 0;
  font-family: var(--font-display);
  font-size: calc(var(--scene) * 0.159028);   /* 229 */
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.055em;
  color: #fff;
  text-transform: lowercase;
}

/* -- 7. foreground copy ---------------------------------------------------- */

.hero__tagline {
  position: absolute;
  top: calc(var(--scene) * 0.339583);         /* 489 */
  left: 50%;
  width: calc(var(--scene) * 0.889583);
  margin-left: calc(var(--scene) * -0.444792);
  z-index: 3;
  text-align: right;
  font-size: max(18px, calc(var(--scene) * 0.022222));   /* 32 */
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--off-white);
}

.hero__strip {
  position: absolute;
  top: calc(var(--scene) * 0.520833);         /* 750 */
  left: 50%;
  width: calc(var(--scene) * 0.704861);       /* 1015 */
  margin-left: calc(var(--scene) * -0.352431);
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* The strip is the crew, set as type rather than logos. Uppercase mono at
   wide tracking — the chrome register. Roles that are not built yet say so
   here rather than being quietly listed alongside the ones that are. */
.hero__mark {
  font-family: var(--mono);
  font-size: max(11px, calc(var(--scene) * 0.009028));   /* 13 */
  font-weight: 500;
  letter-spacing: var(--ls-kicker);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
  white-space: nowrap;
}

.hero__mark--soon { color: rgba(255, 255, 255, 0.5); }

.hero__mark--soon::after {
  content: " · soon";
  letter-spacing: 0.06em;
  text-transform: lowercase;
}

/* The line that fades in once the mist has taken over the screen. */
.hero__lede {
  position: absolute;
  top: calc(var(--scene) * 0.831944);         /* 1198 */
  left: 0;
  right: 0;
  z-index: 3;
  padding-inline: var(--gutter);
  font-size: max(20px, calc(var(--scene) * 0.024306));   /* 35 */
  line-height: 1;
  color: #fff;
}

.hero__lede p { font-weight: 700; }
.hero__lede p + p { font-weight: 400; }


/* --------------------------------------------------------------------------
   Phone — the poster stops working once the logotype would be smaller than
   the body copy, so below 810px the scene is rebuilt as a taller stack with
   the type above the fold. --scene is pinned wider than the viewport so the
   artwork stays legible instead of shrinking to a smudge.
   -------------------------------------------------------------------------- */

@media (max-width: 809px) {
  .hero        { --scene: max(900px, 175vw); height: 200vw; min-height: 620px; }
  .hero__stage { height: 200vw; min-height: 620px; top: 24px; }

  .hero__glow {
    top: 22vw;
    width: 70vw; height: 70vw;
    margin-left: -35vw;
    filter: blur(46px);
  }

  .hero__wordmark { top: 26vw; width: calc(100% - 2 * var(--gutter)); left: var(--gutter); margin-left: 0; }
  .hero__logotype { font-size: 15.9vw; }
  .hero__welcome  { top: -26px; font-size: 20px; }

  .hero__tagline {
    top: 62vw;
    left: var(--gutter);
    width: calc(100% - 2 * var(--gutter));
    margin-left: 0;
    text-align: left;
    font-size: 20px;
  }

  .hero__strip {
    top: 108vw;
    left: var(--gutter);
    width: calc(100% - 2 * var(--gutter));
    margin-left: 0;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 22px 26px;
  }

  .hero__mark { font-size: 11px; letter-spacing: 0.14em; }

  /* On a phone the page is one scroll, so the section links earn nothing.
     Keep the mark and the one action. */
  .hero__links a:not(.hero__start) { display: none; }
  .hero__links { gap: 0; }
  .hero__start { font-size: 13px; padding: 9px 16px; }

  .hero__lede { top: 150vw; font-size: 22px; }
}