/* =========================================================
   MY MARK ZONE — shared foundation (reset · grain · scene layer)
   Every page layers its own palette + type on top of this.
   ========================================================= */
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{min-height:100vh;min-height:100dvh;overflow-x:hidden;background:var(--bg,#050505);color:var(--ink,#eee);font-family:var(--ui,'Cairo',sans-serif);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--accent,#c0392b);color:#fff}

/* scene canvas + atmosphere layers */
.scene{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.vignette{position:fixed;inset:0;z-index:1;pointer-events:none;background:var(--vig,radial-gradient(ellipse at 50% 45%,transparent 40%,rgba(0,0,0,.55) 100%))}
.grain{position:fixed;inset:-50%;width:200%;height:200%;z-index:2;pointer-events:none;opacity:var(--grain,.09);mix-blend-mode:overlay;will-change:transform;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation:grainShift 1.2s steps(6) infinite}
@keyframes grainShift{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}

/* corner-cut back button */
.back{position:fixed;top:clamp(.9rem,2.4vh,1.6rem);left:clamp(.9rem,2.4vw,1.8rem);z-index:40;width:46px;height:46px;display:grid;place-items:center;
  color:var(--ink);background:var(--glass,rgba(8,8,8,.6));border:1px solid var(--line,rgba(255,255,255,.2));backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  clip-path:polygon(0 0,calc(100% - 9px) 0,100% 9px,100% 100%,9px 100%,0 calc(100% - 9px));transition:.3s}
.back:hover{background:var(--accent);color:#fff;border-color:transparent}
.back svg{width:18px;height:18px}

/* scrolling strip (Raiden-poster bottom marquee) */
.marquee{position:fixed;left:0;right:0;bottom:0;z-index:20;height:30px;overflow:hidden;display:flex;align-items:center;direction:ltr;
  background:var(--strip-bg,rgba(0,0,0,.6));border-top:1px solid var(--line);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  font-family:var(--mono,'Cinzel',serif);font-size:.62rem;letter-spacing:.32em;text-transform:uppercase;color:var(--strip-ink,var(--ink-dim))}
.marquee .track{display:flex;flex:none;gap:2.4rem;padding-right:2.4rem;white-space:nowrap;animation:marq 38s linear infinite}
.marquee span{display:inline-flex;align-items:center;gap:2.4rem}
.marquee span::after{content:'✦';color:var(--accent);letter-spacing:0}
@keyframes marq{to{transform:translateX(-50%)}}

/* tiny barcode used on tickets */
.barcode{height:26px;width:84px;opacity:.7;background:repeating-linear-gradient(90deg,currentColor 0 2px,transparent 2px 4px,currentColor 4px 5px,transparent 5px 8px,currentColor 8px 11px,transparent 11px 13px,currentColor 13px 14px,transparent 14px 17px)}

.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes fade{to{opacity:1}}
@media (prefers-reduced-motion:reduce){.grain,.marquee .track{animation:none}*{scroll-behavior:auto!important}}

/* ---------------------------------------------------------
   Weak-device tiers — set on <html data-perf="..."> by scenes.js.
   High-end devices are untouched; the look stays the same, only the
   most expensive compositing steps are dropped on weaker ones.
   --------------------------------------------------------- */
/* mid: same grain, but static (no 4x-screen layer re-composited every 200ms) */
html[data-perf="mid"] .grain{animation:none}
/* low: no grain/blend layer, no live blur behind a constantly changing canvas.
   Surfaces keep their own translucent colour. */
html[data-perf="low"] .grain{display:none}
html[data-perf="low"] *,html[data-perf="low"] *::before,html[data-perf="low"] *::after{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}