/* ============================================================================
   micks.win — A Cabinet of Infinite Rooms
   Interface layer. The worlds themselves live in canvas; everything here is
   glass, hairlines and breath.
   ========================================================================== */

:root{
  --ink:        #f4f6ff;
  --ink-dim:    rgba(244,246,255,.58);
  --ink-faint:  rgba(244,246,255,.34);
  --line:       rgba(255,255,255,.10);
  --line-soft:  rgba(255,255,255,.055);
  --glass:      rgba(12,13,22,.42);
  --glass-2:    rgba(12,13,22,.66);
  --void:       #04040a;
  --accent:     #8fe3ff;

  --ui:   'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --pad: clamp(16px, 2.4vw, 40px);
  --ease: cubic-bezier(.22,.61,.24,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html,body{ height:100%; }
body{
  margin:0;
  background:var(--void);
  color:var(--ink);
  font-family:var(--ui);
  font-weight:300;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overscroll-behavior:none;
  touch-action:manipulation;
}
body.is-entering{ cursor:progress; }

#app{ position:fixed; inset:0; isolation:isolate; }

/* ───────────────────────────────  STAGE  ───────────────────────────────── */
.stage{ position:absolute; inset:0; background:#000; overflow:hidden; }
.stage canvas{
  touch-action:none;
  position:absolute; inset:0; width:100%; height:100%; display:block;
  transition:opacity .5s linear;
}
#gl{ opacity:0; }
#c2d{ opacity:0; }
#fade{ opacity:0; pointer-events:none; z-index:3; }

.stage[data-kind="gl"]  #gl{ opacity:1; }
.stage[data-kind="2d"]  #c2d{ opacity:1; }

/* the incoming-world reveal: out of focus, into the room (visible layer only) */
.stage.reveal[data-kind="gl"] #gl,
.stage.reveal[data-kind="2d"] #c2d{ animation:revealIn 1.5s var(--ease-out) forwards; }
@keyframes revealIn{
  0%   { filter:blur(15px) saturate(1.45) brightness(1.35); transform:scale(1.055); }
  55%  { filter:blur(1.5px) saturate(1.10) brightness(1.04); transform:scale(1.008); }
  100% { filter:blur(0)    saturate(1)    brightness(1);   transform:scale(1); }
}

/* film furniture */
.fx-grain{
  position:absolute; inset:-50%; z-index:4; pointer-events:none;
  opacity:.055; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>");
  animation:grain 6s steps(6) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)}      16%{transform:translate(-3%,-5%)}
  33%{transform:translate(4%,-2%)}  50%{transform:translate(-2%,4%)}
  66%{transform:translate(3%,3%)}   83%{transform:translate(-4%,1%)}
  100%{transform:translate(0,0)}
}
.fx-vignette{
  position:absolute; inset:0; z-index:5; pointer-events:none;
  background:
    radial-gradient(130% 100% at 50% 50%, transparent 42%, rgba(0,0,0,.36) 78%, rgba(0,0,0,.72) 100%),
    linear-gradient(to bottom, rgba(0,0,0,.30), transparent 22% 72%, rgba(0,0,0,.46));
}
.fx-bloom{
  position:absolute; inset:0; z-index:4; pointer-events:none;
  mix-blend-mode:screen; opacity:0; transition:opacity 1.2s linear;
  background:radial-gradient(60% 45% at 50% 46%, rgba(180,220,255,.10), transparent 70%);
}
.stage.flash .fx-bloom{ opacity:1; transition-duration:.18s; }

/* ─────────────────────────────  MASTHEAD  ──────────────────────────────── */
.brand{
  position:absolute; z-index:20; top:var(--pad); left:var(--pad); right:var(--pad);
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  pointer-events:none;
}
.brand__mark{
  pointer-events:auto; display:inline-flex; align-items:center; gap:11px;
  text-decoration:none; color:var(--ink);
}
.brand__orb{
  width:11px; height:11px; border-radius:50%;
  background:radial-gradient(circle at 32% 30%, #fff, #8fe3ff 42%, #4b2bff 78%, #12043a);
  box-shadow:0 0 14px 3px rgba(140,220,255,.55), 0 0 40px 10px rgba(90,60,255,.28);
  animation:pulse 5.5s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{ transform:scale(1);   box-shadow:0 0 14px 3px rgba(140,220,255,.5),  0 0 40px 10px rgba(90,60,255,.24); }
  50%    { transform:scale(1.35);box-shadow:0 0 22px 6px rgba(190,240,255,.75), 0 0 66px 18px rgba(120,90,255,.4); }
}
.brand__word{
  font-size:14.5px; font-weight:400; letter-spacing:.30em; text-transform:lowercase;
  text-shadow:0 1px 24px rgba(0,0,0,.9);
}
.brand__word .dim{ opacity:.42; }
.brand__meta{
  display:flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:10px; letter-spacing:.16em;
  color:var(--ink-faint); text-transform:uppercase;
}
.brand__sep{ width:22px; height:1px; background:var(--line); }

/* ──────────────────────────  CYCLE PROGRESS  ───────────────────────────── */
.cycle{
  position:absolute; z-index:20; top:0; left:0; right:0; height:2px;
  background:rgba(255,255,255,.05);
}
.cycle i{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg, rgba(143,227,255,.15), #bfeaff 55%, #ffffff);
  box-shadow:0 0 16px 2px rgba(150,225,255,.75);
}

/* ────────────────────────────  TITLE CARD  ─────────────────────────────── */
.card{
  position:absolute; z-index:20; left:var(--pad); bottom:calc(var(--pad) + 92px);
  max-width:min(46ch, 54vw); pointer-events:none;
}
.card > *{ margin:0; }
.card__rank{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.34em; color:var(--ink-faint);
  margin-bottom:14px; display:flex; align-items:baseline; gap:8px;
}
.card__rank span{ color:var(--accent); font-size:12px; letter-spacing:.2em; }
.card__rank em{ font-style:normal; opacity:.5; }
.card__name{
  font-size:clamp(34px, 6.2vw, 74px);
  font-weight:200; line-height:.96; letter-spacing:-.028em;
  margin-bottom:14px;
  text-shadow:0 2px 60px rgba(0,0,0,.85), 0 0 120px rgba(120,180,255,.20);
}
.card__tag{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.26em; text-transform:uppercase;
  color:var(--ink-dim); margin-bottom:14px;
}
.card__blurb{
  font-size:13.5px; line-height:1.66; color:rgba(244,246,255,.62);
  max-width:38ch; font-weight:300;
}
.card__meter{
  margin-top:20px; display:flex; align-items:center; gap:12px;
  font-family:var(--mono); font-size:9.5px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--ink-faint);
}
.card__meter-track{
  position:relative; width:clamp(90px,14vw,150px); height:2px;
  background:rgba(255,255,255,.10); overflow:hidden;
}
.card__meter-track i{
  position:absolute; inset:0 auto 0 0; width:0%;
  background:linear-gradient(90deg,#5f7bff,#8fe3ff 60%,#fff);
  box-shadow:0 0 12px rgba(143,227,255,.8);
  transition:width 1.1s var(--ease-out);
}
.card__meter-val{ color:var(--ink-dim); font-variant-numeric:tabular-nums; }

.card.swap .card__rank,
.card.swap .card__name,
.card.swap .card__tag,
.card.swap .card__blurb{ animation:cardIn .95s var(--ease-out) both; }
.card.swap .card__name{ animation-delay:.05s; }
.card.swap .card__tag{ animation-delay:.10s; }
.card.swap .card__blurb{ animation-delay:.15s; }
@keyframes cardIn{
  0%  { opacity:0; transform:translateY(16px); filter:blur(9px); }
  100%{ opacity:1; transform:none; filter:blur(0); }
}

/* ───────────────────────────────  RAIL  ────────────────────────────────── */
.rail{
  position:absolute; z-index:22; left:var(--pad); right:calc(var(--pad) + 440px); bottom:calc(var(--pad) - 4px);
  display:flex; align-items:flex-end; gap:clamp(4px, .55vw, 10px);
  height:56px; padding-bottom:6px;
  overflow-x:auto; overflow-y:hidden; scrollbar-width:none;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 18px, #000 calc(100% - 18px), transparent);
          mask-image:linear-gradient(90deg, transparent, #000 18px, #000 calc(100% - 18px), transparent);
}
.rail::-webkit-scrollbar{ display:none; }

.rail__item{
  position:relative; flex:0 0 auto; width:clamp(12px, 1.5vw, 22px); height:44px;
  background:none; border:0; padding:0; cursor:pointer; color:var(--ink-faint);
  display:flex; align-items:flex-end; justify-content:center;
  transition:color .4s var(--ease);
}
.rail__item::after{  /* the tick */
  content:''; display:block; width:100%; height:var(--h,10px);
  background:currentColor; opacity:.42; border-radius:2px;
  transition:height .5s var(--ease-out), opacity .4s var(--ease), box-shadow .5s var(--ease);
}
.rail__item:hover{ color:var(--ink); }
.rail__item:hover::after{ height:22px; opacity:.85; }
.rail__item.is-on{ color:#fff; }
.rail__item.is-on::after{
  height:40px; opacity:1;
  background:linear-gradient(to top, rgba(143,227,255,.15), #fff);
  box-shadow:0 0 18px 2px rgba(143,227,255,.65);
}
.rail__item.is-seen::after{ opacity:.7; }
.rail__num{
  position:absolute; bottom:-4px; left:50%; transform:translateX(-50%);
  font-family:var(--mono); font-size:8.5px; letter-spacing:.06em; opacity:0;
  transition:opacity .3s var(--ease), bottom .3s var(--ease); pointer-events:none;
}
.rail__item.is-on .rail__num,
.rail__item:hover .rail__num{ opacity:.8; bottom:-14px; }

.rail__tip{
  position:fixed; z-index:40; pointer-events:none;
  padding:9px 13px; border-radius:10px;
  background:var(--glass-2); border:1px solid var(--line);
  -webkit-backdrop-filter:blur(18px) saturate(1.3); backdrop-filter:blur(18px) saturate(1.3);
  font-size:11px; letter-spacing:.13em; text-transform:uppercase; white-space:nowrap;
  color:var(--ink); opacity:0; transform:translate(-50%,-6px);
  transition:opacity .22s var(--ease), transform .22s var(--ease);
  box-shadow:0 18px 50px rgba(0,0,0,.6);
}
.rail__tip.on{ opacity:1; transform:translate(-50%,-14px); }
.rail__tip b{ display:block; font-weight:400; margin-bottom:3px; }
.rail__tip s{ display:block; text-decoration:none; font-family:var(--mono); font-size:9px; opacity:.55; letter-spacing:.2em; }

/* ─────────────────────────────  CONTROLS  ──────────────────────────────── */
.ctl{
  position:absolute; z-index:22; right:var(--pad); bottom:calc(var(--pad) - 2px);
  display:flex; align-items:center; gap:6px;
  padding:6px; border-radius:999px;
  background:var(--glass); border:1px solid var(--line-soft);
  -webkit-backdrop-filter:blur(22px) saturate(1.4); backdrop-filter:blur(22px) saturate(1.4);
  box-shadow:0 20px 60px rgba(0,0,0,.5);
}
.ctl__btn{
  appearance:none; border:0; background:rgba(255,255,255,.045); color:var(--ink-dim);
  width:34px; height:34px; border-radius:999px; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  transition:background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.ctl__btn:hover{ background:rgba(255,255,255,.12); color:#fff; transform:translateY(-1px); }
.ctl__btn:active{ transform:translateY(0) scale(.96); }
.ctl__btn svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.35; stroke-linecap:round; stroke-linejoin:round; }
.ctl__btn--play svg.i-play{ fill:currentColor; stroke:none; width:13px; height:13px; margin-left:2px; }
.ctl__btn--play .i-play{ display:none; }
body.is-paused .ctl__btn--play .i-play{ display:block; }
body.is-paused .ctl__btn--play .i-pause{ display:none; }
.ctl__btn--txt{
  width:auto; padding:0 14px; height:34px;
  font-family:var(--mono); font-size:9.5px; letter-spacing:.2em; text-transform:uppercase;
}
.ctl__div{ width:1px; height:20px; background:var(--line); margin:0 4px; }

/* ────────────────────────────────  HINT  ───────────────────────────────── */
.hint{
  position:absolute; z-index:20; right:var(--pad); top:calc(var(--pad) + 34px);
  font-family:var(--mono); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-faint); text-align:right; max-width:32ch; line-height:2.1;
  transition:opacity 1s var(--ease); opacity:.85;
}
.hint.gone{ opacity:0; }
.hint kbd{
  font-family:inherit; font-size:9px; padding:2px 6px; margin:0 1px;
  border:1px solid var(--line); border-radius:5px; background:rgba(255,255,255,.05);
  color:var(--ink-dim);
}

/* ──────────────────────────────  GALLERY  ──────────────────────────────── */
.gal{
  position:absolute; inset:0; z-index:60; overflow-y:auto; overscroll-behavior:contain;
  background:rgba(4,4,10,.82);
  -webkit-backdrop-filter:blur(30px) saturate(1.2); backdrop-filter:blur(30px) saturate(1.2);
  opacity:0; visibility:hidden; transition:opacity .5s var(--ease), visibility .5s;
  padding:clamp(26px,5vw,72px);
}
.gal.on{ opacity:1; visibility:visible; }
.gal__head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:20px;
  margin-bottom:clamp(22px,3.4vw,44px);
}
.gal__head h2{
  margin:0 0 8px; font-size:clamp(26px,4vw,44px); font-weight:200; letter-spacing:-.02em;
}
.gal__head p{ margin:0; color:var(--ink-dim); font-size:13px; letter-spacing:.02em; }
.gal__close{
  flex:0 0 auto; width:40px; height:40px; border-radius:999px; cursor:pointer;
  background:rgba(255,255,255,.05); border:1px solid var(--line);
  display:grid; place-items:center; color:var(--ink-dim); transition:.3s var(--ease);
}
.gal__close:hover{ background:rgba(255,255,255,.13); color:#fff; transform:rotate(90deg); }
.gal__close svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; }

/* tools: a numeric jump box and the close button */
.gal__tools{ display:flex; align-items:center; gap:10px; flex:0 0 auto; }
.gal__jump{
  display:flex; align-items:center; gap:8px; height:40px; padding:0 12px;
  border:1px solid var(--line); border-radius:999px; background:rgba(255,255,255,.04);
  font-family:var(--mono); font-size:9px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-faint);
}
.gal__jump input{
  width:58px; border:0; outline:0; background:transparent; color:var(--ink);
  font-family:var(--mono); font-size:12px; letter-spacing:.06em; text-align:center;
  appearance:textfield; -moz-appearance:textfield;
}
.gal__jump input::-webkit-outer-spin-button,
.gal__jump input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.gal__jump input::placeholder{ color:var(--ink-faint); }

/* technique filters — essential once the cabinet holds 46 rooms */
.gal__filters{
  display:flex; flex-wrap:wrap; gap:8px; margin:-8px 0 clamp(20px,2.6vw,34px);
  padding-bottom:16px; border-bottom:1px solid var(--line-soft);
}
.chip{
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  padding:8px 15px; border-radius:999px; color:var(--ink-dim);
  background:rgba(255,255,255,.035); border:1px solid var(--line-soft);
  font-family:var(--mono); font-size:9.5px; letter-spacing:.2em; text-transform:uppercase;
  transition:.35s var(--ease);
}
.chip i{ font-style:normal; font-size:9px; opacity:.55; letter-spacing:0; }
.chip:hover{ color:var(--ink); background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.24); }
.chip.is-on{
  color:#06121a; background:var(--accent); border-color:var(--accent);
  box-shadow:0 0 30px -6px rgba(143,227,255,.6);
}
.chip.is-on i{ opacity:.7; }

.gal__grid{
  display:grid; gap:clamp(10px,1.2vw,18px);
  grid-template-columns:repeat(auto-fill, minmax(min(280px,100%), 1fr));
}
.tile{
  position:relative; border:0; padding:0; cursor:pointer; text-align:left;
  border-radius:16px; overflow:hidden; aspect-ratio:16/10;
  background:#08080f; border:1px solid var(--line-soft); color:var(--ink);
  transition:transform .55s var(--ease-out), box-shadow .55s var(--ease), border-color .4s;
  isolation:isolate;
}
.tile:hover{ transform:translateY(-6px) scale(1.012); border-color:rgba(255,255,255,.22);
  box-shadow:0 30px 80px rgba(0,0,0,.7), 0 0 60px -12px var(--glow, rgba(143,227,255,.5)); }
.tile__art{
  position:absolute; inset:0; z-index:0;
  background-image:var(--art); background-size:cover; background-position:center;
  filter:saturate(1.15) contrast(1.05);
  transform:scale(1.02); transition:transform 1.2s var(--ease-out), filter .6s;
}
.tile:hover .tile__art{ transform:scale(1.08); filter:saturate(1.4) contrast(1.1) brightness(1.08); }
.tile__art::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(4,4,10,.92) 4%, rgba(4,4,10,.30) 46%, rgba(4,4,10,.10));
}
.tile__body{ position:absolute; z-index:1; inset:auto 0 0 0; padding:16px 18px 18px; }
.tile__no{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.22em; color:var(--accent);
  display:block; margin-bottom:7px;
}
.tile__name{ display:block; font-size:17px; font-weight:300; letter-spacing:-.01em; margin:0 0 5px; }
.tile__tag{
  display:block; margin:0; font-family:var(--mono); font-size:9px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-faint);
}
.tile__heat{
  position:absolute; z-index:1; top:14px; right:14px;
  font-family:var(--mono); font-size:9px; letter-spacing:.12em; color:var(--ink-dim);
  padding:4px 8px; border-radius:999px; background:rgba(0,0,0,.42);
  border:1px solid var(--line); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
.tile.is-on{ border-color:rgba(255,255,255,.4); box-shadow:0 0 0 1px rgba(255,255,255,.14), 0 20px 60px rgba(0,0,0,.6); }
.tile[hidden]{ display:none !important; }

/* the rail is now wider than the viewport on most screens: hide its scrollbar
   but leave a hairline hint that there is more to the left and right */
.rail{ scroll-behavior:smooth; touch-action:pan-x; }

/* ───────────────────────────────  CURTAIN  ─────────────────────────────── */
.curtain{
  position:absolute; inset:0; z-index:90; display:grid; place-items:center;
  background:radial-gradient(120% 90% at 50% 46%, #0b0d1a 0%, #04040a 62%, #000 100%);
  transition:opacity 1.15s var(--ease), visibility 1.15s;
}
.curtain.gone{ opacity:0; visibility:hidden; pointer-events:none; }
.curtain__inner{ text-align:center; padding:24px; }
.curtain__orb{
  width:clamp(90px,13vw,150px); aspect-ratio:1; margin:0 auto clamp(28px,4vw,48px);
  border-radius:50%; position:relative;
  background:conic-gradient(from 0deg, #6ad8ff, #b98bff, #ff7ad9, #ffd28a, #6ad8ff);
  filter:blur(1px);
  animation:spin 14s linear infinite, breathe 6s ease-in-out infinite;
  box-shadow:0 0 90px 10px rgba(120,160,255,.35), inset 0 0 60px rgba(0,0,0,.4);
}
.curtain__orb::after{
  content:''; position:absolute; inset:14%;
  border-radius:50%; background:#04040a;
  box-shadow:inset 0 0 70px rgba(120,200,255,.35);
}
@keyframes spin{ to{ transform:rotate(360deg); } }
@keyframes breathe{ 0%,100%{ filter:blur(1px) saturate(1); } 50%{ filter:blur(9px) saturate(1.5); } }
.curtain__title{
  font-size:clamp(40px,8vw,96px); font-weight:200; letter-spacing:-.035em; line-height:1;
  margin-bottom:16px;
  background:linear-gradient(180deg,#fff,#9fb6ff 60%, #5f6fbf);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.curtain__title span{ opacity:.35; }
.curtain__sub{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.30em; text-transform:uppercase;
  color:var(--ink-faint); margin-bottom:clamp(30px,4vw,46px);
}
.curtain__enter{
  appearance:none; cursor:pointer;
  padding:15px 46px; border-radius:999px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.20);
  color:var(--ink); font-family:var(--mono); font-size:10.5px;
  letter-spacing:.34em; text-transform:uppercase;
  transition:.45s var(--ease);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}
.curtain__enter:hover{
  background:rgba(255,255,255,.14); border-color:#fff; letter-spacing:.42em;
  box-shadow:0 0 50px rgba(150,200,255,.45);
}
.curtain__note{
  margin-top:22px; font-family:var(--mono); font-size:9px; letter-spacing:.2em;
  text-transform:uppercase; color:rgba(244,246,255,.22);
}

.noscript,.fatal{
  position:absolute; inset:0; z-index:200; display:grid; place-items:center;
  background:#04040a; color:var(--ink); padding:40px; text-align:center;
  font-size:14px; letter-spacing:.04em; line-height:1.7;
}
.fatal[hidden]{ display:none; }

/* ──────────────────────────────  RESPONSIVE  ───────────────────────────── */
@media (max-width: 700px){
  .gal__head{ flex-direction:column; gap:16px; }
  .gal__tools{ align-self:flex-start; }
  .gal__filters{ gap:6px; }
  .chip{ padding:7px 11px; font-size:8.5px; letter-spacing:.14em; }
}

@media (max-width: 860px){
  .card{ bottom:calc(var(--pad) + 116px); max-width:min(48ch, 84vw); }
  .card__blurb{ display:none; }
  .hint{ display:none; }
  .brand__meta{ display:none; }
  .ctl__btn--txt{ display:none; }
  .ctl__btn[data-act="gallery"]{ display:inline-flex; }
  .rail{ right:var(--pad); bottom:calc(var(--pad) + 48px); }
  .ctl{ gap:4px; padding:5px; }
}
@media (max-width: 560px){
  .card{ bottom:calc(var(--pad) + 106px); }
  .card__meter{ display:none; }
  .rail{ height:40px; }
  .rail__item{ height:36px; }
  .rail__item.is-on::after{ height:32px; }
}

@media (max-height: 500px){
  .card__blurb,.card__meter{ display:none; }
  .card__name{ font-size:clamp(30px,5vw,46px); }
}

@media (prefers-reduced-motion: reduce){
  .rail{ scroll-behavior:auto; }
  .card.swap > *{ animation:none !important; }
  .fx-grain,.brand__orb,.curtain__orb{ animation:none !important; }
  .stage.reveal[data-kind="gl"] #gl,
  .stage.reveal[data-kind="2d"] #c2d{ animation:none; }
}