/* intro.css — the stage of the EndlessCreation intro (intro.js): a full-screen night-navy stage with soft scanlines, the controls in
   the thumb zone at the bottom (sound choice left, skip right), the calm version for reduced motion, and the fade to the page.
   The stage stays dark in light and dark mode (it is a picture); the page behind it follows the colour scheme.
   Order 01a19d31-8a24-71a4-8236-5f8486a8bad6, decision 1018c-Q918.
   version: 0.1.0 · created 2026-11-02 by Pascal Ehlig, ITS · edited 2026-11-02 by Pascal Ehlig, ITS */
@font-face{font-family:"Open Sauce One";src:url("../../fonts/open-sauce-one-regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}

.ec-intro{
  --ec-navy:#102a43; --ec-deep:#0b1726; --ec-coral:#fb683e; --ec-blue:#9ccbea; --ec-warm:#fff7ee;
  position:fixed; inset:0; z-index:2147483000; overflow:hidden; outline:none;
  background:radial-gradient(120% 85% at 50% 42%, #173a5e 0%, var(--ec-navy) 42%, var(--ec-deep) 100%);
  color:var(--ec-warm); font:400 1rem/1.4 "Open Sauce One", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  touch-action:manipulation; -webkit-tap-highlight-color:transparent; user-select:none; -webkit-user-select:none;
  cursor:pointer; opacity:1; transition:opacity .45s ease-in;
}
/* soft scanlines and a vignette over the picture, composited by the browser, not drawn per frame */
.ec-intro::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    repeating-linear-gradient(to bottom, rgba(0,0,0,.16) 0 1px, transparent 1px 3px),
    radial-gradient(130% 100% at 50% 45%, transparent 55%, rgba(3,8,16,.55) 100%);
}
.ec-intro-stage{position:absolute; inset:0; width:100%; height:100%; display:block}
.ec-intro--out{opacity:0; pointer-events:none}
.ec-intro--skip{transition-duration:.25s}

.ec-intro-sr{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}

/* controls: bottom bar, thumb zone, never over the drop */
.ec-intro-bar{
  position:absolute; left:0; right:0; bottom:0; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px max(16px, env(safe-area-inset-right)) max(14px, calc(10px + env(safe-area-inset-bottom))) max(16px, env(safe-area-inset-left));
  cursor:default;
}
.ec-intro-sound{display:flex; gap:0; border-radius:999px; background:rgba(11,23,38,.55); box-shadow:inset 0 0 0 1px rgba(156,203,234,.28)}
.ec-intro-btn{
  appearance:none; -webkit-appearance:none; border:0; margin:0; cursor:pointer; font:inherit; font-size:.95rem; letter-spacing:.01em;
  min-height:44px; min-width:44px; padding:0 18px; border-radius:999px; color:rgba(234,244,248,.78); background:transparent;
  display:inline-flex; align-items:center; gap:8px; white-space:nowrap; transition:background .18s ease, color .18s ease;
}
.ec-intro-btn:hover{color:var(--ec-warm); background:rgba(156,203,234,.12)}
.ec-intro-btn:focus-visible{outline:2px solid #ff9a7f; outline-offset:2px}
.ec-intro-on{padding-inline:20px 18px}
.ec-intro-btn[aria-pressed="true"]{color:var(--ec-deep); background:var(--ec-blue)}
.ec-intro-on[aria-pressed="true"]{background:var(--ec-coral); color:var(--ec-deep)}
.ec-intro-skip{background:rgba(11,23,38,.55); box-shadow:inset 0 0 0 1px rgba(156,203,234,.28)}
.ec-intro-skip kbd{font:inherit; font-size:.72rem; line-height:1; padding:3px 6px; border-radius:6px; color:rgba(234,244,248,.6); box-shadow:inset 0 0 0 1px rgba(156,203,234,.3)}
@media (hover:none){.ec-intro-skip kbd{display:none}}
@media (max-width:420px){.ec-intro-btn{padding:0 14px; font-size:.9rem}.ec-intro-on{padding-inline:16px 14px}}
@media (max-width:350px){.ec-intro-btn{padding:0 10px; font-size:.84rem}}

/* reduced motion: the calm version — the drop and one line fade in, nothing moves */
.ec-intro--calm{cursor:pointer}
.ec-intro--calm .ec-intro-stage{display:none}
.ec-intro-calm{position:absolute; inset:0 0 72px 0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px; padding:16px; text-align:center}
.ec-intro-mark{display:block; height:auto; max-width:70vw}
.ec-intro-greet{margin:0; font-size:clamp(1.15rem, 4.6vw, 1.7rem); color:var(--ec-warm); max-width:22ch}
.ec-intro-calm>*{opacity:0; transition:opacity .9s ease}
.ec-intro--in .ec-intro-calm>*{opacity:1}
.ec-intro--in .ec-intro-greet{transition-delay:.5s}