/* Goodnight People v2 · start page "Two Nights" (R2).
   Baseline (no JS, reduced motion, no WebGL): a calm, complete split page.
   html.gl: the living split, rendered by WebGL; JS places the text blocks (CSSOM transforms only). */

:root {
  --night: var(--gp-night);
  --creme: var(--gp-creme);
  --om-bone: var(--omm-bone);
  --om-dim: var(--omm-dim);
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--night); color: var(--creme); -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  margin: 0; min-height: 100svh; position: relative;
  font-family: 'Antonio', 'Arial Narrow', sans-serif; font-weight: 500;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  background: var(--night);
}
img, svg, canvas { display: block; }
a { color: inherit; }
p, h1, h2 { margin: 0; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.skip {
  position: fixed; left: 16px; top: -60px; z-index: 50; padding: 10px 14px; background: var(--creme); color: var(--night);
  font: 600 14px/1 'Antonio', sans-serif; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; border-radius: 2px;
}
.skip:focus { top: 16px; }
:focus-visible { outline: 2px solid var(--creme); outline-offset: 5px; border-radius: 2px; }

/* ------------------------------------------------------------------ stage (shared) */
.track { position: relative; }
.stage { position: fixed; inset: 0; overflow: hidden; background: var(--night); z-index: 0; }
.posters { position: absolute; inset: 0; }
.poster { position: absolute; top: 0; height: 100%; object-fit: cover; }
.poster--dt { left: 0; width: 50%; object-position: 53% 46%; }
.poster--omm { left: 50%; width: 50%; object-position: 46.3% 40%; }
.poster-seam {
  position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; transform: translateX(-.5px);
  background: linear-gradient(to bottom, rgba(181,71,58,0) 14%, rgba(181,71,58,.9) 24%, rgba(241,233,219,.55) 55%, rgba(241,233,219,0) 100%);
}
.posters::before, .posters::after { content: ""; position: absolute; pointer-events: none; z-index: 1; }
/* calm dark field for the brand at the top, and night under the text */
.posters::before { left: 30%; right: 30%; top: 0; height: 42%; background: radial-gradient(closest-side, rgba(14,14,16,.9), rgba(14,14,16,0)); }
.posters::after { left: 0; right: 0; bottom: 0; height: 55%; background: linear-gradient(to top, rgba(6,7,8,.88), rgba(6,7,8,0)); }

.webgl { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
.curtain { position: absolute; inset: 0; background: var(--night); opacity: 0; pointer-events: none; }
.cursor-label { display: none; }

/* ------------------------------------------------------------------ brand anchor */
.gp {
  position: fixed; left: 50%; top: clamp(14px, 2.4vh, 30px); z-index: 20; width: clamp(150px, 10.5vw, 190px);
  transform: translateX(-50%); text-align: center; pointer-events: none;
}
.gp__home { display: block; pointer-events: auto; border-radius: 4px; }
.gp__logo { width: 100%; height: auto; overflow: visible; }
.gp__tag {
  margin-top: .2em; font: 500 12px/1.2 'Antonio', sans-serif; letter-spacing: .28em; text-transform: uppercase;
  color: var(--creme); white-space: nowrap; padding-left: .28em;
  text-shadow: 0 0 6px rgba(10,10,12,.95), 0 0 14px rgba(10,10,12,.8), 0 1px 2px #000;
}

.lang { position: fixed; right: var(--gutter); top: clamp(16px, 2.6vh, 32px); z-index: 20; }
.lang a {
  font: 500 12px/1 'Antonio', sans-serif; letter-spacing: .2em; text-transform: uppercase; text-decoration: none;
  color: var(--creme); padding: 8px 2px; display: inline-block;
  text-shadow: 0 0 6px rgba(10,10,12,.95), 0 0 14px rgba(10,10,12,.7);
}
.lang a:hover { color: var(--creme); }

/* ------------------------------------------------------------------ worlds (text) */
.worlds { position: fixed; inset: 0; z-index: 10; pointer-events: none; overflow: hidden; }
.world { position: absolute; bottom: clamp(56px, 9vh, 110px); width: 50%; display: flex; justify-content: center; }
.world--dt { left: 0; }
.world--omm { left: 50%; }
.world__text {
  position: relative; width: min(440px, 84%); display: flex; flex-direction: column; align-items: center; text-align: center;
  pointer-events: auto;
}
.world__title { margin: 0; line-height: 0; }
.world__logo { width: clamp(230px, 21vw, 400px); height: auto; }
.world--omm .world__logo { width: clamp(220px, 19.5vw, 370px); }
.world__tag { margin-top: 18px; text-wrap: balance; }
.world--dt .world__tag { font: 500 clamp(18px, 1.35vw, 24px)/1.32 'Alegreya', Georgia, serif; color: var(--dt-ink); text-shadow: 0 1px 14px rgba(4,8,22,.9); }
.world--dt .world__tag > span { display: inline; }
.world--omm .world__tag { font: italic 400 clamp(21px, 1.6vw, 28px)/1.25 'Cormorant Garamond', Georgia, serif; color: var(--om-bone); margin-top: 16px; text-shadow: 0 1px 12px #000; }
.world__status {
  text-wrap: balance;
  margin-top: 16px; font: 500 11.5px/1.5 'Antonio', sans-serif; letter-spacing: .22em; text-transform: uppercase;
}
.world--dt .world__status { color: rgba(245,237,218,.86); text-shadow: 0 1px 10px rgba(4,8,22,.95); }
.world--omm .world__status { color: var(--om-dim); text-shadow: 0 1px 10px #000; }
.world__cta {
  margin-top: 20px; display: inline-flex; align-items: center; gap: 12px; text-decoration: none; padding: 10px 4px; position: relative;
}
.world--dt .world__cta { font: 700 17px/1 'Alegreya SC', Georgia, serif; letter-spacing: .06em; color: var(--dt-gold); text-shadow: 0 1px 12px rgba(4,8,22,.95); }
.world--omm .world__cta { font: 600 14px/1 'Cormorant Garamond', Georgia, serif; letter-spacing: .24em; text-transform: uppercase; color: var(--om-bone); text-shadow: 0 1px 10px #000; }
.world__arrow { width: 28px; height: 1px; background: currentColor; position: relative; transition: width .5s var(--ease-out); }
.world__arrow::after { content: ""; position: absolute; right: 0; top: -3px; width: 7px; height: 7px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); }
.world__cta::after {
  content: ""; position: absolute; left: 4px; right: 40px; bottom: 4px; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease-out); opacity: .7;
}
.world__cta:hover .world__arrow, .world__cta:focus-visible .world__arrow { width: 40px; }
.world__cta:hover::after, .world__cta:focus-visible::after { transform: scaleX(1); }
/* night behind the words, so they always read (AA) */
.world__text::before {
  content: ""; position: absolute; z-index: -1; left: -30%; right: -30%; top: -22%; bottom: -26%; pointer-events: none;
}
.world--dt .world__text::before { background: radial-gradient(closest-side, rgba(5,9,24,.78), rgba(5,9,24,.5) 55%, rgba(5,9,24,0)); }
.world--omm .world__text::before { background: radial-gradient(closest-side, rgba(3,3,2,.8), rgba(3,3,2,.45) 55%, rgba(3,3,2,0)); }

/* calm emphasis in the static page: the other world steps back (opacity only, no movement) */
.world, .poster { transition: opacity .6s ease, filter .6s ease; }
html.is-dt .poster--omm { filter: brightness(.55) saturate(.6); }
html.is-omm .poster--dt { filter: brightness(.5) saturate(.55); }
html.is-dt .world--omm, html.is-omm .world--dt { opacity: .7; }

.hint { display: none; }

.gp-foot.gp-foot--compact {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 15; pointer-events: none; background: transparent;
}
.gp-foot--compact > * { pointer-events: auto; }
.gp-foot__about { display: none; }

/* ------------------------------------------------------------------ intro hold (set by boot.9fc1c8b8.js before first paint) */
/* desktop only (phones start with the still picture): if WebGL is not ready 1.2 s after the first paint, the curtain
   lifts and the still picture of both nights shows; WebGL then fades in over it (html.gl-takeover) */
html.intro .curtain, html.intro-short .curtain { opacity: 1; animation: fallback-out .5s 1.2s forwards; }
html.intro .gp, html.intro .worlds, html.intro .gp-foot, html.intro .lang,
html.intro-short .gp, html.intro-short .worlds, html.intro-short .gp-foot, html.intro-short .lang { opacity: 0; animation: fallback-in .5s 1.2s forwards; }
@keyframes fallback-out { to { opacity: 0; } }
@keyframes fallback-in { to { opacity: 1; } }

/* ================================================================== living split (html.gl) */
html.gl .curtain, html.gl .gp, html.gl .worlds, html.gl .gp-foot, html.gl .lang { animation: none; }
html.gl .webgl { opacity: 1; }
html.gl .curtain { opacity: 0; transition: opacity .3s; }
html.gl .posters { opacity: 0; }
/* takeover: the still picture stays underneath while the canvas fades in, the text blocks fade into their new places */
html.gl.gl-takeover .posters { opacity: 1; }
html.gl .poster { animation: none !important; clip-path: none; }
html.gl.gl-takeover .webgl { animation: gl-in .8s ease both; }
@keyframes gl-in { from { opacity: 0; } to { opacity: 1; } }
html.gl.gl-instant .worlds *, html.gl.gl-instant .worlds *::before, html.gl.gl-instant .gp, html.gl.gl-instant .gp * { transition: none !important; }
html.gl.gl-instant .world__title, html.gl.no-entrance .world__title { animation: none !important; }
html.gl .stage { cursor: none; }
html.gl.cursor-free .stage { cursor: default; }
html.gl .gp { left: 0; top: 0; transform: none; transform-origin: 0 0; will-change: transform; }
html.gl .world { left: 0; bottom: auto; top: 0; width: auto; will-change: transform; }
html.gl .world__text { width: min(460px, 34vw); }
html.gl .gp-foot, html.gl .lang { transition: opacity .9s ease; }
html.gl:not(.show-ui) .gp-foot, html.gl:not(.show-ui) .lang { opacity: 0; }
html.gl:not(.show-ui) .gp__tag { opacity: 0; }
html.gl.show-ui .gp__tag { transition: opacity 1s ease; }

/* text choreography */
html.gl .world__logo-wrap { display: inline-block; position: relative; }
html.gl .world .world__title, html.gl .world .world__status, html.gl .world .world__cta { opacity: 0; }
html.gl .world.is-in .world__title { opacity: 1; }
html.gl .world--dt.is-in .world__title { animation: dt-logo 1.3s var(--ease-out) backwards; }
html.gl .world--omm.is-in .world__title { animation: omm-flicker 1.25s linear backwards; }
html.gl .world__text::before { opacity: 0; }
html.gl .world.is-in .world__text::before { opacity: 1; transition: opacity 1.4s ease; }
@keyframes dt-logo {
  0% { opacity: 0; translate: 0 18px; scale: .94; filter: brightness(2.2) blur(6px); -webkit-mask-position: 100% 0; mask-position: 100% 0; }
  45% { opacity: 1; filter: brightness(1.5) blur(0); }
  100% { opacity: 1; translate: 0 0; scale: 1; filter: none; -webkit-mask-position: 0 0; mask-position: 0 0; }
}
html.gl .world--dt .world__title {
  -webkit-mask-image: linear-gradient(100deg, #000 40%, rgba(0,0,0,0) 60%); mask-image: linear-gradient(100deg, #000 40%, rgba(0,0,0,0) 60%);
  -webkit-mask-size: 260% 100%; mask-size: 260% 100%; -webkit-mask-position: 0 0; mask-position: 0 0; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
@keyframes omm-flicker {
  0% { opacity: 0; } 8% { opacity: .55; } 11% { opacity: 0; } 22% { opacity: 0; } 25% { opacity: .8; } 28% { opacity: .12; }
  34% { opacity: .9; } 37% { opacity: .3; } 46% { opacity: 1; } 70% { opacity: .92; } 73% { opacity: .7; } 76% { opacity: 1; } 100% { opacity: 1; }
}
html.gl .world .w { display: inline-block; opacity: 0; transform: translateY(.45em); filter: blur(6px); }
html.gl .world--dt .world__tag > span { display: block; }
html.gl .world--dt .w { display: block; }
html.gl .world.is-on .w { opacity: 1; transform: none; filter: none; transition: opacity .9s var(--ease-out), transform 1s var(--ease-out), filter .9s var(--ease-out); transition-delay: calc(var(--i, 0) * 70ms + 120ms); }
html.gl .world--omm.is-on .w { transition-duration: 1.2s, 1.2s, 1.1s; transition-delay: calc(var(--i, 0) * 85ms + 150ms); transform: none; }
html.gl .world--omm .w { transform: none; filter: blur(8px); }
html.gl .world.is-in .world__status { opacity: 1; transition: opacity 1s ease .5s; }
html.gl .world.is-in.is-tight:not(.is-on) .world__status { opacity: 0; transition: opacity .4s ease; }
html.gl .world.is-in.is-tight:not(.is-on) .world__title { transform: translateY(var(--collapse-tight, 0px)) scale(.8); }
html.gl .world.is-in .world__cta { opacity: 1; transition: opacity 1s ease .7s; }
html.gl .world:not(.is-on) .world__tag { visibility: hidden; transition: visibility 0s linear .6s; }
html.gl .world.is-on .world__tag { visibility: visible; }
html.gl .world.is-in:not(.is-on) .w { transition: opacity .45s ease, transform .5s ease, filter .45s ease; }
html.gl .world__title { transition: transform .9s var(--ease-out); transform-origin: 50% 100%; }
html.gl .world.is-in:not(.is-on) .world__title { transform: translateY(var(--collapse, 0px)) scale(.8); }
html.gl .world.is-in:not(.is-on) .world__cta { opacity: .86; }
html.gl .world .world__text { transition: transform .9s var(--ease-out); }

html.gl .cursor-label {
  display: block; position: fixed; left: 0; top: 0; z-index: 12; pointer-events: none; opacity: 0; transition: opacity .35s ease;
  font: 600 11px/1 'Antonio', sans-serif; letter-spacing: .3em; text-transform: uppercase; white-space: nowrap; will-change: transform;
}
html.gl .cursor-label.on { opacity: .9; }
html.gl .cursor-label > span { display: block; }
html.gl .cursor-label.flip > span { transform: translateX(-100%); }
html.gl .cursor-label.dt { color: var(--dt-gold); text-shadow: 0 1px 8px rgba(0,0,0,.9); }
html.gl .cursor-label.omm { color: var(--om-bone); text-shadow: 0 1px 8px #000; }

/* leaving: everything but the chosen world goes quiet */
html.gl.leaving-dt, html.gl.leaving-dt body { background: var(--dt-handoff); }
html.gl.leaving-omm, html.gl.leaving-omm body { background: var(--omm-handoff); }
html.gl.leaving .gp, html.gl.leaving .gp-foot, html.gl.leaving .lang, html.gl.leaving .cursor-label, html.gl.leaving .hint { opacity: 0 !important; transition: opacity .45s ease; }
html.gl.leaving-dt .world--omm, html.gl.leaving-omm .world--dt { opacity: 0; transition: opacity .35s ease; }
html.gl.leaving-dt .world--dt .world__text, html.gl.leaving-omm .world--omm .world__text { opacity: 0; transition: opacity .6s ease .25s; }

/* ================================================================== phones & portrait */
@media (max-aspect-ratio: 4/5), (max-width: 700px) {
  :root { --gutter: 16px; }
  /* baseline: two worlds stacked, brand on the seam */
  .stage { position: relative; inset: auto; height: 124svh; }
  .poster { width: 100%; left: 0; height: 62svh; }
  .poster--dt { top: 0; object-position: 50% 42%; }
  .poster--omm { top: 62svh; object-position: 46.3% 38%; }
  .poster-seam { left: 0; right: 0; top: 62svh; bottom: auto; width: auto; height: 1px; transform: none;
    background: linear-gradient(to right, rgba(241,233,219,0), rgba(241,233,219,.45) 30%, rgba(181,71,58,.9) 50%, rgba(241,233,219,.45) 70%, rgba(241,233,219,0)); }
  .posters::before { left: 20%; right: 20%; top: calc(62svh - 90px); height: 200px; }
  .posters::after { display: none; }
  .gp { position: absolute; top: calc(62svh - 66px); width: 128px; } /* door threshold (63.3 % of the logo height) on the seam */
  .gp__tag { font-size: 10.5px; letter-spacing: .24em; }
  .lang { position: absolute; top: 12px; right: 12px; }
  .worlds { position: absolute; inset: 0 0 auto 0; height: 124svh; }
  .world { width: 100%; left: 0; }
  .world--dt { top: 0; bottom: auto; padding-top: 58px; }
  .world--omm { top: auto; bottom: 0; padding-bottom: 30px; }
  .world__text { width: min(360px, 90%); }
  .world__logo { width: 232px; }
  .world--omm .world__logo { width: 226px; }
  .world--dt .world__tag { font-size: 17px; margin-top: 12px; }
  .world--omm .world__tag { font-size: 21px; margin-top: 10px; }
  .world__status { margin-top: 10px; font-size: 10.5px; letter-spacing: .2em; }
  .world__cta { margin-top: 10px; }
  .world--dt .world__text::before { top: -40%; }
  /* phones: the moon of the upright key art sits behind the compact Dungeon Tower block; keep the words readable */
  html.gl .world--dt .world__text::before {
    left: -22%; right: -22%; top: -30%; bottom: -34%;
    background: radial-gradient(closest-side, rgba(5,9,24,.94), rgba(5,9,24,.86) 60%, rgba(5,9,24,0));
  }
  .gp-foot.gp-foot--compact { position: relative; flex-direction: column; gap: 12px; padding: 34px 16px max(26px, env(safe-area-inset-bottom)); background: var(--night); }
  .gp-foot__about { display: block; max-width: 30ch; margin: 0; text-align: center; color: rgba(241,233,219,.8); }

  /* living split on phones: a sticky stage scrubbed by the page scroll */
  html.gl .track { height: 430svh; }
  html.gl .stage { position: sticky; top: 0; height: 100vh; height: 100dvh; }
  html.gl .worlds { position: fixed; inset: 0; height: auto; }
  html.gl .world { top: 0; left: 0; bottom: auto; padding: 0; width: auto; }
  html.gl .world__text { width: min(360px, 90vw); }
  html.gl .gp { position: fixed; width: 112px; }
  html.gl .lang { position: fixed; }
  html.gl .stage { cursor: default; }
  html.gl .hint {
    display: flex; position: fixed; right: 14px; bottom: max(14px, env(safe-area-inset-bottom)); z-index: 12; flex-direction: column; align-items: center; gap: 8px;
    font: 500 10px/1 'Antonio', sans-serif; letter-spacing: .3em; text-transform: uppercase; color: rgba(241,233,219,.75); transition: opacity .6s ease; pointer-events: none;
  }
  html.gl:not(.show-ui) .hint, html.gl.scrolled .hint { opacity: 0; }
  .hint__line { width: 1px; height: 26px; background: linear-gradient(to bottom, rgba(241,233,219,0), rgba(241,233,219,.8)); animation: hint 2.2s var(--ease-io) infinite; transform-origin: top; }
  @keyframes hint { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
  html.gl .gp-foot { position: relative; z-index: 15; }

  /* ---------------------------------------------------------------- poster first (phones with JS and motion)
     The still picture is laid out exactly like the WebGL rest state (seam at 50 %, compact blocks, brand on the
     seam, same picture crops as the shader's cover()), so when WebGL fades in over it only the picture comes alive. */
  html.poster-first .track { height: 430svh; }
  html.poster-first .stage { position: sticky; top: 0; height: 100vh; height: 100dvh; }
  html.poster-first .poster { object-fit: fill; }
  html.poster-first .poster--dt { filter: brightness(.86) saturate(.92); }   /* the WebGL rest state is a little dimmer */
  html.poster-first .poster--dt { left: -5vw; top: calc(25dvh - 69.3vw); width: 105vw; height: 157.5vw; }
  html.poster-first .poster--omm { top: 50dvh; left: calc(50vw - 42.8dvh); width: 92.44dvh; height: 52dvh; }
  html.poster-first .posters::before { left: calc(50vw - 106px); right: auto; width: 212px; top: calc(50dvh - 103px); height: 196px;
    background: radial-gradient(closest-side, rgba(10,10,12,.86), rgba(10,10,12,0)); }
  html.poster-first .poster-seam { top: 50dvh; }
  html.poster-first .gp { position: fixed; width: 112px; }
  html.poster-first:not(.gl) .gp { top: calc(50dvh - 58px); }
  html.poster-first .lang { position: fixed; }
  html.poster-first .worlds { position: fixed; inset: 0; height: auto; }
  html.poster-first .world { left: 0; right: 0; padding: 0; width: auto; }
  html.poster-first .world__text { width: min(360px, 90vw); }
  html.poster-first:not(.gl) .world--dt { top: 40px; bottom: auto; }       /* the scaled title starts at 54 px, as in WebGL */
  html.poster-first:not(.gl) .world--omm { top: auto; bottom: 34px; }
  html.poster-first .world--dt .world__text::before {
    left: -22%; right: -22%; top: -30%; bottom: -34%;
    background: radial-gradient(closest-side, rgba(5,9,24,.94), rgba(5,9,24,.86) 60%, rgba(5,9,24,0));
  }
  html.poster-first:not(.gl) .world__tag { display: none; }
  html.poster-first:not(.gl) .world__title { transform: scale(.8); transform-origin: 50% 100%; }
  html.poster-first:not(.gl) .world__cta { opacity: .86; }
  html.poster-first .hint {
    display: flex; position: fixed; right: 14px; bottom: max(14px, env(safe-area-inset-bottom)); z-index: 12; flex-direction: column; align-items: center; gap: 8px;
    font: 500 10px/1 'Antonio', sans-serif; letter-spacing: .3em; text-transform: uppercase; color: rgba(241,233,219,.75); transition: opacity .6s ease; pointer-events: none;
  }
  html.poster-first .gp-foot { position: relative; z-index: 15; }

  /* the brand gesture (0.6 s): a line of terracotta light runs out of the door and becomes the seam */
  html.poster-first .poster-seam {
    z-index: 2; height: 2px; margin-top: -1px; transform-origin: 50% 50%;
    background: linear-gradient(to right, rgba(220,205,185,.15), rgba(220,205,185,.75) 18%, rgba(205,110,92,1) 40%, rgba(181,71,58,1) 50%, rgba(205,110,92,1) 60%, rgba(220,205,185,.75) 82%, rgba(220,205,185,.15));
    box-shadow: 0 0 3px rgba(230,140,120,.9), 0 0 14px 2px rgba(181,71,58,.55), 0 6px 22px rgba(181,71,58,.25);
    animation: seam-draw .62s cubic-bezier(.16, 1, .3, 1) .12s both;
  }
  @keyframes seam-draw { from { transform: scaleX(0); opacity: .2; } 30% { opacity: 1; } to { transform: scaleX(1); opacity: 1; } }
  /* …and both nights open out of the line: the tower upward, the hallway downward */
  html.poster-first .poster--dt { animation: open-up .9s cubic-bezier(.65, 0, .35, 1) .28s both; }
  html.poster-first .poster--omm { animation: open-down .9s cubic-bezier(.65, 0, .35, 1) .4s both; }
  /* the tower picture reaches below the seam (behind the hallway); its opening edge is the seam, 88.2vw - 25dvh above its bottom */
  @keyframes open-up { from { clip-path: inset(calc(100% - max(0px, 88.2vw - 25dvh) - 1px) 0 max(0px, 88.2vw - 25dvh) 0); }
                       to { clip-path: inset(0 0 max(0px, 88.2vw - 25dvh) 0); } }
  @keyframes open-down { from { clip-path: inset(0 0 calc(100% - 1px) 0); } to { clip-path: inset(0 0 0 0); } }
}

/* ================================================================== reduced motion: calm and complete */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .world, .poster { transition: opacity .5s ease, filter .5s ease !important; }
  html.intro .curtain, html.intro-short .curtain { opacity: 0; }
  html.intro .gp, html.intro .worlds, html.intro .gp-foot, html.intro .lang { opacity: 1; }
}