/* tunio.lol pre-teaser (TUN-216), on top of style.css: the equaliser fills the window behind a light veil, a dust sheet
   drifts over it, and one solid card sits on top. */
body.pre{min-height:100vh;min-height:100dvh}

/* Behind the glass: the canvas is drawn by pre.js; blurred a touch so it reads as a board playing, not a chart */
.pre-eq{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;filter:blur(1px)}

/* The dust sheet: a little page colour, a fine weave and soft folds that drift slowly */
.pre-sheet{position:fixed;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(105deg,transparent 0 18%,rgba(255,255,255,.07) 24%,transparent 31%,transparent 52%,rgba(0,0,0,.06) 58%,transparent 64%,transparent 78%,rgba(255,255,255,.05) 84%,transparent 90%),
    repeating-linear-gradient(45deg,rgba(127,127,127,.035) 0 1px,transparent 1px 5px),
    repeating-linear-gradient(-45deg,rgba(127,127,127,.03) 0 1px,transparent 1px 5px),
    linear-gradient(color-mix(in srgb,var(--color-bg) 35%,transparent),color-mix(in srgb,var(--color-bg) 55%,transparent));
  background-size:220% 100%,auto,auto,auto;animation:presheet 26s ease-in-out infinite alternate}
@keyframes presheet{from{background-position:0 0,0 0,0 0,0 0}to{background-position:100% 0,0 0,0 0,0 0}}

/* On top: the card in the middle, one small bar at the bottom */
.pre-page{position:relative;z-index:2;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
.pre-main{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-16);padding:var(--space-24) var(--space-16)}
.pre-card{max-width:30rem;text-align:center;background:var(--color-surface-raised);border:1px solid var(--color-border);
  border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);padding:var(--space-32) var(--space-24)}
.pre-logo{width:112px;height:112px;border-radius:var(--radius-xl);box-shadow:var(--shadow-md)}
.pre-card h1{font-size:clamp(1.6rem,6vw,2.4rem);margin:var(--space-16) 0 var(--space-12)}
.pre-line{margin:0;color:var(--color-text-muted)}
.pre-peek{margin:0;font-size:var(--font-size-sm);color:var(--color-text-muted);text-align:center;
  background:color-mix(in srgb,var(--color-bg) 70%,transparent);border-radius:var(--radius-full);padding:var(--space-4) var(--space-12)}
.pre-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--space-12);padding:var(--space-12) var(--space-16);
  font-size:var(--font-size-sm);color:var(--color-text-muted);background:color-mix(in srgb,var(--color-bg) 80%,transparent);border-top:1px solid var(--color-border)}
.pre-bar .toggle{width:36px;height:36px;font-size:17px}