/* intro.css — the stage of the EndlessCreation intro (intro.js): a full-screen near-black stage with a drawing board (blueprint grid
   paper) that clears at the end so the drop can settle on the page's dial; the controls in the thumb zone at the bottom (sound choice
   left, skip right), and the fade to the page. The stage stays dark in light and dark mode (it is a picture).
   Order 01a19d31-8a24-71a4-8236-5f8486a8bad6, decisions 1018c-Q918, 1018c-Q920, 1018c-Q921 a.
   0.2.0 (owner 2026-11-02, 1018c-Q920): THX-style reveal — near-black stage, drawing-board grid, no scanlines; the stage's dark is its
   own layer that intro.js clears while the drop lands on the knob.
   version: 0.2.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:transparent;
  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;
}
/* the dark stage: its own layer, cleared by intro.js at the end (opacity only) */
.ec-intro-bg{position:absolute; inset:0; background:#03070d; pointer-events:none}
.ec-intro-bg::after{content:""; position:absolute; inset:0; background:radial-gradient(130% 100% at 50% 45%, transparent 50%, rgba(1,3,7,.6) 100%)}
/* the drawing board: blueprint tint with a fine and a coarse grid, fading to the edges; intro.js sets opacity and a slow scale */
.ec-intro-grid{position:absolute; inset:-4%; opacity:0; will-change:transform, opacity;
  background-image:
    linear-gradient(rgba(143,176,200,.20) 1px, transparent 1px), linear-gradient(90deg, rgba(143,176,200,.20) 1px, transparent 1px),
    linear-gradient(rgba(143,176,200,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(143,176,200,.08) 1px, transparent 1px),
    radial-gradient(110% 80% at 50% 45%, rgba(18,52,88,.9), rgba(6,18,34,0) 75%);
  background-size:120px 120px, 120px 120px, 24px 24px, 24px 24px, 100% 100%; background-position:center;
  -webkit-mask-image:radial-gradient(120% 95% at 50% 45%, #000 40%, transparent 100%); mask-image:radial-gradient(120% 95% at 50% 45%, #000 40%, transparent 100%)}
.ec-intro-stage{position:absolute; inset:0; width:100%; height:100%; display:block}
.ec-intro--out{opacity:0; pointer-events:none}
.ec-intro--end{transition:opacity .6s ease-in-out}
.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; transition:opacity .4s ease;
}
.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}}
/* the stage's title: one weight, wide tracking, few words */
.ec-intro-title{position:absolute; left:16px; right:16px; margin:0; text-align:center; pointer-events:none; opacity:0;
  font-weight:400; font-size:clamp(.82rem, 2.6vw, 1.15rem); letter-spacing:.42em; text-transform:uppercase; color:rgba(234,244,248,.88)}

/* sound off until our own composition replaces the borrowed idea (owner 2026-11-02) */
.ec-intro-sound{display:none !important}