/* Omega Mega — the living layer (js/alive.js). Nothing here applies until the script adds html.alive,
   and the script never runs under reduced motion. */

/* the graph-paper grid moves to a canvas that bends with you */
html.alive body{position:relative;background-image:none}
html.alive[data-variant="holo"] body{background-image:repeating-linear-gradient(125deg,#ffd6f3 0,#d9d2ff 528px,#bfeaff 1056px,#c9ffd9 1488px,#fff3b8 1920px,#ffd6f3 2400px);background-size:auto}
.matrix{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.matrix canvas{position:absolute;left:0;top:0;width:100%;height:0}
.fx{position:fixed;inset:0;width:100%;height:100%;z-index:70;pointer-events:none}
html.alive .plate{position:relative}
html.a2 .plate img{will-change:transform}
html.alive .hero .sun{transition:none}

/* toasts: the breadcrumbs */
.toasts{position:fixed;left:50%;top:76px;z-index:80;display:grid;gap:8px;justify-items:center;width:min(calc(100% - 24px),520px);transform:translateX(-50%);pointer-events:none}
.tst{max-width:100%;margin:0;padding:11px 14px 12px;background:#0b0b0c;color:#f7f6f1;border:2px solid #0b0b0c;box-shadow:5px 5px 0 #d2f783;font:700 12px/1.4 var(--mono);text-transform:uppercase;letter-spacing:.05em;animation:tin .55s cubic-bezier(.2,1.5,.3,1) both}
html[data-variant="noir"] .tst{border-color:#f3f2ea}
.tst p{margin:0}
.tst p b{color:#d2f783;margin-right:6px}
.tst small{display:block;margin-top:5px;font-size:11px;color:#c9c8bf;letter-spacing:.04em}
.tst.big{font-size:13px;box-shadow:6px 6px 0 #ffaeb4}
.tst button,.tst a{all:unset;cursor:pointer;display:inline-flex;align-items:center;min-height:40px;margin-top:9px;padding:0 12px;background:#d2f783;color:#0b0b0c;pointer-events:auto}
.tst button:focus-visible,.tst a:focus-visible{outline:2px solid #f7f6f1;outline-offset:2px}
.tst.out{animation:tout .35s ease both}
@keyframes tin{from{opacity:0;transform:translateY(-14px) scale(.96)}}
@keyframes tout{to{opacity:0;transform:translateY(-10px)}}

/* the think tank counter sits beside the deck chip */
.om-tank{all:unset;box-sizing:border-box;position:fixed;right:170px;bottom:calc(34px + env(safe-area-inset-bottom));z-index:45;cursor:pointer;display:inline-flex;align-items:center;
  min-height:44px;padding:0 12px;background:var(--lime);color:#0b0b0c;border:2px solid var(--line);box-shadow:4px 4px 0 var(--ink);
  font:700 12px/1 var(--mono);text-transform:uppercase;letter-spacing:.06em;transition:opacity .3s}
.om-tank[hidden],.snd[hidden]{display:none}
.om-tank.off{opacity:0;pointer-events:none}
.om-tank:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.deckchip.bonk,.om-tank.bonk{animation:bonk .75s cubic-bezier(.3,1.7,.5,1)}
@keyframes bonk{25%{transform:translateY(-16px) rotate(-9deg)}55%{transform:translateY(3px) rotate(4deg)}}

/* Act II · the relativist: page numbers dilate */
html.alive .pg{white-space:nowrap}
.pg.fix{animation:fix .4s cubic-bezier(.3,1.7,.5,1)}
@keyframes fix{30%{transform:translateX(-4px)}60%{transform:translateX(3px)}}

/* Act II+ · the contraption maker: cards topple like dominoes */
html.alive .stack{perspective:1100px}
html.alive .stack li{transform-origin:50% 100%}
html.a2 .stack li{cursor:pointer}
.stack li.tip{animation:tip 1.5s cubic-bezier(.55,0,.35,1) both;animation-delay:var(--d,0ms)}
@keyframes tip{0%{transform:none}20%{transform:rotateX(74deg)}66%{transform:rotateX(74deg)}83%{transform:rotateX(-8deg)}100%{transform:none}}
.plate.jolt{animation:jolt .6s cubic-bezier(.3,1.6,.5,1)}
@keyframes jolt{20%{transform:translate(7px,3px) rotate(1.2deg)}45%{transform:translate(-5px,-2px) rotate(-.8deg)}70%{transform:translate(2px,1px) rotate(.3deg)}}

/* Act III · something is watching: eyes on the labels */
.eyes{display:none}
html.a3 .eyes{display:inline-flex;gap:.18em;margin-left:.55em;vertical-align:-.2em;animation:eyeopen .5s cubic-bezier(.2,1.6,.3,1) both}
.eyes i{width:1.1em;height:1.1em;border-radius:50%;background:#fff;border:2px solid #0b0b0c;display:grid;place-items:center;overflow:hidden;transition:transform .2s cubic-bezier(.3,1.6,.5,1)}
.eyes b{display:block;width:.46em;height:.46em;border-radius:50%;background:#0b0b0c}
.eyes.blink i{animation:blink .18s ease}
.eyes.wide i{transform:scale(1.35)}
@keyframes blink{50%{transform:scaleY(.08)}}
@keyframes eyeopen{from{transform:scaleY(0)}}

/* Act III · the stair drawer: spin the ticker backwards and the words hang upside down */
html.alive .ticker span{transition:transform .5s cubic-bezier(.2,1.5,.3,1),color .3s}
.ticker.esch span{transform:rotate(180deg)}
.ticker span.om-gl{color:var(--pink)}
.ticker span.om-new{color:var(--lime)}

/* Act III · the pop painter: a picture goes four-up */
.om-pop{position:absolute;inset:0;z-index:2;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:2px;background:#0b0b0c}
.om-pop i{background-size:cover;background-position:center;background-blend-mode:multiply;filter:contrast(1.45) saturate(1.7);animation:popin .45s cubic-bezier(.2,1.6,.3,1) both;animation-delay:calc(var(--i) * 70ms)}
.om-pop.out{animation:tout .4s ease both}
@keyframes popin{from{opacity:0;transform:scale(.55)}}
html.a3 .plate[data-om]{cursor:pointer}

/* Act III · the readymade: a signature appears on the cover */
html.alive .hero-art{position:relative}
.mutt{all:unset;box-sizing:border-box;position:absolute;right:clamp(8px,2vw,28px);bottom:clamp(6px,1.4vw,20px);z-index:3;padding:10px;cursor:pointer;visibility:hidden;opacity:0;
  font:italic 900 clamp(13px,1.5vw,21px)/1 "Archivo",sans-serif;font-stretch:78%;color:#0b0b0c;transform:rotate(-7deg);transition:opacity 1.4s ease .8s,visibility 0s 0s;-webkit-tap-highlight-color:transparent}
html.a3 .mutt{visibility:visible;opacity:.8}
.mutt:hover{opacity:1}
.mutt:focus-visible{opacity:1;outline:3px solid #0b0b0c;outline-offset:2px}
.placard{position:absolute;right:clamp(8px,2vw,28px);bottom:calc(clamp(6px,1.4vw,20px) + 46px);z-index:4;width:min(270px,calc(100% - 24px));margin:0;padding:12px 14px;background:#fff;color:#0b0b0c;border:1px solid #0b0b0c;box-shadow:4px 4px 0 rgba(11,11,12,.18);font:400 12px/1.5 "Archivo",sans-serif;animation:tin .45s cubic-bezier(.2,1.4,.3,1) both}
.placard b{font-weight:800}

/* Act IV · the silent clown: a title card, and the words take a fall */
.wd{display:inline-block;white-space:nowrap}
.ch{display:inline-block}
.u .ch{text-decoration:underline;text-decoration-thickness:.08em;text-underline-offset:.12em}
.flung .ch{transform:translate(var(--tx),var(--ty)) rotate(var(--r));transition:transform .5s cubic-bezier(.4,0,.7,1)}
.om-back .ch{transform:none;transition:transform .95s cubic-bezier(.2,1.5,.35,1) calc(var(--i) * 7ms)}
.silent{position:fixed;inset:0;z-index:75;pointer-events:none;display:grid;place-items:center;padding:16px;
  -webkit-backdrop-filter:grayscale(1) sepia(.45) contrast(1.2);backdrop-filter:grayscale(1) sepia(.45) contrast(1.2);
  background:radial-gradient(ellipse at center,rgba(40,24,8,0) 50%,rgba(30,18,6,.55));animation:flick .14s steps(2) infinite}
.silent[hidden]{display:none}
.silent::before{content:"";position:absolute;inset:0;opacity:.2;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:grain .3s steps(3) infinite}
.title-card{position:relative;margin:0;max-width:min(86vw,680px);padding:26px 30px;text-align:center;background:#0b0b0c;color:#efe6d2;border:3px double #efe6d2;box-shadow:0 0 0 8px #0b0b0c;
  font:900 clamp(22px,4.2vw,50px)/1.12 "Archivo",sans-serif;font-stretch:70%;text-transform:uppercase;letter-spacing:.03em}
@keyframes flick{50%{opacity:.97}}
@keyframes grain{33%{transform:translate(-4%,3%)}66%{transform:translate(3%,-2%)}}
main.om-jit{animation:omjit .12s steps(2) 10}
@keyframes omjit{50%{transform:translateY(2px)}}

/* Act IV · the chocolatier: a golden ticket flies out of a toy */
.ticket{position:fixed;left:0;top:0;z-index:79;pointer-events:none;padding:10px 14px;background:linear-gradient(120deg,#f7e27a,#e0ad2c 40%,#fff1a8 52%,#d39b1d);color:#0b0b0c;border:2px solid #0b0b0c;box-shadow:4px 4px 0 #0b0b0c;font:700 11px/1.25 var(--mono);text-transform:uppercase;letter-spacing:.06em;white-space:nowrap}

/* Act V · the chameleon: a bolt, and the site changes its look (twice, slowly: never a strobe) */
.bolt{position:fixed;inset:0;z-index:76;pointer-events:none;background:linear-gradient(100deg,#ff4a4a 0 49%,#3a6dff 51% 100%);
  clip-path:polygon(57% 0,31% 53%,47% 53%,36% 100%,73% 41%,55% 41%,71% 0);animation:strike 1s cubic-bezier(.2,.9,.2,1) both}
@keyframes strike{0%{opacity:0;transform:scaleY(0);transform-origin:50% 0}12%{opacity:.92;transform:none}70%{opacity:.85}100%{opacity:0}}
html.persona body,html.persona .nav,html.persona .plate,html.persona .ticker,html.persona .foot{transition:background-color .35s ease,color .35s ease}

/* Act V · the producer: a sound switch */
.snd{all:unset;cursor:pointer;font:700 12px var(--mono);text-transform:uppercase;letter-spacing:.06em;padding:0 10px;height:44px;line-height:44px;background:var(--lime);color:#0b0b0c}
.snd[aria-pressed="true"]{background:var(--pink)}
.snd:focus-visible{outline:3px solid var(--ink);outline-offset:2px}

/* Act V · the omnipotent prankster: a snap, then the curtain call */
.flash{position:fixed;inset:0;z-index:77;pointer-events:none;background:#fff;animation:flash .6s ease-out both}
@keyframes flash{0%{opacity:0}15%{opacity:.85}100%{opacity:0}}
.curtain{width:min(720px,calc(100% - 24px));max-width:none;max-height:calc(100dvh - 32px);overflow:auto;overscroll-behavior:contain;padding:clamp(22px,4vw,44px);background:var(--paper);color:var(--ink);border:2px solid var(--line);box-shadow:12px 12px 0 var(--lime)}
.curtain::backdrop{background:rgba(11,11,12,.62)}
.cur-x{position:sticky;top:0;float:right;z-index:1;width:44px;height:44px;margin:-8px -8px 0 12px;display:grid;place-items:center;padding:0;font:700 26px/1 var(--mono);background:var(--ink);color:var(--paper);border:2px solid var(--line);cursor:pointer}
.cur-x:focus-visible{outline:3px solid var(--lime);outline-offset:2px}
.curtain h2{margin:28px 0 0;font-size:clamp(40px,8.4vw,92px);line-height:1.1}
.cur-stat{margin:30px 0 0;font-size:clamp(17px,1.4vw + 11px,22px);line-height:1.45}
.cur-how{margin:18px 0 0;padding:12px 14px;border:2px solid var(--line);font-size:15px;line-height:1.5}
.cur-how b{font:700 12px var(--mono);text-transform:uppercase;letter-spacing:.06em}
.cur-list{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr))}
.cur-list li{padding:10px 12px;border:2px solid var(--line);font-size:14px;line-height:1.4;background:var(--plate);color:#0b0b0c}
.cur-list li b{display:block;font:700 11px/1.3 var(--mono);text-transform:uppercase;letter-spacing:.06em}
.cur-list li.got{background:var(--lime)}
.cur-act{display:flex;flex-wrap:wrap;gap:16px;margin-top:30px}
.cur-act [hidden]{display:none}
.cur-fine{margin:22px 0 0;font:700 11px/1.6 var(--mono);text-transform:uppercase;letter-spacing:.05em;color:var(--mute)}
.cur-fine button{all:unset;cursor:pointer;text-decoration:underline;text-underline-offset:3px;color:var(--ink)}
.cur-fine button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* the visit card: your route through the deck as a lenticular card (drawn on this device, never sent) */
.vc{display:grid;gap:20px 26px;margin:30px 0 0;align-items:start}
.vc[hidden]{display:none}
@media (min-width:600px){.vc{grid-template-columns:minmax(0,270px) minmax(0,1fr)}}
.vc-card{position:relative;width:100%;max-width:340px;aspect-ratio:4/5;background:#0b0b0c;border:2px solid var(--line);box-shadow:6px 6px 0 var(--pink);touch-action:pan-y;cursor:ew-resize;-webkit-tap-highlight-color:transparent}
.vc-card canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.vc-side .bar{margin:0}
.vc-say{margin:10px 0 0;font-size:15px;line-height:1.5}
.vc-tilt{display:flex;align-items:center;gap:12px;margin-top:12px;font:700 12px var(--mono);text-transform:uppercase;letter-spacing:.06em}
.vc-tilt input{flex:1;min-width:0;height:44px;margin:0;accent-color:var(--ink);cursor:ew-resize}
.vc-btns{display:flex;flex-wrap:wrap;gap:14px;margin-top:12px}
.vc-fine{margin:14px 0 0;font:700 11px/1.6 var(--mono);text-transform:uppercase;letter-spacing:.05em;color:var(--mute)}