/* ==========================================================================
   Santa Claus — the storm, the floating wall, and the identity + trips rail
   Glass everywhere is "wet": cold, frosted, with drops — and it catches the
   lightning (--lit is driven by the storm, 0..1).
   ========================================================================== */
@font-face{font-family:'Big Shoulders Display';font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/big-shoulders-display.woff2) format('woff2')}
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/instrument-serif-400.woff2) format('woff2')}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url(../fonts/instrument-serif-400-italic.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:100 800;font-display:swap;src:url(../fonts/jetbrains-mono.woff2) format('woff2')}

@property --ang{syntax:'<angle>';inherits:false;initial-value:0deg}

:root{
  --ink:#050505;
  --bone:#ece8e1;
  --bone-2:rgba(236,232,225,.78);
  --bone-3:rgba(236,232,225,.55);
  --bone-4:rgba(236,232,225,.32);
  --line:rgba(236,232,225,.1);
  --line-2:rgba(236,232,225,.2);
  --ice:#e6eefc;
  --ice-2:rgba(214,228,255,.74);
  --ice-3:rgba(214,228,255,.5);
  --ice-4:rgba(214,228,255,.3);
  --volt:#a9c8ff;
  --red:#d3302a;
  --gold:#c9a35b;
  --warm:#ffd9a8;
  --good:#34d17f;
  --idle:#e3b341;
  --dnd:#d3302a;
  --blurple:#5865f2;

  --display:'Big Shoulders Display','Arial Narrow',Impact,sans-serif;
  --serif:'Instrument Serif','Times New Roman',Georgia,serif;
  --mono:'JetBrains Mono',ui-monospace,'SFMono-Regular',Menlo,monospace,'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji';

  --pad:clamp(16px,2.6vw,40px);
  --wall-w:clamp(280px,24vw,340px);   /* left column: messages */
  --rail-w:clamp(270px,21vw,320px);   /* right column: identity + trips */
  /* the name always fits between the two columns */
  --name-size:clamp(44px,calc((100vw - var(--wall-w) - var(--rail-w)) / 4.25),196px);
  --out:cubic-bezier(.16,1,.3,1);
  --io:cubic-bezier(.77,0,.18,1);
  --lit:0;
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
html{background:var(--ink);-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  margin:0;background:var(--ink);color:var(--bone);
  font:400 14px/1.55 var(--mono);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow:hidden;overscroll-behavior:none;
}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;padding:0}
:focus-visible{outline:2px solid var(--volt);outline-offset:2px}
em{font-style:normal}
[hidden]{display:none!important}
::selection{background:#3d5a99;color:#fff}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

/* ---------- the storm ---------- */
.sky,.bolts,.portrait,.fx,.flash,.grain,.vignette{position:fixed;inset:0;pointer-events:none}
.sky{z-index:0;width:100%;height:100%}
.bolts{z-index:1;width:100%;height:100%}
.portrait{
  z-index:2;
  -webkit-mask:radial-gradient(90% 96% at 50% 48%,#000 80%,transparent 100%);
          mask:radial-gradient(90% 96% at 50% 48%,#000 80%,transparent 100%);
}
.pl{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:50% 50%;user-select:none;-webkit-user-drag:none}
.pl--dark{opacity:.6;filter:brightness(.85) contrast(1.05) saturate(.92)}
.pl--eyes,.pl--lit,.pl--hot,.pl--torch{opacity:0;will-change:opacity}
.pl--lit{filter:brightness(1.12) contrast(1.08)}
/* flashlight: the lit layer, only where the mouse is */
.pl--torch{
  -webkit-mask-image:radial-gradient(circle at var(--tx,50%) var(--ty,42%),#000 0,rgba(0,0,0,.6) 5vmin,rgba(0,0,0,.18) 11vmin,transparent 19vmin);
          mask-image:radial-gradient(circle at var(--tx,50%) var(--ty,42%),#000 0,rgba(0,0,0,.6) 5vmin,rgba(0,0,0,.18) 11vmin,transparent 19vmin);
}
.fx{z-index:5;width:100%;height:100%}
.flash{z-index:6;background:#cdd7ff;opacity:0;mix-blend-mode:screen;
  -webkit-mask:radial-gradient(60vmax 60vmax at var(--fx,50%) 18%,#000 0,transparent 75%);
          mask:radial-gradient(60vmax 60vmax at var(--fx,50%) 18%,#000 0,transparent 75%)}
.grain{z-index:7;opacity:.05;background-image:url(../img/grain.png);background-size:180px;mix-blend-mode:overlay}
.vignette{z-index:7;background:
  radial-gradient(130% 100% at 50% 0%,transparent 42%,rgba(0,0,0,.5) 100%),
  radial-gradient(100% 120% at 50% 120%,transparent 48%,rgba(0,0,0,.62) 100%)}

.stage{position:relative;z-index:10;height:100%}

/* ---------- cinematic frame + REC timecode ---------- */
.frame{position:fixed;inset:clamp(10px,1.8vh,20px);z-index:20;pointer-events:none}
.frame i{position:absolute;width:22px;height:22px;border:1px solid var(--line-2);opacity:.75}
.frame i:nth-child(1){top:0;left:0;border-right:0;border-bottom:0}
.frame i:nth-child(2){top:0;right:0;border-left:0;border-bottom:0}
.frame i:nth-child(3){bottom:0;left:0;border-right:0;border-top:0}
.frame i:nth-child(4){bottom:0;right:0;border-left:0;border-top:0}
.hud{position:fixed;top:clamp(14px,2.6vh,26px);left:50%;transform:translateX(-50%);z-index:20;
  display:inline-flex;align-items:center;gap:12px;pointer-events:none;
  font-size:10px;letter-spacing:.34em;text-transform:uppercase;color:var(--bone-3);text-shadow:0 1px 8px rgba(0,0,0,.85)}
.hud__rec{display:inline-flex;align-items:center;gap:7px}
.hud__rec i{width:7px;height:7px;border-radius:50%;background:var(--red);box-shadow:0 0 9px var(--red);animation:beat 1.6s ease-in-out infinite}
.hud__tc{font-variant-numeric:tabular-nums;color:var(--bone-2);letter-spacing:.14em}

/* ---------- sound controls ---------- */
.audio-ctl{position:fixed;top:var(--pad);left:var(--pad);z-index:45;display:flex;align-items:center;gap:8px}
.abtn{
  width:36px;height:36px;border-radius:50%;display:grid;place-items:center;color:var(--ice-2);
  background:rgba(12,15,21,.56);border:1px solid rgba(196,214,245,.2);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:background .25s,color .25s,border-color .25s,box-shadow .25s,transform .2s var(--out),opacity .25s;
}
.abtn:hover:not(:disabled){transform:translateY(-1px);color:var(--ice);border-color:rgba(196,214,245,.4)}
.abtn svg{width:17px;height:17px}
.abtn .i-fill{fill:currentColor}
.abtn .i-line{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.abtn .on-only{display:none}
.abtn.is-on{color:#1a1105;background:var(--warm);border-color:var(--warm);box-shadow:0 0 24px -4px rgba(255,217,168,.75)}
.abtn.is-on .on-only{display:inline}
.abtn.is-on .off-only{display:none}
.abtn:disabled{opacity:.32;cursor:default}
.audio-ctl__hint{
  margin-left:4px;font-size:10px;letter-spacing:.2em;text-transform:uppercase;white-space:nowrap;
  color:var(--bone-3);text-shadow:0 1px 8px rgba(0,0,0,.85);
  opacity:0;transform:translateX(-6px);animation:hintIn 1s var(--out) 2.8s forwards;pointer-events:none;
}
.audio-ctl__hint::before{content:"←";display:inline-block;margin-right:.7em;animation:nudge 1.6s ease-in-out 3.8s infinite}
.audio-ctl.is-touched .audio-ctl__hint{display:none}

/* rain volume: a slim slider slides out of the rain button on hover */
.vol{position:relative;display:flex;align-items:center;border-radius:999px;transition:background .3s,box-shadow .3s}
.vol__track{display:flex;align-items:center;gap:8px;width:0;padding:0;overflow:hidden;opacity:0;
  transition:width .45s var(--out),padding .45s var(--out),opacity .25s}
.vol:not(.is-off):hover,.vol:not(.is-off):focus-within{background:rgba(12,15,21,.66);box-shadow:inset 0 0 0 1px rgba(196,214,245,.2)}
.vol:not(.is-off):hover .vol__track,.vol:not(.is-off):focus-within .vol__track{width:132px;padding:0 12px 0 8px;opacity:1}
.vol__range{-webkit-appearance:none;appearance:none;flex:none;width:86px;height:20px;margin:0;background:transparent;cursor:pointer}
.vol__range:focus{outline:none}
.vol__range::-webkit-slider-runnable-track{height:4px;border-radius:4px;background:linear-gradient(90deg,var(--volt) 0 var(--p,62%),rgba(214,228,255,.2) var(--p,62%) 100%)}
.vol__range::-webkit-slider-thumb{-webkit-appearance:none;width:13px;height:13px;margin-top:-4.5px;border-radius:50%;background:#fff;
  box-shadow:0 0 12px rgba(169,200,255,.9);transition:transform .2s var(--out)}
.vol__range:active::-webkit-slider-thumb{transform:scale(1.3)}
.vol__range:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px rgba(169,200,255,.45),0 0 12px rgba(169,200,255,.9)}
.vol__range::-moz-range-track{height:4px;border-radius:4px;background:rgba(214,228,255,.2)}
.vol__range::-moz-range-progress{height:4px;border-radius:4px;background:var(--volt)}
.vol__range::-moz-range-thumb{width:13px;height:13px;border:0;border-radius:50%;background:#fff;box-shadow:0 0 12px rgba(169,200,255,.9)}
.vol__val{flex:none;width:22px;font-size:10px;font-variant-numeric:tabular-nums;color:var(--ice-3);text-align:right}

/* the song picker: a small pill next to the music button, with a blink until it's been opened once */
.tune{position:relative;display:inline-flex;align-items:center;gap:9px;height:36px;padding:0 10px 0 12px;border-radius:999px;max-width:220px;
  color:var(--ice-2);background:rgba(12,15,21,.56);border:1px solid rgba(196,214,245,.2);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:background .25s,border-color .25s,color .25s,transform .2s var(--out)}
.tune:hover,.tune[aria-expanded="true"]{color:var(--ice);border-color:rgba(196,214,245,.42);background:rgba(18,23,32,.7)}
.tune__eq{flex:none;display:inline-flex;align-items:flex-end;gap:2px;height:13px}
.tune__eq i{width:2.5px;height:30%;border-radius:2px;background:currentColor;opacity:.7}
.tune.is-playing .tune__eq i{background:var(--warm);opacity:1;animation:eq .9s ease-in-out infinite}
.tune.is-playing .tune__eq i:nth-child(2){animation-delay:-.3s;animation-duration:.7s}
.tune.is-playing .tune__eq i:nth-child(3){animation-delay:-.55s;animation-duration:1.1s}
.tune.is-playing .tune__eq i:nth-child(4){animation-delay:-.15s;animation-duration:.8s}
.tune__now{min-width:0;display:flex;flex-direction:column;line-height:1.15;text-align:left}
.tune__now b{font-size:11px;font-weight:700;color:var(--ice);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tune__now small{font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ice-4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tune__chev{flex:none;width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--out)}
.tune[aria-expanded="true"] .tune__chev{transform:rotate(180deg)}
.tune__blink{position:absolute;top:-2px;right:-2px;width:9px;height:9px;border-radius:50%;background:var(--warm);box-shadow:0 0 10px var(--warm)}
.tune__blink::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--warm);animation:ping 1.8s var(--out) infinite}
.tune.is-seen .tune__blink{display:none}
.tune-pop{position:fixed;top:calc(var(--pad) + 46px);left:var(--pad);z-index:72;width:270px;max-height:min(600px,calc(100vh - var(--pad) * 2 - 60px));overflow-y:auto;
  padding:12px 8px 8px;border-radius:18px;scrollbar-width:none;
  background:linear-gradient(180deg,rgba(24,30,42,.94),rgba(10,13,19,.96));border:1px solid rgba(196,214,245,.2);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 30px 60px -24px rgba(0,0,0,.95);
  transform-origin:24% 0;animation:popDrop .4s cubic-bezier(.2,1.3,.4,1)}
.tune-pop.is-out{animation:popUp .18s ease forwards}
.tune-pop__h{display:flex;justify-content:space-between;align-items:baseline;margin:0 8px 8px;font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--ice-3)}
.tune-pop__h span{letter-spacing:.08em;text-transform:none;color:var(--ice-4)}
.tune-pop__list{list-style:none;margin:0;padding:0}
.tune-pop__sep{margin:10px 8px 6px;font-size:9px;letter-spacing:.24em;text-transform:uppercase;color:var(--ice-4)}
.song{width:100%;display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:11px;text-align:left;color:var(--ice-2);
  transition:background .2s,color .2s;animation:songIn .45s var(--out) calc(var(--k) * 35ms) backwards}
.song:hover{background:rgba(214,228,255,.07);color:var(--ice)}
.song__art{flex:none;width:28px;height:28px;border-radius:8px;display:grid;place-items:center;
  background:linear-gradient(135deg,hsl(var(--h,220) 45% 30%),hsl(calc(var(--h,220) + 40) 50% 14%));border:1px solid rgba(255,255,255,.08)}
.song__art svg{width:13px;height:13px;fill:currentColor}
.song__txt{min-width:0;flex:1;display:flex;flex-direction:column;line-height:1.25}
.song__txt b{font-size:12px;color:var(--ice);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.song__txt small{font-size:10px;color:var(--ice-4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.song.is-on{background:rgba(255,217,168,.08)}
.song.is-on .song__txt b{color:var(--warm)}
.song.is-on .song__art{box-shadow:0 0 0 1px rgba(255,217,168,.5),0 0 16px -4px rgba(255,217,168,.6)}
.song .tune__eq{display:none;color:var(--warm)}
.song.is-on .tune__eq{display:inline-flex}
.song.is-on .tune__eq i{background:var(--warm);opacity:1;animation:eq .9s ease-in-out infinite}
.song.is-on .tune__eq i:nth-child(2){animation-delay:-.3s;animation-duration:.7s}
.song.is-on .tune__eq i:nth-child(3){animation-delay:-.55s;animation-duration:1.1s}
.song.is-on .tune__eq i:nth-child(4){animation-delay:-.15s;animation-duration:.8s}

/* song requests, at the bottom of the picker */
.req{margin:8px 4px 2px;padding-top:10px;border-top:1px dashed rgba(196,214,245,.14)}
.req__open{width:100%;display:flex;align-items:center;justify-content:center;gap:7px;padding:9px;border-radius:11px;
  font-size:11.5px;font-weight:700;letter-spacing:.04em;color:var(--warm);background:rgba(255,217,168,.07);border:1px dashed rgba(255,217,168,.4);
  transition:background .2s,border-color .2s,transform .2s var(--out)}
.req__open:hover{background:rgba(255,217,168,.13);border-color:rgba(255,217,168,.7);transform:translateY(-1px)}
.req__open svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.req__form{display:flex;gap:6px;animation:popIn .3s var(--out)}
.req__input{flex:1;min-width:0;padding:9px 11px;border-radius:10px;border:1px solid rgba(196,214,245,.2);background:rgba(220,232,255,.05);
  color:var(--ice);font:400 12px var(--mono);caret-color:var(--volt);transition:border-color .2s}
.req__input:focus{outline:none;border-color:rgba(255,217,168,.6)}
.req__input::placeholder{color:var(--ice-4)}
.req__go{flex:none;width:36px;border-radius:10px;display:grid;place-items:center;color:#1a1105;background:linear-gradient(135deg,#ffe8c8,#ffd9a8 45%,#c9a35b);
  transition:transform .2s var(--out),opacity .2s}
.req__go svg{width:15px;height:15px;fill:currentColor}
.req__go:hover{transform:translateY(-1px)}
.req__go:disabled{opacity:.5;cursor:progress}
.req__note{margin:7px 2px 0;font-size:10px;line-height:1.4;color:var(--ice-4)}
.req__note.is-ok{color:#8ff0bd}
.req__note.is-error{color:#ff8a84}
.req.is-used .req__open{color:var(--ice-3);border-color:rgba(196,214,245,.2);background:transparent;cursor:default;transform:none}

/* the TV: hits play in YouTube's player, which has to stay visible (at least 200px tall) */
.tv{position:fixed;top:calc(var(--pad) + 46px);left:var(--pad);z-index:46;width:356px;padding:6px;border-radius:16px;
  background:linear-gradient(180deg,rgba(26,32,44,.92),rgba(10,13,19,.95));border:1px solid rgba(196,214,245,.22);
  box-shadow:0 24px 50px -20px rgba(0,0,0,.95),0 0 40px -16px rgba(255,217,168,.35);transform-origin:50% 50%}
.tv.is-on{animation:tvOn .55s cubic-bezier(.2,.9,.3,1)}
.tv.is-off{animation:tvOff .35s ease-in forwards}
.tv__bar{display:flex;align-items:center;gap:9px;padding:3px 4px 7px 6px;font-size:11px}
.tv__live{display:inline-flex;align-items:center;gap:6px;font-size:8.5px;letter-spacing:.24em;text-transform:uppercase;color:#ff8f85}
.tv__live i{width:6px;height:6px;border-radius:50%;background:#ff5d52;box-shadow:0 0 8px #ff5d52;animation:beat 1.4s ease-in-out infinite}
.tv__bar b{flex:1;min-width:0;color:var(--ice);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tv__out{color:var(--warm);text-decoration:underline;text-underline-offset:2px}
.tv.is-refused .tv__live{color:var(--ice-4)}
.tv.is-refused .tv__live i{background:var(--ice-4);box-shadow:none;animation:none}
.tv__x{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:10px;color:var(--ice-3);transition:background .2s,color .2s}
.tv__x:hover{background:rgba(214,228,255,.12);color:#fff}
.tv__screen{width:344px;height:200px;border-radius:10px;overflow:hidden;background:#000}
.tv__screen iframe{display:block;width:100%;height:100%;border:0}
.wall .feed{transition:padding-top .5s var(--out)}
.has-tv .wall .feed{padding-top:calc(var(--pad) + 64px + 246px)}
.is-gated .tv{display:none!important}
.song__art img{width:100%;height:100%;object-fit:cover;border-radius:7px}

/* reactions: the tray (one, floating), the pills under a message, and the flight between them */
.rx-tray{position:fixed;z-index:74;display:flex;gap:2px;padding:6px;border-radius:999px;
  background:linear-gradient(180deg,rgba(28,35,48,.94),rgba(12,15,21,.96));border:1px solid rgba(196,214,245,.24);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 18px 40px -14px rgba(0,0,0,.92),inset 0 1px 0 rgba(255,255,255,.07);transform-origin:var(--ox,50%) 100%}
.rx-tray.is-below{transform-origin:var(--ox,50%) 0}
.rx-tray.is-in{animation:trayIn .45s cubic-bezier(.2,1.5,.4,1)}
.rx-tray.is-out{animation:trayOut .16s ease forwards}
.rx-opt{width:38px;height:38px;padding:6px;border-radius:50%;display:grid;place-items:center;
  transition:transform .28s cubic-bezier(.2,1.6,.4,1),background .2s}
.rx-tray.is-in .rx-opt{animation:rxPop .5s cubic-bezier(.2,1.6,.4,1) calc(60ms + var(--k) * 40ms) backwards}
.rx-opt .stk{width:100%;height:100%;filter:drop-shadow(0 3px 4px rgba(0,0,0,.5))}
.rx-opt:hover,.rx-opt:focus-visible{transform:translateY(-7px) scale(1.42);background:rgba(214,228,255,.06)}
.rx-opt:hover + .rx-opt,.rx-opt:has(+ .rx-opt:hover){transform:translateY(-2px) scale(1.12)}
.rx-opt.is-mine{background:rgba(150,190,255,.16)}
.cmt__react svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.cmt__rx{display:flex;flex-wrap:wrap;align-items:center;gap:5px;margin-top:9px}
.rx{display:inline-flex;align-items:center;gap:4px;height:24px;padding:0 8px 0 5px;border-radius:999px;
  background:rgba(214,228,255,.07);border:1px solid rgba(196,214,245,.16);color:var(--ice-2);font-size:11px;font-weight:700;
  transition:background .2s,border-color .2s,box-shadow .25s,transform .25s var(--out)}
.rx .stk{width:16px;height:16px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.55))}
.rx b{display:inline-block;min-width:.6em;font-variant-numeric:tabular-nums}
.rx:hover{background:rgba(214,228,255,.13);transform:translateY(-1px)}
.rx.is-mine{background:rgba(150,190,255,.17);border-color:rgba(160,198,255,.6);color:var(--ice);box-shadow:0 0 14px -5px rgba(150,190,255,.9)}
.rx.is-new{animation:rxIn .5s cubic-bezier(.2,1.6,.4,1)}
.rx.is-incoming{opacity:0}
.rx.is-bump .stk{animation:rxHop .5s cubic-bezier(.2,1.6,.4,1)}
.rx.is-bump b{animation:rxCount .5s cubic-bezier(.2,1.6,.4,1)}
.rx--add{width:24px;padding:0;justify-content:center;color:var(--ice-3);opacity:0;transition:opacity .25s,background .2s,color .2s}
.rx--add svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.cmt:hover .rx--add,.cmt:focus-within .rx--add,.cmt.is-reacting .rx--add{opacity:1}
.rx-fly{position:fixed;z-index:80;pointer-events:none;left:0;top:0}
.rx-fly .stk,.rx-big .stk{width:100%;height:100%}
.rx-spark{position:fixed;z-index:80;left:0;top:0;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;pointer-events:none}
.rx-spark.is-top{z-index:125}
.rx-big{position:fixed;z-index:80;left:0;top:0;width:86px;height:86px;margin:-43px 0 0 -43px;pointer-events:none}

/* ---------- the name, at the bottom ---------- */
.hero{position:fixed;top:0;bottom:0;left:var(--wall-w);right:var(--rail-w);z-index:12;pointer-events:none}
.hero__title{
  position:absolute;left:50%;bottom:clamp(22px,7vh,88px);transform:translateX(-50%);
  width:max-content;max-width:100%;display:flex;flex-direction:column;align-items:center;text-align:center;
}
.hero__title::before{content:"";position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);
  width:155%;height:280%;z-index:-1;pointer-events:none;
  background:radial-gradient(52% 56% at 50% 56%,rgba(3,3,5,.82),rgba(3,3,5,.3) 52%,transparent 74%);filter:blur(20px)}
.kicker{display:inline-flex;align-items:center;gap:.7em;margin:0 0 .55em;
  font-size:clamp(9px,1vw,11px);letter-spacing:.52em;text-transform:uppercase;color:var(--bone-3);
  text-shadow:0 1px 10px rgba(0,0,0,.8);
  opacity:0;transform:translateY(8px);animation:rise .9s var(--out) .25s forwards}
.kicker__dot{width:5px;height:5px;border-radius:50%;background:var(--warm);box-shadow:0 0 10px var(--warm);animation:beat 2.6s ease-in-out infinite}

.name{
  position:relative;margin:0;display:inline-block;white-space:nowrap;
  font-family:var(--display);font-weight:700;font-size:var(--name-size);line-height:.8;letter-spacing:-.012em;
}
.name__ghost{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%) scale(1.035);z-index:-1;
  color:transparent;-webkit-text-stroke:1px rgba(236,232,225,.11);pointer-events:none}
.name__layer{display:block}
.name__layer .w{display:inline-block}
.name__layer--base{color:#f4f0e8;text-shadow:0 10px 30px rgba(0,0,0,.72),0 2px 10px rgba(0,0,0,.92)}
.name__layer--base .w{opacity:0;transform:translateY(.16em) rotate(.6deg);filter:blur(7px);animation:word 1s var(--out) .15s forwards}
.name__layer--base .w:nth-child(2){animation-delay:.27s}
.name__layer--glow{
  position:absolute;inset:0;color:transparent;opacity:0;pointer-events:none;
  background:linear-gradient(180deg,#fff,#ffd9a8 55%,#c9a35b);
  -webkit-background-clip:text;background-clip:text;
  filter:drop-shadow(0 0 26px rgba(255,217,168,.6)) drop-shadow(0 0 72px rgba(201,163,91,.45));
  will-change:opacity;
}
/* glitch on close strikes: red/blue ghosts slip sideways for a beat */
.name::before,.name::after{content:attr(data-text);position:absolute;inset:0;pointer-events:none;opacity:0}
.name::before{color:rgba(211,48,42,.6);mix-blend-mode:screen}
.name::after{color:rgba(120,170,255,.5);mix-blend-mode:screen}
.name.is-glitch::before{opacity:1;animation:gl1 .26s steps(3) 1 forwards}
.name.is-glitch::after{opacity:1;animation:gl2 .26s steps(3) 1 forwards}
.hero__hint{margin:1.5em 0 0;font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--bone-4);
  text-shadow:0 1px 8px rgba(0,0,0,.8);opacity:0;animation:fade 1.4s ease 1.6s forwards;transition:opacity .6s}
.hero__hint.is-gone{opacity:0!important;animation:none}

/* ---------- wet glass, shared ---------- */
/* drops sitting on the glass: three offset grids of tiny lenses read as random */
.cmt__glass::before,.card::before,.composer::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='140'%3E%3Cellipse cx='0.0' cy='128.9' rx='0.62' ry='1.06' fill='%23d6e4ff' fill-opacity='0.26'/%3E%3Ccircle cx='-0.2' cy='128.5' r='0.26' fill='%23fff' fill-opacity='0.74'/%3E%3Cellipse cx='59.3' cy='105.3' rx='1.52' ry='1.52' fill='%23d6e4ff' fill-opacity='0.25'/%3E%3Ccircle cx='58.8' cy='104.7' r='0.64' fill='%23fff' fill-opacity='0.77'/%3E%3Cellipse cx='147.0' cy='33.9' rx='0.72' ry='0.72' fill='%23d6e4ff' fill-opacity='0.25'/%3E%3Ccircle cx='146.7' cy='33.6' r='0.30' fill='%23fff' fill-opacity='0.57'/%3E%3Cellipse cx='123.1' cy='65.5' rx='2.09' ry='2.09' fill='%23d6e4ff' fill-opacity='0.16'/%3E%3Ccircle cx='122.4' cy='64.7' r='0.88' fill='%23fff' fill-opacity='0.73'/%3E%3Cellipse cx='166.2' cy='96.4' rx='1.22' ry='1.22' fill='%23d6e4ff' fill-opacity='0.29'/%3E%3Ccircle cx='165.8' cy='95.9' r='0.51' fill='%23fff' fill-opacity='0.87'/%3E%3Cellipse cx='67.0' cy='47.0' rx='1.79' ry='1.79' fill='%23d6e4ff' fill-opacity='0.16'/%3E%3Ccircle cx='66.4' cy='46.3' r='0.75' fill='%23fff' fill-opacity='0.65'/%3E%3Cellipse cx='77.1' cy='41.3' rx='2.15' ry='2.15' fill='%23d6e4ff' fill-opacity='0.26'/%3E%3Ccircle cx='76.3' cy='40.4' r='0.90' fill='%23fff' fill-opacity='0.86'/%3E%3Cellipse cx='10.6' cy='38.3' rx='1.03' ry='1.03' fill='%23d6e4ff' fill-opacity='0.21'/%3E%3Ccircle cx='10.2' cy='37.9' r='0.43' fill='%23fff' fill-opacity='0.62'/%3E%3Cellipse cx='163.6' cy='7.7' rx='0.71' ry='0.71' fill='%23d6e4ff' fill-opacity='0.25'/%3E%3Ccircle cx='163.4' cy='7.4' r='0.30' fill='%23fff' fill-opacity='0.87'/%3E%3Cellipse cx='92.7' cy='23.2' rx='0.76' ry='0.76' fill='%23d6e4ff' fill-opacity='0.20'/%3E%3Ccircle cx='92.4' cy='22.9' r='0.32' fill='%23fff' fill-opacity='0.70'/%3E%3Cellipse cx='59.9' cy='74.4' rx='1.15' ry='1.15' fill='%23d6e4ff' fill-opacity='0.29'/%3E%3Ccircle cx='59.5' cy='73.9' r='0.48' fill='%23fff' fill-opacity='0.71'/%3E%3Cellipse cx='155.3' cy='88.9' rx='1.20' ry='1.20' fill='%23d6e4ff' fill-opacity='0.22'/%3E%3Ccircle cx='154.9' cy='88.4' r='0.50' fill='%23fff' fill-opacity='0.79'/%3E%3Cellipse cx='169.1' cy='55.5' rx='1.39' ry='1.39' fill='%23d6e4ff' fill-opacity='0.23'/%3E%3Ccircle cx='168.6' cy='54.9' r='0.58' fill='%23fff' fill-opacity='0.67'/%3E%3Cellipse cx='59.5' cy='54.8' rx='1.65' ry='1.65' fill='%23d6e4ff' fill-opacity='0.16'/%3E%3Ccircle cx='58.9' cy='54.1' r='0.69' fill='%23fff' fill-opacity='0.84'/%3E%3Cellipse cx='14.0' cy='57.0' rx='0.53' ry='0.90' fill='%23d6e4ff' fill-opacity='0.30'/%3E%3Ccircle cx='13.8' cy='56.6' r='0.22' fill='%23fff' fill-opacity='0.63'/%3E%3Cellipse cx='113.8' cy='20.2' rx='0.84' ry='0.84' fill='%23d6e4ff' fill-opacity='0.16'/%3E%3Ccircle cx='113.5' cy='19.9' r='0.35' fill='%23fff' fill-opacity='0.87'/%3E%3Cellipse cx='159.2' cy='124.7' rx='1.95' ry='1.95' fill='%23d6e4ff' fill-opacity='0.26'/%3E%3Ccircle cx='158.5' cy='123.9' r='0.82' fill='%23fff' fill-opacity='0.65'/%3E%3Cellipse cx='1.9' cy='34.8' rx='0.51' ry='0.86' fill='%23d6e4ff' fill-opacity='0.24'/%3E%3Ccircle cx='1.7' cy='34.5' r='0.21' fill='%23fff' fill-opacity='0.63'/%3E%3Cellipse cx='133.4' cy='68.5' rx='1.33' ry='1.33' fill='%23d6e4ff' fill-opacity='0.28'/%3E%3Ccircle cx='132.9' cy='68.0' r='0.56' fill='%23fff' fill-opacity='0.63'/%3E%3Cellipse cx='67.3' cy='125.2' rx='0.52' ry='0.52' fill='%23d6e4ff' fill-opacity='0.14'/%3E%3Ccircle cx='67.1' cy='125.0' r='0.22' fill='%23fff' fill-opacity='0.87'/%3E%3Cellipse cx='114.6' cy='129.1' rx='0.50' ry='0.50' fill='%23d6e4ff' fill-opacity='0.17'/%3E%3Ccircle cx='114.4' cy='128.9' r='0.21' fill='%23fff' fill-opacity='0.89'/%3E%3Cellipse cx='101.8' cy='95.1' rx='0.60' ry='0.60' fill='%23d6e4ff' fill-opacity='0.17'/%3E%3Ccircle cx='101.6' cy='94.9' r='0.25' fill='%23fff' fill-opacity='0.75'/%3E%3Cellipse cx='9.4' cy='107.7' rx='1.37' ry='1.37' fill='%23d6e4ff' fill-opacity='0.22'/%3E%3Ccircle cx='8.9' cy='107.2' r='0.57' fill='%23fff' fill-opacity='0.56'/%3E%3Cellipse cx='19.9' cy='128.7' rx='0.52' ry='0.52' fill='%23d6e4ff' fill-opacity='0.28'/%3E%3Ccircle cx='19.7' cy='128.5' r='0.22' fill='%23fff' fill-opacity='0.56'/%3E%3Cellipse cx='159.0' cy='120.6' rx='2.37' ry='2.37' fill='%23d6e4ff' fill-opacity='0.26'/%3E%3Ccircle cx='158.2' cy='119.7' r='1.00' fill='%23fff' fill-opacity='0.70'/%3E%3Cellipse cx='44.7' cy='101.9' rx='1.94' ry='1.94' fill='%23d6e4ff' fill-opacity='0.18'/%3E%3Ccircle cx='44.0' cy='101.1' r='0.82' fill='%23fff' fill-opacity='0.69'/%3E%3Cellipse cx='159.7' cy='78.2' rx='0.69' ry='0.69' fill='%23d6e4ff' fill-opacity='0.26'/%3E%3Ccircle cx='159.5' cy='77.9' r='0.29' fill='%23fff' fill-opacity='0.67'/%3E%3Cellipse cx='130.5' cy='59.2' rx='0.55' ry='0.55' fill='%23d6e4ff' fill-opacity='0.30'/%3E%3Ccircle cx='130.3' cy='59.0' r='0.23' fill='%23fff' fill-opacity='0.90'/%3E%3Cellipse cx='113.8' cy='122.1' rx='2.08' ry='3.53' fill='%23d6e4ff' fill-opacity='0.24'/%3E%3Ccircle cx='113.1' cy='120.7' r='0.87' fill='%23fff' fill-opacity='0.60'/%3E%3Cellipse cx='89.5' cy='78.0' rx='1.57' ry='1.57' fill='%23d6e4ff' fill-opacity='0.22'/%3E%3Ccircle cx='88.9' cy='77.4' r='0.66' fill='%23fff' fill-opacity='0.62'/%3E%3C/svg%3E");
  background-size:180px 140px;
  background-position:var(--dx,0px) var(--dy,0px);
}

/* ---------- right rail ---------- */
.rail{position:fixed;top:var(--pad);right:var(--pad);z-index:30;width:calc(var(--rail-w) - var(--pad) - 6px);
  display:flex;flex-direction:column;gap:12px;max-height:calc(100% - 2 * var(--pad))}
.card{
  position:relative;isolation:isolate;border-radius:18px;padding:14px;
  background:
    linear-gradient(112deg,transparent 30%,rgba(226,236,255,calc(var(--lit) * .1)) 48%,transparent 64%),
    linear-gradient(168deg,rgba(168,192,232,.12),rgba(36,48,70,.2) 38%,rgba(8,11,17,.62));
  border:1px solid rgba(196,214,245,calc(.12 + var(--lit) * .4));
  backdrop-filter:blur(16px) saturate(1.25);-webkit-backdrop-filter:blur(16px) saturate(1.25);
  box-shadow:inset 0 1px 0 rgba(230,240,255,calc(.1 + var(--lit) * .34)),0 24px 54px -28px rgba(0,0,0,.92),0 0 34px -12px rgba(170,200,255,calc(var(--lit) * .45));
  opacity:0;transform:translateX(16px);animation:railIn .9s var(--out) .55s forwards;
}
.card::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;opacity:.55}
.card + .card{animation-delay:.72s}

/* identity */
.idc__row{display:flex;align-items:center;gap:12px}
.idc__avatar{position:relative;flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  background:#1b1f29;color:#8f97a8;border:1px solid rgba(196,214,245,.2)}
.idc__avatar svg{width:23px;height:23px;fill:currentColor}
.idc__avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.idc__presence{position:absolute;right:-2px;bottom:-2px;width:14px;height:14px;border-radius:50%;background:#6b6f78;border:3px solid #10131a;transition:background .3s,box-shadow .3s}
.idc[data-state="online"] .idc__presence{background:var(--good);box-shadow:0 0 8px var(--good)}
.idc[data-state="idle"] .idc__presence{background:var(--idle)}
.idc[data-state="dnd"] .idc__presence{background:var(--dnd)}
.idc__who{min-width:0;display:flex;flex-direction:column;gap:3px}
.idc__name{font-weight:700;font-size:14.5px;color:var(--ice);letter-spacing:.01em}
.idc__status{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--ice-2);min-height:1.4em}
#statusText.is-typing::after{content:"";display:inline-block;width:6px;height:1em;margin-left:2px;vertical-align:-2px;background:var(--volt);animation:caret .8s steps(1) infinite}
.status-dot{position:relative;flex:none;width:7px;height:7px;border-radius:50%;background:var(--good)}
.status-dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--good);animation:ping 2.4s var(--out) infinite}
.idc__act{font-size:10.5px;color:var(--ice-4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.copy-btn{
  margin-top:12px;width:100%;display:flex;align-items:center;justify-content:center;gap:8px;padding:9px;border-radius:11px;
  background:rgba(88,101,242,.16);border:1px solid rgba(88,101,242,.45);color:#cdd2ff;
  font-size:12px;font-weight:700;letter-spacing:.03em;
  transition:background .25s,border-color .25s,color .25s,transform .2s var(--out);
}
.copy-btn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}
.copy-btn:hover{background:rgba(88,101,242,.3);color:#fff;transform:translateY(-1px)}
.copy-btn.is-copied{background:rgba(52,209,127,.18);border-color:rgba(52,209,127,.5);color:#c2f5d9}

/* trips: one route, one stop after another — stamped past, the next one, the road ahead */
.idc{flex:none}
.rail .trips{display:flex;flex-direction:column;min-height:0}
.trips__head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px}
.trips__title{margin:0;display:inline-flex;align-items:center;gap:8px;white-space:nowrap;font-size:10px;font-weight:400;letter-spacing:.2em;text-transform:uppercase;color:var(--ice-3)}
.trips__title svg{flex:none;width:13px;height:13px;fill:var(--warm);transform:rotate(45deg)}
.trips__tag{flex:none;font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--warm);padding:3px 7px;border-radius:999px;border:1px solid rgba(255,217,168,.3);background:rgba(255,217,168,.06)}
.trips__scroll{min-height:0;overflow-y:auto;overscroll-behavior:contain;margin:0 -12px;padding:4px 12px 6px;scrollbar-width:none}
.trips__scroll::-webkit-scrollbar{display:none}
.trips__empty{color:var(--ice-3);font-size:12px;padding:6px 2px}

.route{list-style:none;margin:0;padding:0}
.stop{--ny:50%;position:relative;display:flex;align-items:center;gap:9px;min-height:36px;padding-left:32px}
.stop + .stop{margin-top:6px}
.stop__node{position:absolute;left:0;top:var(--ny);z-index:1;width:22px;height:22px;margin-top:-11px;border-radius:50%;display:grid;place-items:center;
  background:rgba(11,14,20,.92);border:1px solid rgba(196,214,245,.26);color:var(--ice-3);
  font:600 8px/1 var(--mono);letter-spacing:.02em;transition:border-color .3s,color .3s,box-shadow .3s,background .3s}
.stop__node svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
/* the line between stops: each stop draws its own top and bottom half, so heights never need measuring */
.stop::before,.stop::after{content:"";position:absolute;left:10.5px;width:1px;pointer-events:none;
  background:repeating-linear-gradient(180deg,rgba(206,222,250,.42) 0 3px,transparent 3px 7px);background-size:1px 14px;
  animation:march 1.1s linear infinite}
.stop::before{top:-3px;height:calc(var(--ny) - 8px)}
.stop::after{top:calc(var(--ny) + 11px);bottom:-3px}
.stop:first-child::before,.stop:last-child::after{display:none}
/* travelled: solid ink */
.stop--done::before,.stop--done:not(.is-last-done)::after,.stop--more::after{background:rgba(126,224,183,.5);animation:none}
.stop--more::before{display:none}
.stop__code{flex:none;width:34px;font:700 14px/1 var(--display);letter-spacing:.06em;color:var(--ice-3)}
.stop__main{min-width:0;flex:1;display:flex;flex-direction:column;gap:1px}
.stop__place{font-weight:700;font-size:12.5px;color:var(--ice);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stop__when{font-size:10px;color:var(--ice-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stop__when b{font-weight:400;color:var(--warm)}

/* done: a check on the route, a passport stamp on the right */
.stop--done .stop__node{border-color:rgba(126,224,183,.65);background:rgba(16,36,30,.94);color:#7ee0b7;box-shadow:0 0 10px -3px rgba(126,224,183,.6)}
.stop--done .stop__place{color:var(--ice-2)}
.vstamp{
  --ink:#7ee0b7;
  flex:none;display:inline-flex;flex-direction:column;align-items:center;gap:1px;padding:4px 8px 3px;border-radius:7px;
  border:1.5px solid var(--ink);color:var(--ink);
  box-shadow:inset 0 0 0 1.5px rgba(8,10,14,.75),inset 0 0 0 2.6px var(--ink),0 0 14px -6px var(--ink);
  font:700 7px/1.2 var(--mono);letter-spacing:.18em;text-transform:uppercase;
  transform:rotate(var(--tilt,-6deg));cursor:default;
  transition:transform .35s var(--out),box-shadow .35s;
  will-change:transform; /* own layer: no stale paint left behind after the slam (Chromium + blurred card) */
}
.vstamp b{font:800 11px/1.05 var(--display);letter-spacing:.14em}
.vstamp small{font-size:7px;letter-spacing:.12em;opacity:.88}
.stop--done:hover .vstamp{transform:rotate(0deg) scale(1.08);box-shadow:inset 0 0 0 1.5px rgba(8,10,14,.75),inset 0 0 0 2.6px var(--ink),0 0 22px -4px var(--ink)}
.ink-green{--ink:#7ee0b7}
.ink-red{--ink:#ff8f85}
.ink-blue{--ink:#94c2ff}
.ink-violet{--ink:#c9adff}
.ink-amber{--ink:#ffcf7d}
.stop--more .stop__node{border-color:rgba(126,224,183,.5);color:#7ee0b7}
.stop__morebtn{font-size:10.5px;letter-spacing:.06em;color:var(--ice-3);padding:4px 0;transition:color .2s}
.stop__morebtn:hover{color:var(--ice)}

/* the next one: a boarding pass with a light running round its edge */
.stop--next{--ny:22px;align-items:flex-start}
.stop--done + .stop--next{margin-top:18px}
.stop--done + .stop--next::before{top:-9px;height:calc(var(--ny) - 2px)}
.stop.is-last-done::after{bottom:-9px}
.stop--next .stop__node{border-color:rgba(255,217,168,.8);background:rgba(36,27,15,.95)}
.stop--next .stop__node i{width:8px;height:8px;border-radius:50%;background:var(--warm);box-shadow:0 0 10px var(--warm)}
.stop--next .stop__node::before,.stop--next .stop__node::after{content:"";position:absolute;inset:-1px;border-radius:50%;border:1px solid rgba(255,217,168,.65);animation:radar 2.6s var(--out) infinite}
.stop--next .stop__node::after{animation-delay:1.3s}
.stop__plane{position:absolute;left:4px;top:-22px;z-index:2;width:14px;height:14px;color:var(--warm);animation:transit 3.2s ease-in-out infinite}
.stop__plane svg{display:block;width:100%;height:100%;fill:currentColor;transform:rotate(180deg);filter:drop-shadow(0 0 6px rgba(255,217,168,.85))}
.stop__pass{position:relative;isolation:isolate;flex:1;min-width:0;border-radius:14px;
  background:linear-gradient(135deg,rgba(255,217,168,.1),rgba(255,217,168,.016))}
.stop__pass::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;padding:1px;pointer-events:none;
  background:conic-gradient(from var(--ang),transparent 0 50%,rgba(255,217,168,.9) 62%,rgba(201,163,91,.35) 72%,transparent 82% 100%),
             linear-gradient(rgba(255,217,168,.16),rgba(255,217,168,.16));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;
  animation:spin 5s linear infinite}
/* ticket layout: code + place on top, a tear line, then when / countdown / note / join */
.stop__passhead{display:flex;align-items:center;gap:9px;padding:10px 12px 9px}
.stop__passcode{flex:none;font:700 24px/1 var(--display);letter-spacing:.06em;color:var(--warm);text-shadow:0 0 18px rgba(255,217,168,.35)}
.stop__passhead .stop__place{flex:1;min-width:0;font-size:15px}
.stop__badge{flex:none;font-size:8px;letter-spacing:.2em;text-transform:uppercase;color:#1a1105;background:var(--warm);padding:2px 6px 2px 7px;border-radius:999px;box-shadow:0 0 14px -3px rgba(255,217,168,.8)}
.stop__passbody{padding:10px 12px 12px;border-top:1px dashed rgba(255,217,168,.26)}
.stop__passrow{display:flex;align-items:flex-end;justify-content:space-between;gap:10px}
.stop__passrow .stop__when{font-size:10.5px;letter-spacing:.03em;padding-bottom:2px}
.stop__countdown{flex:none;display:inline-flex;align-items:baseline;gap:5px;color:var(--warm);white-space:nowrap}
.stop__countdown b{font:700 28px/.9 var(--display);letter-spacing:.02em;text-shadow:0 0 18px rgba(255,217,168,.5)}
.stop__countdown small{font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,217,168,.78)}
.stop__pnote{margin-top:8px;font:italic 400 13.5px/1.3 var(--serif);color:var(--bone-2)}
.stop__foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:11px}
.stop__foot .stop__joined{white-space:nowrap}
.stop__joined{display:flex;align-items:center;gap:7px;font-size:10px;letter-spacing:.04em;color:var(--ice-3)}
.dots{display:inline-flex}
.dots i{width:12px;height:12px;margin-left:-4px;border-radius:50%;border:1.5px solid #15151b;background:linear-gradient(135deg,#ffd9a8,#c9a35b)}
.dots i:first-child{margin-left:0}
.dots i:nth-child(2){background:linear-gradient(135deg,#a9dcff,#5865f2)}
.dots i:nth-child(3){background:linear-gradient(135deg,#bdf6d4,#34d17f)}

/* the road ahead: hover a stop and its note slides open */
.stop--up{padding-top:5px;padding-bottom:5px;padding-right:2px;border-radius:12px;transition:background .3s}
.stop--up::before{top:-3px}
.stop--up:hover,.stop--up:focus-within{background:rgba(196,214,245,.055)}
.stop--up .stop__node{border-style:dashed}
.stop--up:hover .stop__node,.stop--up:focus-within .stop__node{border-style:solid;border-color:rgba(255,217,168,.75);color:var(--warm);box-shadow:0 0 12px -2px rgba(255,217,168,.55)}
.stop--up:hover .stop__code{color:var(--warm)}
.stop__note{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .45s var(--out),opacity .3s}
.stop__note > span{overflow:hidden;font:italic 400 12.5px/1.3 var(--serif);color:var(--bone-2)}
.stop--up:hover .stop__note,.stop--up:focus-within .stop__note{grid-template-rows:1fr;opacity:1}
.stop--up:hover .stop__note > span,.stop--up:focus-within .stop__note > span{padding-top:3px}
.stop--skel{height:44px;border-radius:12px;background:linear-gradient(90deg,rgba(255,255,255,.03),rgba(255,255,255,.08),rgba(255,255,255,.03));background-size:200% 100%;animation:shimmer 1.4s linear infinite}
.stop--skel::before,.stop--skel::after{display:none}
.stop--skel:nth-child(2){height:96px}

/* join buttons */
.join-btn{
  flex:none;display:inline-flex;align-items:center;gap:6px;padding:6px 11px 6px 12px;border-radius:999px;
  font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  background:transparent;color:var(--ice);border:1px solid rgba(196,214,245,.24);
  transition:transform .25s var(--out),box-shadow .25s,background .25s,color .25s,border-color .25s;
}
.join-btn svg{width:11px;height:11px;fill:currentColor;transform:rotate(45deg);transition:transform .45s var(--out)}
.join-btn:hover{background:rgba(255,217,168,.1);border-color:rgba(255,217,168,.6);color:var(--warm);transform:translateY(-1px)}
.join-btn:hover svg{transform:rotate(45deg) translate(2px,-5px)}
.join-btn--big{padding:8px 15px 8px 16px;background:var(--bone);color:#0b0b0b;border-color:var(--bone)}
.join-btn--big:hover{background:#fff;color:#0b0b0b;border-color:#fff;box-shadow:0 10px 24px -10px rgba(255,217,168,.85)}
.join-btn.is-in{background:rgba(52,209,127,.14);color:#a8f1c8;border-color:rgba(52,209,127,.45);box-shadow:none}
.join-btn.is-in svg{transform:none;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}

/* first render: the route draws itself, one stop after another */
.route.is-first .stop{animation:stopIn .7s var(--out) calc(.95s + var(--i) * .13s) backwards}
.route.is-first .stop__node{animation:nodePop .55s cubic-bezier(.2,1.6,.4,1) calc(1.05s + var(--i) * .13s) backwards}
.route.is-first .stop::before,.route.is-first .stop::after{transform-origin:top;animation:segIn .3s ease-out calc(.98s + var(--i) * .13s) backwards,march 1.1s linear infinite}
.route.is-first .stop--done::before,.route.is-first .stop--done:not(.is-last-done)::after{animation:segIn .3s ease-out calc(.98s + var(--i) * .13s) backwards}
.route.is-first .vstamp{animation:stampSlam .6s cubic-bezier(.2,1.6,.4,1) calc(1.3s + var(--i) * .13s) backwards}

/* ---------- the floating wall (left) ---------- */
.wall{position:fixed;top:0;left:0;bottom:0;z-index:40;width:var(--wall-w);display:flex;flex-direction:column;pointer-events:none}
.feed{
  pointer-events:auto;flex:1;overflow-y:auto;overflow-x:hidden;
  padding:calc(var(--pad) + 64px) var(--pad) 12px;
  display:flex;flex-direction:column;align-items:flex-start;gap:10px;
  scrollbar-width:none;-ms-overflow-style:none;
  /* chips drift up and dissolve before they reach the sound buttons */
  -webkit-mask:linear-gradient(180deg,transparent 0,transparent calc(var(--pad) + 30px),#000 calc(var(--pad) + 64px),#000 calc(100% - 26px),transparent 100%);
          mask:linear-gradient(180deg,transparent 0,transparent calc(var(--pad) + 30px),#000 calc(var(--pad) + 64px),#000 calc(100% - 26px),transparent 100%);
}
.feed::-webkit-scrollbar{display:none}
.feed__empty{margin:auto;text-align:center;color:var(--ice-3);align-self:center}
.feed__empty p{margin:.2em 0}
.feed__empty-sub{font-size:12px;color:var(--ice-4)}

/* one message = one pane of wet glass */
.cmt{
  position:relative;isolation:isolate;flex:none;width:fit-content;max-width:min(300px,100%);
  padding:11px 14px 12px;border-radius:16px;
  background:
    linear-gradient(112deg,transparent 28%,rgba(226,236,255,calc(var(--lit) * .2)) 47%,transparent 64%),
    linear-gradient(168deg,rgba(168,192,232,.15),rgba(44,58,82,.2) 36%,rgba(8,11,17,.52));
  background-color:rgba(9,12,18,.16);
  border:1px solid rgba(196,214,245,calc(.13 + var(--lit) * .5));
  backdrop-filter:blur(11px) saturate(1.3);-webkit-backdrop-filter:blur(11px) saturate(1.3);
  box-shadow:
    inset 0 1px 0 rgba(230,240,255,calc(.13 + var(--lit) * .45)),
    inset 0 -16px 24px -18px rgba(0,0,0,.6),
    0 14px 34px -18px rgba(0,0,0,.9),
    0 0 28px -8px rgba(170,200,255,calc(var(--lit) * .55));
  transition:transform .35s var(--out),background-color .6s;
  /* "backwards" fill: once the entrance ends the element's own styles (incl. :hover) take over again */
  animation:condense .9s var(--out) backwards;
}
/* the glass layer clips the drops, so the pane itself can let its hover toolbar float over the edge */
.cmt__glass{position:absolute;inset:0;z-index:-1;border-radius:inherit;overflow:hidden;pointer-events:none}
.cmt__glass::before{content:"";position:absolute;inset:0;opacity:.85}
/* now and then a drop runs down the pane */
.cmt__glass::after{content:"";position:absolute;top:0;left:var(--drip-x,70%);width:1.5px;height:42%;border-radius:2px;
  background:linear-gradient(180deg,transparent,rgba(196,216,255,.25) 55%,rgba(240,246,255,.8));
  opacity:0;transform:translateY(-110%);
  animation:drip var(--drip-t,12s) cubic-bezier(.5,0,.75,.35) var(--drip-d,0s) infinite}
.cmt:hover{transform:translateX(3px)}
.cmt.is-new{animation:cmtArrive .9s var(--out) backwards}
.cmt.is-struck{animation:cmtStruck 1.2s var(--out) backwards}
.cmt.is-out{animation:cmtOut .42s var(--io) both}
/* last year's messages: fogged up — hover wipes the glass */
.cmt.is-old{background-color:rgba(190,206,232,.08)}
.cmt.is-old .cmt__text{color:rgba(214,226,244,.6);filter:blur(.4px);transition:filter .6s,color .6s}
.cmt.is-old:hover{background-color:rgba(9,12,18,.16)}
.cmt.is-old:hover .cmt__text{filter:none;color:var(--ice)}
.cmt__head{display:flex;align-items:baseline;gap:8px;margin-bottom:5px}
.cmt__name{font-size:12.5px;font-weight:700;letter-spacing:.01em;max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:hsl(var(--hue,212) 85% 83%);text-shadow:0 0 14px hsl(var(--hue,212) 90% 70% / .35)}
.cmt__name--anon{color:var(--ice-3);font-weight:400;font-style:italic;text-shadow:none}
.cmt__time{margin-left:14px;font-size:10px;color:var(--ice-4);letter-spacing:.05em;white-space:nowrap}
.cmt__text{font-size:13.5px;line-height:1.5;color:var(--ice);white-space:pre-wrap;word-break:break-word}
.cmt__sticker{display:block;width:48px;height:48px;margin:6px 2px 2px;transform:rotate(var(--tilt,-4deg));
  transition:transform .4s cubic-bezier(.2,1.6,.4,1);animation:stickIn .6s var(--out) .15s backwards}
.cmt:hover .cmt__sticker{transform:rotate(0deg) scale(1.1)}
/* replies: a reply button on hover, a quote of what's being answered, a count on the original */
/* hover toolbar: floats on the pane's top-right edge, takes no room */
.cmt__acts{position:absolute;top:-13px;right:10px;z-index:2;display:flex;gap:1px;padding:2px;border-radius:999px;
  background:linear-gradient(180deg,rgba(26,33,46,.96),rgba(12,15,21,.97));border:1px solid rgba(196,214,245,.26);
  box-shadow:0 10px 22px -10px rgba(0,0,0,.95);
  opacity:0;transform:translateY(5px) scale(.88);pointer-events:none;transition:opacity .2s,transform .35s cubic-bezier(.2,1.5,.4,1)}
.cmt:hover .cmt__acts,.cmt:focus-within .cmt__acts,.cmt.is-reacting .cmt__acts,.cmt.is-target .cmt__acts{opacity:1;transform:none;pointer-events:auto}
.cmt__reply,.cmt__react{width:28px;height:24px;border-radius:999px;display:grid;place-items:center;color:var(--ice-2);transition:background .2s,color .2s,transform .25s cubic-bezier(.2,1.6,.4,1)}
.cmt__reply:hover,.cmt__react:hover,.cmt.is-reacting .cmt__react{background:rgba(214,228,255,.14);color:#fff}
.cmt__reply:hover svg,.cmt__react:hover svg{transform:scale(1.15)}
.cmt__reply svg,.cmt__react svg{transition:transform .25s cubic-bezier(.2,1.6,.4,1)}
.cmt__reply svg,.cmt__count svg,.composer__reply svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cmt__reply svg{width:13px;height:13px}
.cmt__count{flex:none;align-self:center;display:inline-flex;align-items:center;gap:3px;margin-left:8px;font-size:10px;color:var(--volt);cursor:default}
.cmt__count svg{width:11px;height:11px}
.cmt__quote{display:flex;flex-direction:column;gap:1px;width:100%;margin:1px 0 7px;padding:5px 9px 6px;border-radius:8px;text-align:left;
  background:rgba(214,228,255,.06);border-left:2px solid hsl(var(--hue,212) 80% 74% / .75);transition:background .2s}
.cmt__quote:hover{background:rgba(214,228,255,.12)}
.cmt__qname{font-size:10.5px;font-weight:700;color:hsl(var(--hue,212) 85% 83%)}
.cmt__qname--anon{color:var(--ice-3);font-style:italic;font-weight:400}
.cmt__qtext{max-width:240px;font-size:11.5px;line-height:1.4;color:var(--ice-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cmt__quote.is-gone{cursor:default;border-left-color:rgba(214,228,255,.2)}
.cmt__quote.is-gone .cmt__qtext{font-style:italic;color:var(--ice-4)}
.cmt.is-target{border-color:rgba(160,198,255,.75);box-shadow:inset 0 1px 0 rgba(230,240,255,.3),0 0 0 1px rgba(160,198,255,.35),0 0 26px -6px rgba(150,190,255,.75),0 14px 34px -18px rgba(0,0,0,.9)}

/* stickers: die-cut white edge + shadow */
.stk{display:inline-block;line-height:0;
  filter:drop-shadow(1.7px 0 0 #fff) drop-shadow(-1.7px 0 0 #fff) drop-shadow(0 1.7px 0 #fff) drop-shadow(0 -1.7px 0 #fff) drop-shadow(0 5px 6px rgba(0,0,0,.5))}
.stk svg{display:block;width:100%;height:100%}

/* ---------- the composer: its own pane, live wire round the edge while you type ---------- */
.composer{
  pointer-events:auto;position:relative;isolation:isolate;align-self:flex-start;
  width:min(318px,calc(100% - 2 * var(--pad)));margin:4px var(--pad) calc(var(--pad) * .6 + env(safe-area-inset-bottom));
  padding:12px;border-radius:18px;
  background:
    linear-gradient(112deg,transparent 30%,rgba(226,236,255,calc(var(--lit) * .14)) 48%,transparent 64%),
    linear-gradient(168deg,rgba(168,192,232,.15),rgba(36,48,70,.22) 40%,rgba(7,10,15,.64));
  border:1px solid rgba(196,214,245,calc(.17 + var(--lit) * .45));
  backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);
  box-shadow:inset 0 1px 0 rgba(230,240,255,calc(.14 + var(--lit) * .4)),0 18px 44px -22px rgba(0,0,0,.92),0 0 30px -10px rgba(170,200,255,calc(var(--lit) * .5));
  transition:box-shadow .4s;
}
.composer::before{content:"";position:absolute;inset:-1px;z-index:-1;border-radius:inherit;padding:1px;pointer-events:none;opacity:0;
  background:conic-gradient(from var(--ang),transparent 0 38%,rgba(150,190,255,.85) 50%,#fff 54%,rgba(150,190,255,.55) 60%,transparent 72% 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;
  transition:opacity .45s,filter .25s;animation:spin 3s linear infinite paused}
.composer::after{content:"";position:absolute;inset:0;z-index:-2;border-radius:inherit;pointer-events:none;opacity:.6}
.composer:focus-within::before{opacity:1;animation-play-state:running}
.composer:focus-within{box-shadow:inset 0 1px 0 rgba(230,240,255,.2),0 18px 44px -22px rgba(0,0,0,.92),0 0 40px -14px rgba(150,190,255,.6)}
.composer.is-zap::before{opacity:1;filter:brightness(1.7) drop-shadow(0 0 5px rgba(170,205,255,.95));transition:opacity .04s,filter .04s}
.composer__top{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.composer__name,.composer__text{
  width:100%;border:1px solid rgba(196,214,245,.16);background:rgba(220,232,255,.035);color:var(--ice);caret-color:var(--volt);
  transition:border-color .25s,background .25s,box-shadow .25s;
}
.composer__name{flex:1;min-width:0;padding:8px 11px;border-radius:9px;font:400 12.5px var(--mono)}
.composer__text{display:block;max-height:140px;padding:10px 12px;border-radius:11px;resize:none;font:400 13.5px/1.5 var(--mono)}
.composer__name::placeholder,.composer__text::placeholder{color:var(--ice-4)}
.composer__name:focus,.composer__text:focus{outline:none;border-color:rgba(160,198,255,.55);background:rgba(220,232,255,.06);box-shadow:0 0 0 3px rgba(130,175,255,.1)}
.composer__box{position:relative}
/* the hint inside the empty box: short lines that roll up one after another */
.composer__ghost{position:absolute;left:13px;right:12px;top:11px;height:21px;overflow:hidden;pointer-events:none;
  font:400 13.5px/1.5 var(--mono);color:var(--ice-4);transition:opacity .25s}
.composer__ghost span{position:absolute;left:0;top:0;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  opacity:0;transform:translateY(100%);transition:transform .6s var(--out),opacity .45s}
.composer__ghost span.is-in{opacity:1;transform:none}
.composer__ghost span.is-out{opacity:0;transform:translateY(-100%)}
.composer__ghost.is-hidden{opacity:0}
.composer__box:has(.composer__sticker:not([hidden])) .composer__ghost{right:52px}
/* replying to someone */
.composer__reply{display:flex;align-items:center;gap:9px;margin-bottom:8px;padding:7px 7px 7px 10px;border-radius:10px;
  background:rgba(214,228,255,.06);border-left:2px solid var(--volt);animation:popIn .3s var(--out)}
.composer__reply svg{flex:none;width:14px;height:14px;color:var(--volt)}
.composer__reply p{flex:1;min-width:0;margin:0;display:flex;flex-direction:column;font-size:11px;line-height:1.4;color:var(--ice-3)}
.composer__reply b{color:var(--ice)}
#replyText{color:var(--ice-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.composer__reply button{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:10px;color:var(--ice-3);transition:background .2s,color .2s}
.composer__reply button:hover{background:rgba(214,228,255,.1);color:var(--ice)}
.composer.is-locked .composer__reply{display:none}
.composer__sticker{position:absolute;right:10px;top:6px;width:34px;height:34px;animation:stickIn .45s var(--out)}
.composer__sticker .stk{width:100%;height:100%}
.composer__sticker button{position:absolute;right:-8px;top:-8px;width:17px;height:17px;border-radius:50%;display:grid;place-items:center;
  font-size:9px;background:#0b0e14;color:#fff;border:1px solid rgba(196,214,245,.3);line-height:1}
.composer__bar{display:flex;align-items:center;justify-content:space-between;margin-top:9px}
.composer__tools{display:flex;align-items:center;gap:6px}
.tool{width:33px;height:33px;border-radius:9px;display:grid;place-items:center;color:var(--ice-2);border:1px solid rgba(196,214,245,.16);background:rgba(220,232,255,.03);transition:background .2s,color .2s,border-color .2s,transform .2s var(--out)}
.tool svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tool:hover{background:rgba(220,232,255,.09);color:var(--ice);transform:translateY(-1px)}
.tool[aria-expanded="true"]{background:var(--ice);color:#0b0e14;border-color:var(--ice)}
.composer__counter{margin-left:4px;font-size:10.5px;color:var(--ice-4);font-variant-numeric:tabular-nums}
.composer__counter.is-low{color:#ff8a84}
.send{position:relative;display:inline-flex;align-items:center;gap:7px;padding:8px 15px 8px 16px;border-radius:999px;overflow:hidden;
  background:linear-gradient(180deg,#f6f8ff,#d3def3);color:#0a0d14;
  font-weight:700;font-size:12.5px;letter-spacing:.03em;box-shadow:0 8px 22px -12px rgba(150,190,255,.9);
  transition:transform .2s var(--out),box-shadow .25s,opacity .2s}
.send svg{width:14px;height:14px;fill:currentColor}
.send:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 10px 26px -10px rgba(150,190,255,1)}
.send:hover:not(:disabled) svg{animation:zap .5s steps(2) 2}
.send:disabled{opacity:.4;cursor:not-allowed;transform:none}
/* bolts: messages left today */
.quota{flex:none;display:inline-flex;align-items:center;gap:4px;padding:0 3px;cursor:default}
.quota i{position:relative;width:9px;height:15px;filter:drop-shadow(0 0 4px rgba(150,190,255,.95));transition:filter .5s}
.quota i::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#fff,#a9c8ff);
  clip-path:polygon(62% 0,0 58%,44% 58%,30% 100%,100% 38%,57% 38%);transition:background .5s}
.quota i.is-spent{filter:none}
.quota i.is-spent::before{background:rgba(214,228,255,.17)}
.quota i.is-burn{animation:burn .9s var(--out)}
.composer__note{margin:7px 0 0;min-height:14px;font-size:11px;letter-spacing:.03em;color:var(--ice-3)}
.composer__note:empty{margin:0;min-height:0}
.composer__note.is-error{color:#ff8a84}
.composer__note.is-ok{color:#8ff0bd}
/* out of messages for today */
.composer__lock{display:flex;align-items:center;gap:12px;padding:2px 2px 0}
.composer__lock svg{flex:none;width:26px;height:34px;fill:rgba(214,228,255,.16);stroke:rgba(214,228,255,.45);stroke-width:1.2;stroke-linejoin:round}
.composer__lock p{margin:0;display:flex;flex-direction:column;gap:2px;font-size:11.5px;line-height:1.45;color:var(--ice-3)}
.composer__lock b{font-size:12.5px;color:var(--ice)}
.composer__lock em{color:var(--volt);font-variant-numeric:tabular-nums}
.composer.is-locked .composer__box,.composer.is-locked .composer__bar,.composer.is-locked .composer__name{display:none}
.composer.is-locked .composer__top{justify-content:flex-end;margin-bottom:6px}
.composer.is-locked{animation:lockIn .5s var(--out)}
.pop{position:absolute;left:0;right:0;bottom:calc(100% + 8px);z-index:5;display:grid;gap:4px;padding:10px;border-radius:14px;
  background:linear-gradient(180deg,rgba(22,27,37,.98),rgba(11,14,20,.98));border:1px solid rgba(196,214,245,.2);
  box-shadow:0 20px 50px -20px rgba(0,0,0,.9);animation:popIn .3s var(--out)}
.pop--emoji{grid-template-columns:repeat(8,1fr)}
.pop--sticker{grid-template-columns:repeat(4,1fr);gap:8px;padding:14px}
.pop button{aspect-ratio:1;border-radius:9px;display:grid;place-items:center;font-size:19px;transition:background .15s,transform .2s cubic-bezier(.2,1.6,.4,1)}
.pop--sticker button{padding:9px}
.pop--sticker .stk{width:100%;height:100%}
.pop button:hover{background:rgba(220,232,255,.08);transform:scale(1.14) rotate(-4deg)}

/* ---------- dialogs ---------- */
.modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:20px}
.modal__backdrop{position:absolute;inset:0;background:rgba(3,4,8,.62);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);animation:fadeIn .3s ease}
.modal__card{position:relative;width:min(390px,100%);max-height:calc(100% - 20px);overflow-x:hidden;overflow-y:auto;border-radius:22px;
  background:linear-gradient(180deg,rgba(22,26,35,.97),rgba(10,12,17,.98));border:1px solid rgba(196,214,245,.14);
  box-shadow:0 50px 100px -30px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.06);animation:modalIn .5s var(--out);scrollbar-width:none}
.modal.is-closing .modal__card{animation:modalOut .22s ease forwards}
.modal.is-closing .modal__backdrop{animation:fadeOut .22s ease forwards}
.modal__x{position:absolute;top:12px;right:12px;z-index:2;width:32px;height:32px;border-radius:50%;color:var(--ice-3);border:1px solid rgba(196,214,245,.12);transition:background .2s,color .2s}
.modal__x:hover{color:var(--ice);background:rgba(255,255,255,.06)}

/* boarding pass — Santa Air, backpack class. It flies in from the Join button (see app.js),
   tilts with the mouse once it's landed, and has a holographic foil that follows the cursor. */
.modal--pass{perspective:1600px}
.warp{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.pass{transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .45s var(--out);animation:none}
.modal.is-closing .pass{animation:none}
.pass__holo{position:absolute;inset:0;z-index:3;border-radius:inherit;pointer-events:none;mix-blend-mode:screen;
  background:
    radial-gradient(55% 45% at var(--mx,28%) var(--my,18%),rgba(255,255,255,.08),transparent 70%),
    linear-gradient(115deg,transparent 36%,rgba(255,217,168,.12) 45%,rgba(169,200,255,.14) 50%,rgba(199,165,255,.1) 55%,transparent 64%);
  background-size:100% 100%,280% 100%;background-position:0 0,140% 0;background-repeat:no-repeat}
.pass.is-entering .pass__holo{animation:holo 1.2s cubic-bezier(.3,.6,.2,1) .6s both}
.pass__top{position:relative;padding:20px 22px 16px;border-radius:22px 22px 0 0;
  background:radial-gradient(120% 140% at 0% 0%,rgba(255,217,168,.15),transparent 60%),radial-gradient(90% 120% at 100% 0%,rgba(130,170,255,.08),transparent 60%)}
.pass__brand{display:flex;align-items:center;gap:9px;margin:0 38px 18px 0;font-size:10px;font-weight:700;letter-spacing:.28em;text-transform:uppercase;color:var(--ice-2)}
.pass__logo{display:grid;place-items:center;width:24px;height:24px;border-radius:7px;letter-spacing:.02em;
  background:linear-gradient(135deg,#ffe8c8,#c9a35b);color:#1a1105;font:800 11px/1 var(--display);box-shadow:0 0 18px -4px rgba(255,217,168,.8)}
.pass__class{margin-left:auto;font-weight:400;letter-spacing:.16em;color:var(--warm)}
.pass__title{margin:0;display:flex;align-items:flex-end;justify-content:space-between;gap:6px;line-height:1}
.pass__end{min-width:0;display:flex;flex-direction:column;gap:6px}
.pass__end b{font:700 44px/.86 var(--display);letter-spacing:.04em;color:var(--bone)}
.pass__end--to{align-items:flex-end;text-align:right}
.pass__end small{max-width:120px;font:600 9.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ice-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pass__end b.pass__code{color:var(--warm);text-shadow:0 0 28px rgba(255,217,168,.45)}
.pass__arc{position:relative;flex:none;width:120px;height:40px;margin-bottom:14px}
.pass__arc svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.pass__arc path{fill:none;stroke:rgba(255,217,168,.5);stroke-width:1.4;stroke-dasharray:2 5;stroke-linecap:round;animation:dash 1.2s linear infinite}
.pass__jet{position:absolute;left:0;top:0;width:16px;height:16px;offset-path:path('M4 34 Q60 -6 116 34');offset-rotate:auto 90deg;animation:jet 3.4s cubic-bezier(.45,0,.55,1) infinite}
.pass__jet svg{display:block;width:16px;height:16px;fill:var(--warm);filter:drop-shadow(0 0 6px rgba(255,217,168,.95))}
.pass__when{margin:12px 0 0;font:italic 400 15px/1.35 var(--serif);color:var(--bone-2)}
.pass__meta{display:flex;align-items:flex-end;gap:16px;margin-top:14px}
.pass__meta span{display:flex;flex-direction:column;gap:4px;font-size:8.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--ice-4)}
.pass__meta b{font:700 13px/1 var(--mono);letter-spacing:.06em;color:var(--bone)}
.pass__barcode{margin-left:auto;width:76px;height:26px;border-radius:2px;opacity:.7;
  background:repeating-linear-gradient(90deg,#ece8e1 0 2px,transparent 2px 4px,#ece8e1 4px 5px,transparent 5px 8px,#ece8e1 8px 11px,transparent 11px 12px,#ece8e1 12px 13px,transparent 13px 16px)}
.pass__body{transform-origin:50% 0}
.pass.is-entering .pass__barcode{animation:barcode .7s steps(12) 1s both}
.pass.is-entering .pass__tear{animation:tear .6s cubic-bezier(.6,0,.3,1) .72s both}
.pass.is-entering .pass__tear::before,.pass.is-entering .pass__tear::after{animation:notch .45s cubic-bezier(.2,1.7,.4,1) .7s both}
.pass.is-entering .pass__brand{animation:rise .6s var(--out) .5s both}
.pass.is-entering .pass__when,.pass.is-entering .pass__meta span{animation:rise .6s var(--out) .78s both}
.pass.is-entering .pass__end small{animation:fade .6s ease .7s both}
.pass__tear{position:relative;height:0;margin:0 18px;border-top:2px dashed rgba(255,255,255,.14)}
.pass__tear::before,.pass__tear::after{content:"";position:absolute;top:-11px;width:20px;height:20px;border-radius:50%;background:#07080b;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.pass__tear::before{left:-29px}
.pass__tear::after{right:-29px}
.pass__body{padding:18px 22px 22px}
.pass__label{margin:0 0 10px;font-size:11.5px;color:var(--ice-3)}
.seg{position:relative;display:grid;grid-template-columns:1fr 1fr;padding:4px;border-radius:12px;background:rgba(255,255,255,.05);border:1px solid rgba(196,214,245,.1)}
.seg__ind{position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:9px;background:var(--bone);transition:transform .35s var(--out)}
.seg[data-p="instagram"] .seg__ind{transform:translateX(100%)}
.seg__btn{position:relative;z-index:1;padding:8px;font-size:12.5px;font-weight:700;color:var(--ice-2);transition:color .25s}
.seg__btn.is-on{color:#0b0b0b}
.pass__field{position:relative;display:flex;align-items:center;margin-top:10px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid rgba(196,214,245,.18);transition:border-color .2s,background .2s,box-shadow .2s}
.pass__field:focus-within{border-color:var(--warm);background:rgba(255,255,255,.06);box-shadow:0 0 0 3px rgba(255,217,168,.08)}
.pass__at{padding-left:12px;color:var(--ice-4);font-size:14px}
.pass__field input{flex:1;min-width:0;padding:11px 12px 11px 4px;border:0;background:none;color:var(--bone);font:400 14px var(--mono);outline:none}
.pass__field input::placeholder,.pass__field textarea::placeholder{color:var(--ice-4)}
.pass__field--note{align-items:stretch}
.pass__field textarea{flex:1;min-width:0;min-height:62px;max-height:120px;padding:10px 12px 18px;border:0;background:none;resize:none;color:var(--bone);font:400 12.5px/1.5 var(--mono);outline:none}
.pass__count{position:absolute;right:10px;bottom:6px;font-size:9.5px;color:var(--ice-4);font-variant-numeric:tabular-nums;pointer-events:none}
.pass__go{margin-top:12px;width:100%;display:flex;align-items:center;justify-content:center;gap:9px;padding:12px;border-radius:12px;
  background:linear-gradient(135deg,#ffe8c8,#ffd9a8 40%,#c9a35b);color:#1a1105;font-weight:700;font-size:13.5px;letter-spacing:.04em;
  box-shadow:0 14px 30px -14px rgba(255,217,168,.8);transition:transform .2s var(--out),filter .2s,opacity .2s}
.pass__go svg{width:16px;height:16px;fill:currentColor;transform:rotate(45deg);transition:transform .45s var(--out)}
.pass__go:hover{filter:brightness(1.05);transform:translateY(-1px)}
.pass__go:hover svg{transform:rotate(45deg) translateY(-3px)}
.pass__go:disabled{opacity:.6;cursor:progress;transform:none}
.pass__note{margin:10px 0 0;min-height:15px;font-size:11px;color:var(--ice-4)}
.pass__note.is-error{color:#ff8a84}
.pass.is-shake{animation:shakeX .4s var(--io)}
.pass__done{display:none;text-align:center;padding:8px 0 2px}
.pass.is-done .pass__fields{display:none}
.pass.is-done .pass__done{display:block}
.stamp{display:inline-flex;flex-direction:column;align-items:center;gap:3px;padding:10px 20px;border:3px double rgba(52,209,127,.85);border-radius:10px;
  color:#86f0b6;font:700 10px/1 var(--mono);letter-spacing:.32em;text-transform:uppercase;transform:rotate(-8deg);opacity:0}
.stamp b{font:700 28px/1 var(--display);letter-spacing:.08em}
.pass.is-done .stamp{animation:stampIn .55s cubic-bezier(.2,1.6,.4,1) .05s forwards}
/* the departure board: split-flap tiles that spin into place */
.board{margin:16px auto 2px;max-width:300px;padding:8px 12px;border-radius:12px;text-align:left;
  background:linear-gradient(180deg,#07090d,#0b0e14);border:1px solid rgba(196,214,245,.14);box-shadow:inset 0 2px 12px rgba(0,0,0,.7)}
.board div{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:5px 0}
.board div + div{border-top:1px dashed rgba(196,214,245,.08)}
.board dt{font-size:9px;letter-spacing:.26em;text-transform:uppercase;color:var(--ice-4)}
.board dd{margin:0;display:flex;gap:2px;min-height:21px;perspective:200px}
.fl{position:relative;display:inline-grid;place-items:center;width:15px;height:21px;border-radius:3px;
  background:linear-gradient(180deg,#1d2433 0 50%,#161b27 50% 100%);color:#f4f0e8;font:700 12px/1 var(--mono);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 2px 3px rgba(0,0,0,.55)}
.fl::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(0,0,0,.7)}
.fl.is-spin{color:var(--ice-3)}
.fl.is-gap{background:none;box-shadow:none;width:6px}
.fl.is-gap::after{display:none}
.board .is-ok .fl:not(.is-spin){color:#8ff0bd;text-shadow:0 0 8px rgba(126,224,183,.55)}
.pass.is-done .board{animation:rise .6s var(--out) .25s backwards}
.pass.is-done .pass__done-text,.pass.is-done .pass__done-count,.pass.is-done .pass__close{animation:rise .6s var(--out) 1.5s backwards}
.pass__go.is-sending svg{animation:takeoff .9s var(--io) infinite}
/* the flight across the screen + confetti, above the dialog */
.flight{position:fixed;inset:0;z-index:120;width:100%;height:100%;pointer-events:none;overflow:visible}
.confetti{position:fixed;inset:0;z-index:130;width:100%;height:100%;pointer-events:none}
/* back on the route: the stop you just joined lights up */
.stop.is-boarded .stop__node{animation:boarded 1.6s var(--out)}
.stop.is-boarded .join-btn{animation:rxIn .6s cubic-bezier(.2,1.6,.4,1)}
.stop--up.is-boarded,.stop.is-boarded .stop__pass{animation:boardGlow 2.2s var(--out)}
.pass__done-text{margin:18px 0 4px;font-weight:700;font-size:15px}
.pass__done-count{margin:0;font-size:11.5px;color:var(--ice-3)}
.pass__close{margin-top:16px;padding:9px 16px;border-radius:999px;border:1px solid rgba(196,214,245,.2);font-size:12px;color:var(--ice-2);transition:background .2s,color .2s}
.pass__close:hover{color:var(--ice);background:rgba(255,255,255,.06)}

/* ---------- the entrance: the storm gathers, the bolt charges, one tap splits the screen open ---------- */
/* everything on the page waits (paused) until the visitor enters */
.is-intro .stage *,.is-intro .stage *::before,.is-intro .stage *::after{animation-play-state:paused!important}
.stage{transition:opacity .7s ease .15s}
.is-intro .stage{opacity:0}
.intro{position:fixed;inset:0;z-index:200;display:none;place-items:center;text-align:center}
.is-intro .intro,.intro.is-open{display:grid}
.intro,.intro__half{background:radial-gradient(70% 62% at 50% 46%,rgba(8,10,16,.7),rgba(3,4,7,.95) 72%)}
.intro.is-ready{cursor:pointer}
.intro.is-open{background:transparent;pointer-events:none}
.intro__half{position:absolute;inset:0;display:grid;place-items:center;will-change:transform}
.intro__half *,.intro__half *::after{animation:none!important} /* the halves are frozen copies of the scene */
.intro__face{display:flex;flex-direction:column;align-items:center;padding:24px}
.intro__kicker{display:inline-flex;align-items:center;gap:.7em;margin:0 0 22px;font-size:10px;letter-spacing:.42em;text-transform:uppercase;color:var(--ice-3);animation:fade 1.2s ease .2s both}
.intro__kicker i{width:6px;height:6px;border-radius:50%;background:var(--red);box-shadow:0 0 9px var(--red);animation:beat 1.6s ease-in-out infinite}
.intro__bolt{width:86px;height:134px;margin-bottom:22px;animation:rise 1s var(--out) .1s both;
  filter:drop-shadow(0 0 calc(8px + var(--p,0) * 34px) rgba(255,217,168,calc(.15 + var(--p,0) * .65)))}
.intro__bolt svg{display:block;width:100%;height:100%;overflow:visible}
.intro__outline{fill:rgba(255,255,255,.035);stroke:rgba(255,217,168,.6);stroke-width:1.4;stroke-linejoin:round}
.intro__fill{fill:url(#introGrad);transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(var(--p,0))}
.intro.is-flick .intro__bolt{animation:flick .4s steps(4)}
.intro.is-ready .intro__bolt{animation:charged 1.8s ease-in-out infinite}
.intro__name{margin:0;font:700 clamp(56px,9vw,124px)/.84 var(--display);letter-spacing:-.01em;color:#f4f0e8;text-shadow:0 10px 40px rgba(0,0,0,.85)}
.intro__name span{display:inline-block;animation:word 1.1s var(--out) .3s both}
.intro__name span + span{animation-delay:.45s}
.intro__name{opacity:1}
.intro__status{margin:20px 0 0;min-height:1.6em;font-size:10.5px;letter-spacing:.32em;text-transform:uppercase;color:var(--ice-3);animation:fade 1s ease .6s both}
.intro__status b{color:var(--warm);font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.1em}
.intro__go{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:10px;margin-top:26px;padding:16px 30px;border-radius:999px;
  font:700 12.5px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:#1a1105;
  background:linear-gradient(135deg,#ffe8c8,#ffd9a8 45%,#c9a35b);box-shadow:0 18px 44px -16px rgba(255,217,168,.95);
  opacity:0;transform:translateY(12px) scale(.94);pointer-events:none;transition:opacity .5s,transform .7s cubic-bezier(.2,1.5,.4,1)}
.intro__go svg{width:16px;height:16px;fill:currentColor}
.intro__go::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.65) 50%,transparent 70%);transform:translateX(-120%)}
.intro.is-ready .intro__go{opacity:1;transform:none;pointer-events:auto;animation:goPulse 2.2s ease-out .7s infinite}
.intro.is-ready .intro__go::after{animation:shine 2.6s ease-in-out .5s infinite}
.intro__go:hover{transform:translateY(-2px) scale(1.03)}
.intro__quiet{margin-top:14px;font-size:10.5px;letter-spacing:.16em;color:var(--ice-4);opacity:0;pointer-events:none;transition:opacity .5s .25s,color .2s}
.intro.is-ready .intro__quiet{opacity:1;pointer-events:auto}
.intro__quiet:hover{color:var(--ice-2)}
.intro__tip{position:absolute;left:0;right:0;bottom:30px;margin:0;font-size:9.5px;letter-spacing:.34em;text-transform:uppercase;color:var(--ice-4);animation:fade 1.4s ease 1s both}
.intro.is-open .intro__tip,.intro.is-open > .intro__face{visibility:hidden}
.intro__crack{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.is-gated .intro{display:none!important}

/* ---------- phones (and tiny windows): this one is made for a PC ---------- */
.gate{display:none}
.is-gated .wall,.is-gated .rail,.is-gated .hero,.is-gated .audio-ctl,.is-gated .hud,.is-gated .tune-pop,.is-gated .rx-tray{display:none!important}
.is-gated .gate{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;
  padding:24px 22px calc(36px + env(safe-area-inset-bottom));text-align:center;pointer-events:none}
.is-gated .pl{object-position:50% 16%}
.gate::before{content:"";position:absolute;left:0;right:0;bottom:0;height:62%;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(3,4,7,.72) 42%,rgba(3,4,7,.9))}
.gate__inner{pointer-events:auto;width:100%;max-width:460px}
.gate__kicker{display:inline-flex;align-items:center;gap:.7em;margin:0 0 14px;font-size:10px;letter-spacing:.42em;text-transform:uppercase;color:var(--ice-3);
  opacity:0;animation:rise .9s var(--out) .2s forwards;transform:translateY(8px)}
.gate__kicker i{width:6px;height:6px;border-radius:50%;background:var(--red);box-shadow:0 0 9px var(--red);animation:beat 1.6s ease-in-out infinite}
.gate__title{margin:0;font:700 clamp(50px,15vw,104px)/.84 var(--display);letter-spacing:-.01em;color:#f4f0e8;
  text-shadow:0 10px 32px rgba(0,0,0,.85),0 0 calc(var(--lit) * 44px) rgba(205,222,255,calc(var(--lit) * .95))}
.gate__title .w{display:inline-block;opacity:0;transform:translateY(.18em);filter:blur(8px);animation:word 1s var(--out) forwards}
.gate__title .w:nth-child(2){animation-delay:.12s}
.gate__title .w:nth-child(3){animation-delay:.24s}
.gate__title .w:nth-child(4){animation-delay:.36s}
.gate__title .w:nth-child(5){animation-delay:.48s}
.gate__title em{color:var(--warm);text-shadow:0 0 30px rgba(255,217,168,.45),0 10px 32px rgba(0,0,0,.85)}
.gate__sub{max-width:34ch;margin:18px auto 22px;font-size:12.5px;line-height:1.6;color:var(--ice-2);opacity:0;animation:fade 1s ease .9s forwards}
.gate__btn{display:inline-flex;align-items:center;gap:9px;padding:13px 20px;border-radius:999px;font-weight:700;font-size:13px;letter-spacing:.03em;
  color:#0a0d14;background:linear-gradient(180deg,#f6f8ff,#d3def3);box-shadow:0 14px 34px -14px rgba(150,190,255,.95);
  opacity:0;transform:translateY(10px);animation:rise .9s var(--out) 1.1s forwards;transition:transform .2s var(--out)}
.gate__btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.gate__btn:active{transform:scale(.97)}
.gate__btn.is-done{background:linear-gradient(180deg,#d9fbe8,#a8f1c8)}
.gate__url{margin:14px 0 0;font-size:10.5px;letter-spacing:.2em;color:var(--ice-4)}
.is-phone .gate__window,.is-window .gate__phone{display:none!important}

/* ---------- motion ---------- */
@keyframes rise{to{opacity:1;transform:none}}
@keyframes fade{to{opacity:1}}
@keyframes fadeIn{from{opacity:0}}
@keyframes fadeOut{to{opacity:0}}
@keyframes word{to{opacity:1;transform:none;filter:none}}
@keyframes beat{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes ping{0%{transform:scale(1);opacity:.7}70%,100%{transform:scale(2.6);opacity:0}}
@keyframes radar{0%{transform:scale(1);opacity:.85}100%{transform:scale(2);opacity:0}}
@keyframes caret{50%{opacity:0}}
@keyframes railIn{to{opacity:1;transform:none}}
@keyframes hintIn{to{opacity:1;transform:none}}
@keyframes nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(-4px)}}
@keyframes shimmer{to{background-position:-200% 0}}
@keyframes spin{to{--ang:360deg}}
@keyframes march{to{background-position:0 14px}}
@keyframes transit{0%{transform:translateY(-6px);opacity:0}25%,70%{opacity:1}100%{transform:translateY(16px);opacity:0}}
@keyframes stopIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes nodePop{0%{transform:scale(0)}100%{transform:scale(1)}}
@keyframes segIn{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes stampSlam{0%{opacity:0;transform:rotate(calc(var(--tilt,-6deg) - 12deg)) scale(1.5)}60%{opacity:1;transform:rotate(var(--tilt,-6deg)) scale(.94)}100%{opacity:1;transform:rotate(var(--tilt,-6deg)) scale(1)}}
@keyframes condense{0%{opacity:0;transform:translateY(14px) scale(.97);filter:blur(7px)}55%{filter:blur(0)}100%{opacity:1;transform:none;filter:none}}
@keyframes drip{0%,80%{opacity:0;transform:translateY(-110%)}82%{opacity:1}100%{opacity:.85;transform:translateY(260%)}}
@keyframes cmtArrive{
  0%{opacity:0;transform:translateY(-14px) scale(.94);box-shadow:0 0 0 1px rgba(220,235,255,.95),0 0 44px rgba(170,200,255,.85)}
  40%{opacity:1;transform:translateY(2px) scale(1.01)}
  100%{transform:none}}
@keyframes cmtStruck{
  0%{opacity:0;transform:translateY(-22px) scale(.9);filter:brightness(3) blur(3px);box-shadow:0 0 0 2px #fff,0 0 70px 10px rgba(180,210,255,.95)}
  18%{opacity:1;filter:brightness(2.2) blur(0)}
  45%{transform:translateY(3px) scale(1.02);filter:brightness(1.2)}
  100%{transform:none;filter:none}}
@keyframes cmtOut{to{opacity:0;transform:translateX(-30px) scale(.94);filter:blur(4px)}}
@keyframes stickIn{0%{opacity:0;transform:scale(.4) rotate(-14deg)}60%{transform:scale(1.15) rotate(5deg)}100%{opacity:1;transform:rotate(var(--tilt,-4deg))}}
@keyframes popIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes modalIn{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}
@keyframes modalOut{to{opacity:0;transform:translateY(10px) scale(.98)}}
@keyframes stampIn{0%{opacity:0;transform:rotate(-16deg) scale(2.4)}60%{opacity:1;transform:rotate(-7deg) scale(.94)}100%{opacity:1;transform:rotate(-8deg) scale(1)}}
@keyframes shakeX{20%{transform:translateX(-7px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(2px)}}
@keyframes zap{50%{opacity:.35}}
@keyframes burn{0%{transform:scale(1.9);filter:drop-shadow(0 0 10px #fff) brightness(2)}100%{transform:none}}
@keyframes lockIn{from{opacity:.4;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes eq{0%,100%{height:25%}50%{height:100%}}
@keyframes flick{0%,50%{filter:drop-shadow(0 0 40px rgba(255,255,255,.95)) brightness(2)}25%,75%{filter:none}100%{filter:drop-shadow(0 0 20px rgba(255,217,168,.6))}}
@keyframes charged{0%,100%{filter:drop-shadow(0 0 30px rgba(255,217,168,.75));transform:none}50%{filter:drop-shadow(0 0 54px rgba(255,236,200,1)) brightness(1.15);transform:scale(1.04)}}
@keyframes goPulse{0%{box-shadow:0 0 0 0 rgba(255,217,168,.55),0 18px 44px -16px rgba(255,217,168,.95)}70%,100%{box-shadow:0 0 0 22px rgba(255,217,168,0),0 18px 44px -16px rgba(255,217,168,.95)}}
@keyframes shine{0%,60%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
@keyframes tvOn{0%{transform:scale(1,.01);filter:brightness(4);opacity:.6}45%{transform:scale(1,.01);filter:brightness(3)}75%{transform:scale(1,1.04);filter:brightness(1.4)}100%{transform:none;filter:none;opacity:1}}
@keyframes tvOff{0%{transform:none}50%{transform:scale(1,.01);filter:brightness(3)}100%{transform:scale(0,.01);opacity:0}}
@keyframes jet{0%{offset-distance:0%;opacity:0}10%,88%{opacity:1}100%{offset-distance:100%;opacity:0}}
@keyframes holo{from{background-position:0 0,140% 0}to{background-position:0 0,-60% 0}}
@keyframes barcode{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes tear{from{clip-path:inset(-14px 100% -14px -40px)}to{clip-path:inset(-14px -40px -14px -40px)}}
@keyframes notch{from{transform:scale(0)}to{transform:none}}
@keyframes takeoff{0%{transform:rotate(45deg) translate(0,0);opacity:1}70%{transform:rotate(45deg) translate(0,-16px);opacity:0}71%{transform:rotate(45deg) translate(0,10px);opacity:0}100%{transform:rotate(45deg) translate(0,0);opacity:1}}
@keyframes boarded{0%{transform:scale(1.6);box-shadow:0 0 0 0 rgba(126,224,183,.95)}100%{transform:none;box-shadow:0 0 0 20px rgba(126,224,183,0)}}
@keyframes boardGlow{0%{box-shadow:0 0 0 1px rgba(126,224,183,.85),0 0 34px rgba(126,224,183,.5)}100%{box-shadow:0 0 0 1px rgba(126,224,183,0),0 0 0 rgba(126,224,183,0)}}
@keyframes popDrop{from{opacity:0;transform:translateY(-8px) scale(.94)}to{opacity:1;transform:none}}
@keyframes popUp{to{opacity:0;transform:translateY(-6px) scale(.97)}}
@keyframes songIn{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}
@keyframes trayIn{0%{opacity:0;transform:translateY(10px) scale(.5)}100%{opacity:1;transform:none}}
@keyframes trayOut{to{opacity:0;transform:translateY(6px) scale(.85)}}
@keyframes rxPop{0%{opacity:0;transform:translateY(12px) scale(.2) rotate(-25deg)}100%{opacity:1;transform:none}}
@keyframes rxIn{0%{transform:scale(0)}60%{transform:scale(1.25)}100%{transform:scale(1)}}
@keyframes rxHop{0%{transform:none}35%{transform:translateY(-6px) scale(1.35) rotate(-12deg)}100%{transform:none}}
@keyframes rxCount{0%{transform:none}35%{transform:translateY(-3px) scale(1.4);color:#fff}100%{transform:none}}
@keyframes gl1{0%{transform:translate(-.012em,0);clip-path:inset(18% 0 70% 0)}50%{transform:translate(.01em,0);clip-path:inset(58% 0 33% 0)}100%{transform:translate(0,0);clip-path:inset(0 0 100% 0)}}
@keyframes gl2{0%{transform:translate(.012em,0);clip-path:inset(66% 0 24% 0)}50%{transform:translate(-.008em,0);clip-path:inset(30% 0 62% 0)}100%{transform:translate(0,0);clip-path:inset(0 0 100% 0)}}

/* ---------- smaller laptops ---------- */
@media (max-width:1180px){
  .hud{display:none}
}
@media (max-height:760px){
  .rail{gap:10px}
  .card{padding:12px}
  .copy-btn{margin-top:10px;padding:8px}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .name__layer--base .w,.kicker,.card,.hero__hint,.audio-ctl__hint,.gate__title .w,.gate__kicker,.gate__sub,.gate__btn{opacity:1;transform:none;filter:none}
  .stop__plane,.cmt__glass::after,.tune__blink::after{display:none}
}