/* MineChef — hero: top bar, full-bleed layered scene, logotype lockup, primary CTA. Owned by the "hero" piece.
   Composition — one key-art poster, read top to bottom:
     the sky holds nothing but the logotype lockup (big, in its dusk glow), the sun and the far ridge sit
     behind it · the grassy mound rises to meet the lockup, so the mine sign, the waving lookout, the chef's
     toque and pickaxe come up right under the ribbon and anchor it · the mine mouth pours warm light down the
     middle · the pitch (one line + the form) waits on the lit ground at the mine's door, at the foot of the
     picture · the fold ends in a band of cut earth that the underground continues from.
   Layer sizes are % of the hero height so the picture scales with it; two companion SVGs (haze, light) share
   the box + viewBox of the layer they dress so they stay registered at every size. */

/* the depth of the cut-earth band at the foot of the fold, in px so the underground can be pulled up under it by
   exactly the same amount (underground.css) — the band IS the top of the strata, roots and all */
:root { --fold-overlap: clamp(112px, 12svh, 140px); }

.hero {
  position: relative;
  z-index: 1; /* paints over the underground, which is pulled up under the fold's foot */
  min-height: 100vh;
  /* the fold, but never so short that the pitch lands on the mine mouth: below this the hero grows past the
     viewport and the pitch simply sits under the fold (860px on desktop) */
  min-height: max(100svh, 860px);
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: minmax(0, 1fr); /* the column never grows past the viewport for a wide child (topbar, form row) */
  overflow: hidden;
  /* dusk fallback under the sky art; the foot of the fold is left clear so the underground's topsoil shows
     through it (the picture is clipped to the same line, see .scene) */
  background: linear-gradient(to top, transparent 0 var(--ground-lift), var(--sky-horizon) var(--ground-lift), var(--sky-mid) 60%, var(--sky-top));
  isolation: isolate;
  /* where the mine art's bottom edge lands, up from the fold edge: the sign top then sits right under the
     ribbon, the pitch sits on the lit dirt at the foot of the mine and the strata below carry the cue */
  --ground-lift: var(--fold-overlap);
}

/* ---- layered scene ---- */
.scene {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* the picture ends where the mine art's dirt strip ends: the sky and hills sink behind the mine on scroll
     (motion.css) and the foreground frames are cut there, like a diorama, and the strata take over below */
  clip-path: inset(0 0 var(--ground-lift) 0);
}
.scene__layer {
  position: absolute;
  left: 0;
  right: 0;
  top: auto;
  bottom: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: cover;
  object-position: 50% 100%;
  will-change: transform;
}
/* sky is lifted so the setting sun sits up beside the lockup and clears the raised ridge on the right */
.scene__layer--sky { z-index: 1; height: 116%; bottom: 22%; }
/* far ridge is enlarged and lifted so its peaks and the headframe show either side of the lockup */
.scene__layer--far { z-index: 2; height: 146%; bottom: 8%; }
/* near hills, cabin and tree clusters are lifted so their crests peek out above the mound at both sides;
   the haze companion shares this box */
.scene__layer--near,
.scene__layer--haze { z-index: 3; height: 134%; bottom: 20%; }
/* the mine: enlarged (1.4× the fold height) and lifted so the mound crest, sign, lookout, chef and pickaxe rise to
   the ribbon and the mouth is the centrepiece of the middle; the light companion shares this box so the bloom
   stays on the entrance */
.scene__layer--ground,
.scene__layer--light { z-index: 4; height: 140%; bottom: var(--ground-lift); }
/* companions ride the same parallax as their partner (motion.css reads --depth / --sink) */
.scene__layer--haze  { --depth: .7; --sink: .16; }
.scene__layer--light { --depth: 1;  --sink: 0; }

/* foreground framing (assets/scene/frame-*.svg): trees, rock outcrops, ore, props at both bottom corners — big, so
   the picture has a real foreground in front of the mound */
.scene__layer--frame {
  z-index: 5;
  --depth: 1.25;
  width: clamp(240px, 39vw, 620px);
  height: auto;
  bottom: 0; /* the earth band at the foot covers their base: the fold cuts the foreground like a diorama */
  right: auto;
}
.scene__layer--frame-left { left: -2%; }
.scene__layer--frame-right { left: auto; right: -2%; }

/* overhanging boughs in the top corners (assets/scene/bough-*.svg) */
.scene__bough {
  position: absolute;
  z-index: 5;
  top: 34px;
  width: clamp(200px, 26vw, 420px);
  height: auto;
  opacity: 0.96;
}
.scene__bough--left { left: -3%; }
.scene__bough--right { right: -3%; }

/* birds over the far ridge, near the sun */
.scene__birds {
  position: absolute;
  z-index: 3;
  left: 72%;
  top: 36%;
  width: clamp(80px, 9vw, 140px);
  height: auto;
}

.scene__motes { position: absolute; inset: 0; z-index: 6; width: 100%; height: 100%; }

/* light and shade over the whole picture: a scrim under the top bar, a soft shade over the ground behind the
   pitch so the line reads on the dirt, and a vignette that darkens the edges and corners so the lit mine mouth
   and the chef are where the eye lands (foreground in shadow, key light in the centre) */
.hero::after {
  content: "";
  position: absolute;
  inset: 0 0 var(--ground-lift); /* over the picture only; the strata at the foot are lit their own way */
  z-index: 1;
  pointer-events: none;
  background:
    /* a soft shade over the dirt where the tagline lands (the pitch carries its own scrim, below) */
    radial-gradient(44% 150px at 50% calc(100% - 44px), rgba(12, 8, 16, 0.3), transparent 72%),
    /* vignette and top scrim in the sky's own near-black indigo (--sky-top), so the topbar sits on true dark and
       the edges fall to black instead of grey-plum */
    radial-gradient(76% 80% at 50% 56%, transparent 50%, rgba(10, 8, 26, 0.36) 82%, rgba(10, 8, 26, 0.64) 100%),
    linear-gradient(to bottom, rgba(10, 8, 26, 0.5), rgba(10, 8, 26, 0.16) 90px, transparent 22%);
}

/* the companions fade in with the scene (they carry no translate, so they never fight the parallax) */
@media (prefers-reduced-motion: no-preference) {
  /* the haze and the light companion ride the one scene fade in motion.css — no separate staged fades,
     they made the picture assemble itself in steps */
  @keyframes hero-fade-in { from { opacity: 0; } to { opacity: 1; } }
  .logo__burst { animation: hero-fade-in 900ms ease 120ms backwards; }
}

/* ---- top bar ---- */
/* the bar carries the nav and nothing else — the logotype in the picture is the brand mark */
.topbar {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px 28px;
  padding: 16px var(--gutter);
  color: var(--ink-hero);
}
.topbar__nav {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  align-items: center;
  gap: 4px;
}
.topbar__nav a {
  display: inline-block;
  padding: 8px 14px;
  border-radius: var(--r-pill);
  text-decoration: none;
  /* face, size, tracking and caps: the label style in type.css */
  text-shadow: 0 2px 0 rgba(58, 34, 56, 0.9);
  transition: background-color 160ms ease;
}
.topbar__nav a:hover { background: rgba(255, 249, 238, 0.14); }

/* ---- hero content: the lockup at the top of the picture, the pitch at its foot, the mine between them ---- */
.hero__content {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  text-align: center;
  padding: clamp(0px, 1vh, 12px) var(--gutter) 0;
  color: var(--ink-hero);
}
.hero__pitch {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin-top: 24px; /* never closer than this to the lockup on a short window */
  padding: 18px 0 10px;
  /* a soft dark scrim behind the whole pitch (line, form, hint): the block sits on the busy dirt / topsoil art at
     the foot of the picture, and this keeps the copy on near-black instead of on roots and pebbles */
  background: radial-gradient(58% 120% at 50% 55%, rgba(12, 8, 16, 0.5), rgba(12, 8, 16, 0.24) 55%, rgba(12, 8, 16, 0) 100%);
}
.hero__pitch .notify { margin-top: 14px; } /* the line and the form read as one block (look: form.css) */
.hero__pitch .notify__hint { opacity: 0.94; } /* the hint sits on the strata texture here: a touch brighter than form.css */

/* logotype lockup: wordmark with the eyebrow ribbon slung underneath, set in a dusk glow.
   The wordmark's own logotype treatment (face, outline, extrusion, gems, toque) and the ribbon's
   look live in type.css; this only stacks them and puts the light behind them. */
.logo {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.logo__burst {
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 50%;
  width: 190%;
  max-width: none;
  height: auto;
  translate: -50% -52%;
  pointer-events: none;
  /* the rays fade out above the mark so the top bar stays quiet */
  -webkit-mask-image: linear-gradient(to bottom, transparent 18%, #000 44%);
  mask-image: linear-gradient(to bottom, transparent 18%, #000 44%);
}
.wordmark { position: relative; z-index: 1; margin-top: 0; }
.hero__eyebrow {
  position: relative;
  z-index: 2;
  margin-top: -0.35em; /* tucks the ribbon up onto the mark's extrusion so the two read as one lockup */
}

/* one line, set on the lit ground right above the form (wraps to two on narrow windows) */
.tagline {
  margin-top: 0;
  max-width: 76ch;
  text-wrap: balance;
}

/* ---- scroll cue: one quiet chevron in a ring, sitting on the ground under the mine mouth ---- */
.hero__cue {
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: center;
  padding: 0 var(--gutter) 14px;
  color: var(--ink-hero);
}
.cue {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid rgba(255, 249, 238, 0.55);
  background: rgba(46, 26, 52, 0.34);
  box-shadow: 0 6px 16px rgba(29, 18, 25, 0.28), inset 0 0 0 1px rgba(255, 249, 238, 0.08);
  text-decoration: none;
  translate: 0 0;
}
.cue__arrow {
  width: 22px; height: 22px;
  filter: drop-shadow(0 1px 1px var(--ink-hero-shadow));
}

/* ---- responsive behaviour of the hero's own parts (mobile.css handles the rest) ---- */
@media (max-width: 1080px) {
  .topbar__nav a { padding: 8px 10px; }
}
@media (max-width: 820px) {
  .topbar__nav { display: none; }
  .scene__bough { top: 8px; width: clamp(150px, 30vw, 260px); opacity: 0.9; }
  .scene__layer--frame { width: clamp(200px, 40vw, 360px); }
}
@media (max-width: 640px) {
  /* Phones: the same poster, taller than wide. The lockup fills the width at the top; the mine is sized by width
     (not by hero height) and pinned right under the ribbon — the sign top lands at --mine-top — with the tunnel a
     little right of centre so the chef stands fully in frame on the left and the cart is caught at the right
     edge; the hill layers are sized the same way and stacked above the mound; the sky covers the rest. The pitch
     sits on the dirt at the foot of the mine, on the cut-earth band, and the hero ends under it, shorter than the
     viewport, so the fold cuts through the earth and the descent is already visible. */
  :root { --fold-overlap: 0px; } /* phones: the foot is flat cut earth and the strata start under the fold */
  .hero {
    --ground-lift: 0px;
    background: linear-gradient(var(--sky-top), var(--sky-mid) 40%, var(--sky-horizon) 60%, var(--earth-0) 60%);
    /* sign top = top bar (≈54px) + content pad (2vh) + the mark's box (1.52em of 15.4vw) + ribbon (≈24px) + 14px */
    --mine-top: calc(100px + 23.4vw + 2vh);
    --gs: min(0.2692vw, 1.05px);              /* px per viewBox unit for the mine (visible width ≈ 371 units) */
    --hs: min(0.2308vw, 0.9px);               /* px per viewBox unit for the hill layers */
    /* the ground plane is 242 units under the sign top; the pitch (line + form + hint ≈ 150px) starts 16px below
       it and the cue row (52px) closes the fold — the content itself grows the hero if it needs more */
    min-height: calc(var(--mine-top) + 242 * var(--gs) + 220px);
  }
  .topbar { padding: 12px var(--gutter); }
  .scene__bough { display: none; }
  .scene__layer--sky { height: 106%; bottom: 6%; }
  .scene__layer--far,
  .scene__layer--near,
  .scene__layer--haze,
  .scene__layer--ground,
  .scene__layer--light {
    height: auto;
    right: auto;
    bottom: auto;
  }
  .scene__layer--far,
  .scene__layer--near,
  .scene__layer--haze {
    width: calc(1600 * var(--hs));
    left: calc(50vw - 800 * var(--hs));
  }
  .scene__layer--far  { top: calc(var(--mine-top) - 68px - 640 * var(--hs)); }   /* far ridge line beside the ribbon */
  .scene__layer--near,
  .scene__layer--haze { top: calc(var(--mine-top) - 16px - 730 * var(--hs)); }   /* near crest right above the mound */
  .scene__layer--ground,
  .scene__layer--light {
    /* only the bottom 400 units of the drawing are boxed (mound, mouth, crew, dirt strip — the top is empty sky):
       object-fit: cover / xMidYMax slice keeps the scale at --gs and bottom-aligns, and the small painted box
       keeps the 8 KB sky, not the 43 KB mine, as the largest contentful paint */
    width: calc(1600 * var(--gs));
    height: calc(400 * var(--gs));
    left: calc(61.5vw - 800 * var(--gs));
    top: calc(var(--mine-top) - 70 * var(--gs));
  }
  .scene__layer--frame { display: none; }
  .scene__birds { display: none; }
  /* the cut-earth band starts where the mine art's dirt strip ends (330 units under the sign top; the 1.06 parallax
     scale in motion.css pushes the art's real edge 12 units further, under the band); a soft shade sits behind the
     pitch so the line reads on the dirt */
  .hero::after {
    background:
      linear-gradient(to bottom, transparent 0 calc(var(--mine-top) + 330 * var(--gs)), var(--earth-0) calc(var(--mine-top) + 330 * var(--gs))),
      radial-gradient(70% 90px at 50% calc(var(--mine-top) + 300 * var(--gs)), rgba(12, 8, 16, 0.3), transparent 72%),
      radial-gradient(90% 60% at 50% 50%, transparent 55%, rgba(10, 8, 26, 0.3) 100%),
      linear-gradient(to bottom, rgba(10, 8, 26, 0.5), rgba(10, 8, 26, 0.16) 70px, transparent 20%);
  }
  .logo__burst { width: 150%; }
  .hero__eyebrow { margin-top: -0.2em; }
  /* the pitch starts under the ground plane (242 units below the sign top, which is 14px under the lockup) even
     when its line or hint wrap to more lines on a narrow phone: the hero simply grows under it */
  .hero__pitch { margin-top: calc(242 * var(--gs) + 14px); padding: 16px 0 8px; }
  .tagline { max-width: 32ch; }
  .hero__pitch .notify { margin-top: 12px; }
  .hero__cue { padding-bottom: 12px; }
  .cue { width: 40px; height: 40px; }
}