/* Hairlander intro · styles the engine and the overlay player need.
   The engine's SVG gets its colours from these classes (not from inline fills), so that the hit-stop frame can flip
   the whole palette by toggling one class (.impact) on the <svg class="hl-stage">. Without this file the scene renders black.
   Fonts: the corner readout and the skip button use Manrope (assets/fonts or Google Fonts); they fall back to system sans. */

/* ---------- the engine's stage (created by HairlanderIntro.build) */
.hl-layer{position:absolute;inset:0}
.hl-stage{position:absolute;inset:0;display:block;
  --ink:#17120F;--cape:#F6EEE2;--steel:#F6EEE2;--steeldk:#17120F;--moon:#C43A1E;--floor:#B07338;--shadow:#97602C;--bar:#17120F;--wind:#F6EEE2;--slash:#F6EEE2}
.hl-stage.impact{--ink:#F6EEE2;--cape:#F6EEE2;--steel:#17120F;--steeldk:#F6EEE2;--bar:#C43A1E;--wind:transparent;--shadow:transparent}
.hl-stage.impact .tex{display:none}
.hl-stage .f-ink{fill:var(--ink)}
.hl-stage .f-cape{fill:var(--cape)}
.hl-stage .f-steel{fill:var(--steel)}
.hl-stage .f-steeldk{fill:var(--steeldk)}
.hl-stage .f-moon{fill:var(--moon)}
.hl-stage .f-floor{fill:var(--floor)}
.hl-stage .f-shadow{fill:var(--shadow)}
.hl-stage .f-bar{fill:var(--bar)}
.hl-stage .f-wind{fill:var(--wind)}
.hl-stage .f-slash{fill:var(--slash)}
.hl-stage .f-slash.after{fill:var(--ink)}
.hl-stage .s-creme{stroke:#F6EEE2}
/* the corner readout: HAIRLANDER · MOND xx % · ZUNEHMEND/ABNEHMEND (today's real moon phase) */
.hl-stage .hud-t{font:600 11px/1 Manrope,'Helvetica Neue',Arial,sans-serif;letter-spacing:.22em;fill:#17120F}
.hl-stage .hud-ring{fill:none;stroke:#17120F;stroke-width:1}
.hl-stage .hud-lit{fill:#17120F}
.hl-stage .hud.on-bar .hud-t,.hl-stage.impact .hud-t{fill:#F6EEE2}
.hl-stage .hud.on-bar .hud-ring{stroke:#F6EEE2}
.hl-stage .hud.on-bar .hud-lit{fill:#F6EEE2}

/* ---------- the overlay player (HairlanderPlayer.mount) */
.hl-intro{position:fixed;inset:0;z-index:100;overflow:hidden}
/* until the first frame is drawn: cover the page in the intro's sky colours (the player removes the class) */
.hl-intro.hl-cover{background:linear-gradient(180deg,#F6EEE2 0%,#F4D3A6 45%,#EDBB84 72%,#B07338 72.2%)}
.hl-intro.hl-cover .hl-skip{visibility:hidden}
.hl-intro[hidden]{display:none}
.hl-intro.fade{transition:opacity .5s ease;opacity:0}
.hl-intro .hl-skip{position:absolute;right:max(16px,env(safe-area-inset-right,0px));bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:3;
  font:600 12px/1 Manrope,'Helvetica Neue',Arial,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#F6EEE2;
  background:rgba(23,18,15,.78);border:0;border-radius:999px;padding:11px 16px;cursor:pointer;backdrop-filter:blur(2px)}
.hl-intro .hl-skip:hover{background:#17120F}
.hl-intro .hl-skip:focus-visible{outline:2px solid #C43A1E;outline-offset:3px}
.hl-intro .hl-half{position:absolute;inset:0;will-change:transform}
body.hl-intro-on{overflow:hidden}