/* ============================================================================
   Isometricland — home hero: the live park scene, the divider, the headline,
   ("hero.css")

   The scene is NOT an illustration. Every pixel in assets/scene/ was captured
   off the game's own GPU compositor by `Isometricland.exe --web-scene` — a
   static backdrop plus one alpha sprite sheet per machine, each looping on its
   own measured period. js/parkscene.js composites them on the canvas below.
   ============================================================================ */

/* The display face the headline is set in — Rye, the 1880s-90s American wood
   type that gives the page the park's own signage voice — is declared in
   skeuo.css now, because the pay pages set their prices in it too.
   ("Ya Got Trouble in River City.") */

/* The page host is normally the editor's 12-column, 1200px block grid
   (blocks.css .canvas). The park is a full-bleed view into the world and the
   headline is a full-width board, so the home page opts its host out of that
   grid rather than trying to fight it from the inside. */
.canvas--full {
  display:block;
  max-width:none;
  padding:0;
  min-height:0;
}

/* ══ THE SCENE ════════════════════════════════════════════════════════════ */

.hero {
  padding:26px 20px 30px;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(0,0,0,.34) 0%, rgba(0,0,0,0) 62%),
    var(--grass-tile);
  background-color:var(--grass-dk);
  background-size:auto, 64px 32px;
  border-bottom:2px solid var(--wood-line);
}

/* Brass-rimmed bezel: the scene is a window cut into the cabinet, exactly like
   the game's own viewport. Capped at the capture width so the game's pixels are
   never enlarged — upscaling is the one thing this art must never suffer. */
.hero__frame {
  position:relative;
  max-width:1620px; margin:0 auto;
  border-radius:12px; overflow:hidden;
  /* ⚠ NOT THE SKY COLOUR. This was #7FA9C0, and for the few hundred milliseconds
     before the poster lands it was a full-width band of flat blue — which reads as
     a broken image, not as a park about to appear. Nothing can be on screen before
     the first byte arrives, so the only choice is what that moment looks like: an
     unlit cabinet behind glass, the same wood-and-shadow the rest of the page is
     made of, rather than a sky with nothing in it. */
  background:linear-gradient(180deg, #241608 0%, #170E05 100%);
  box-shadow:
    0 0 0 1px var(--wood-line),
    0 0 0 3px var(--brass-mid),
    0 0 0 4px var(--wood-line),
    0 14px 34px rgba(0,0,0,.55);
}

.hero__canvas {
  display:block; width:100%; height:auto;
  aspect-ratio:1620 / 604;                  /* the exported band */
  /* ⚠ NO BACKGROUND COLOUR HERE ANY MORE. It used to be the sky (#7FA9C0), and that
     is precisely what the visitor saw first: an empty blue band for as long as the
     sheets took to arrive. The poster underneath is what shows through instead, so
     there is never a moment where this element has to stand in for the picture. */
}

/* ══ THE POSTER ═══════════════════════════════════════════════════════════
   The finished scene at t = 0, lying OVER the canvas at exactly the same size,
   until the canvas has the real thing to show.

   ⚠ OVER, not under, and that is forced: the compositor takes its context with
   `{alpha:false}`, so the canvas is OPAQUE from the moment it exists — an
   unpainted one underneath would be a black box, which is the blue box wearing a
   different colour. So the poster covers it and is removed when the canvas has
   something to reveal.

   ⛔ AND IT IS REMOVED INSTANTLY, NOT FADED. A fade here would be a cross-fade
   between two pictures of the same park, and this project does not ship
   cross-fades — the moment one of them is moving and the other is not, it is a
   dissolve. It does not need one: the canvas is painted at t = 0, which is the
   composite this poster IS, so switching between them changes nothing on screen. */
.hero__poster {
  position:absolute; inset:0; z-index:1;
  display:block; width:100%; height:100%;
  object-fit:cover;
}
.hero__frame.is-live .hero__poster { display:none; }

/* A soft inner shading so the band sits INSIDE the cabinet rather than floating
   on it. Deliberately faint — it must never fog the art. */
.hero__vignette {
  position:absolute; inset:0; pointer-events:none;
  box-shadow:inset 0 0 26px rgba(0,0,0,.30), inset 0 2px 0 rgba(255,233,168,.16);
  border-radius:12px;
  z-index:2;
}

/* ══ THE SPIEL, LYING ON THE SCENE ════════════════════════════════════════
   The headline sits over the running park, which means it has to be readable
   against grass, gravel, a lake and six painted machines — none of which hold
   still. The scrim is what makes that safe: a bottom-up wash under the words
   only, fully gone by the midline, so it never touches the machines' tops.
   It is a gradient rather than a panel on purpose — a hard band would read as
   a bar laid over the art, which is exactly the "board underneath" this
   replaces. */
.hero__scrim {
  position:absolute; left:0; right:0; bottom:0; height:58%;
  pointer-events:none; z-index:1;
  background:linear-gradient(180deg,
    rgba(14,8,3,0)    0%,
    rgba(14,8,3,.11) 36%,
    rgba(14,8,3,.48) 66%,
    rgba(14,8,3,.79) 100%);
}

/* The headline itself. Only the LETTERS take the pointer, so the ripple fires
   on the words rather than on the whole bottom of the picture — and the empty
   space around them stays as inert as the rest of the scene. */
.tagline__line {
  position:absolute; left:0; right:0; bottom:clamp(14px, 3.4vw, 46px);
  margin:0; padding:0 clamp(16px, 4vw, 64px);
  z-index:2; pointer-events:none;
  text-align:center;
  font-family:"Rye", Georgia, serif;
  font-size:clamp(19px, 3.15vw, 54px);
  line-height:1.2; letter-spacing:.005em;
  text-wrap:balance;
}
.tagline__ink { pointer-events:auto; }

/* Words break, letters do not: wrapping happens between these, so a per-letter
   ripple never costs the line its typesetting. */
.tagline__w { display:inline-block; white-space:nowrap; }

/* Gilded showcard lettering: a warm face, a cut edge, and a deep drop so the
   words sit proud of the picture the way painted signage does.
   The gild is applied PER LETTER rather than to the line, because a letter that
   lifts has to carry its own gold with it — a single line-wide clip would hold
   the gradient still and the letters would slide through it. Inline boxes of
   one font at one size share a content box, so letter-by-letter and line-wide
   gradients are the same gradient; nothing is lost by cutting it up. */
.tagline__c {
  display:inline-block;
  background:linear-gradient(180deg, #FFF3CF 0%, #F5C25A 40%, #D79B2F 72%, #A9761A 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  filter:
    drop-shadow(0 1px 0 #5c3f06)
    drop-shadow(0 2px 0 #2A1806)
    drop-shadow(0 4px 10px rgba(0,0,0,.85));
  will-change:transform;
}
/* A space has no glyph to gild, but it still has to hold the words apart. */
.tagline__w + .tagline__w { margin-left:.26em; }

/* The sentence itself is carried once for screen readers with .sr-only (now a
   utility in skeuo.css); the letters above are decoration and hidden from them. */

/* ══ THE DIVIDER ══════════════════════════════════════════════════════════
   A wooden rail with brass beading and a lit centre boss — the valance motif
   from a midway front, carrying no words. */
.rule {
  position:relative;
  margin:0; border-left:none; border-right:none;   /* it is an <hr>: drop the UA rule */
  height:34px;
  background:
    linear-gradient(180deg, var(--wood-highlight) 0%, var(--wood-light) 22%,
                    var(--wood-mid) 58%, var(--wood-dark) 92%, var(--wood-shadow) 100%);
  border-top:2px solid var(--wood-line);
  border-bottom:2px solid var(--wood-line);
  box-shadow:0 6px 14px rgba(0,0,0,.45);
}
.rule::before {                                   /* brass beading, full width */
  content:""; position:absolute; left:0; right:0; top:50%; height:3px;
  transform:translateY(-50%);
  background:linear-gradient(180deg, var(--brass-highlight) 0%, var(--brass-mid) 55%, var(--brass-dark) 100%);
  box-shadow:0 1px 0 rgba(0,0,0,.5);
}
.rule::after {                                    /* the lit centre boss */
  content:""; position:absolute; left:50%; top:50%;
  width:20px; height:20px; margin:-10px 0 0 -10px;
  transform:rotate(45deg);
  background:linear-gradient(135deg, var(--brass-highlight) 0%, var(--brass-light) 45%, var(--brass-dark) 100%);
  box-shadow:0 0 0 2px var(--wood-line), 0 0 14px rgba(255,208,106,.55);
}

@media (max-width:700px){
  .hero { padding:14px 12px 18px; }
  .tagline__line { bottom:9px; font-size:clamp(13px, 4.3vw, 26px); }
  .hero__scrim { height:74%; }
}

@media (prefers-reduced-motion:reduce){
  /* The ripple is declined in js/parkscene.js as well; this is the belt to
     that braces, so a letter can never be left mid-lift. */
  .tagline__c { transform:none !important; }
}