/* ═══════════════════════════════════════════════════════
   ACCESS PASS — a laminated card you can tilt in your hand.
   Colours and content live in js/config.js.
   ═══════════════════════════════════════════════════════ */

:root{
  --bg:      #07070a;
  --card:    #101016;
  --card-2:  #0a0a0e;
  --ink:     #f2f0ea;
  --muted:   rgba(242,240,234,.52);
  --faint:   rgba(242,240,234,.3);
  --line:    rgba(242,240,234,.14);
  --line-2:  rgba(242,240,234,.07);
  --accent:  #ff3a3a;

  --display: "Anton", Impact, "Arial Narrow", sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --ease:    cubic-bezier(.2,.8,.25,1);
  --pad:     clamp(14px, 4vw, 26px);
}

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

html,body{ height:100% }

body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--mono);
  font-size:16px;
  line-height:1.5;
  overflow:hidden;                 /* the page never scrolls */
  -webkit-font-smoothing:antialiased;
}

::selection{ background:var(--accent); color:#000 }
a{ color:inherit; text-decoration:none }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer }

/* ─────────────── BACKDROP ─────────────── */
.bgv{
  position:fixed; inset:0; z-index:0;
  width:100%; height:100%; object-fit:cover;
  filter:blur(.5px); transform:scale(1.02);
  opacity:0; transition:opacity 1.2s var(--ease);
}
.bgv.on{ opacity:1 }

.bg-dim{ position:fixed; inset:0; z-index:1; pointer-events:none; background:rgba(0,0,0,.55) }
.bg-dim.is-gradient{
  background:
    radial-gradient(75% 55% at 50% 42%, rgba(216,255,58,.07), transparent 70%),
    radial-gradient(60% 50% at 15% 100%, rgba(90,140,255,.07), transparent 70%),
    #07070a;
}

.brandfield{
  position:fixed; inset:0; z-index:3; overflow:hidden; pointer-events:none;
  display:flex; flex-direction:column; justify-content:space-evenly;
  opacity:.12; mix-blend-mode:screen;
  -webkit-mask-image:linear-gradient(transparent, #000 12%, #000 88%, transparent);
  mask-image:linear-gradient(transparent, #000 12%, #000 88%, transparent);
}
.brandfield__row{ overflow:hidden; white-space:nowrap; line-height:.82 }
.brandfield__track{
  display:flex; width:max-content;
  animation:brand-drift 16s linear infinite;
}
.brandfield__row:nth-child(even) .brandfield__track{ animation-direction:reverse; animation-duration:20s }
.brandfield__track span{
  flex:none; font-family:var(--display); font-size:clamp(38px, 8vw, 112px);
  letter-spacing:.055em; color:var(--accent); text-transform:uppercase;
}
@keyframes brand-drift{ to{ transform:translateX(-50%) } }
body:not(.is-locked) .brandfield{ display:none }

/* faint horizontal lines over everything — reads as laminate/CRT */
.scan-lines{
  position:fixed; inset:0; z-index:2; pointer-events:none; opacity:.5;
  background:repeating-linear-gradient(
    to bottom, rgba(0,0,0,0) 0 2px, rgba(0,0,0,.22) 2px 3px);
}

/* ─────────────── CLICK TO ENTER ─────────────── */
.gate{
  position:fixed; inset:0; z-index:200;
  display:grid; place-items:center; cursor:pointer;
  background:rgba(7,7,10,.38); backdrop-filter:blur(1.5px);
  transition:opacity .8s var(--ease), visibility .8s;
}
.gate.is-out{ opacity:0; visibility:hidden; pointer-events:none }
.gate__inner{ display:flex; flex-direction:column; align-items:center; gap:22px; padding:20px; text-align:center }

/* a card slot the pass drops into */
.gate__slot{
  width:clamp(150px,42vw,210px); height:8px; border-radius:2px;
  background:var(--card-2); border:1px solid var(--line);
  position:relative; overflow:hidden;
}
/* a gradient that scrolls forever. background-size matches the keyframe
   distance, so it tiles seamlessly with no visible jump on repeat. */
.gate__slot span{
  position:absolute; inset:1px;
  background:linear-gradient(90deg, transparent, var(--accent), transparent);
  background-size:64px 100%;
  background-repeat:repeat-x;
  opacity:.8;
  animation:slot 1.1s linear infinite;
}
@keyframes slot{ to{ background-position:64px 0 } }

.gate__btn{
  font-family:var(--display); font-size:clamp(40px,10vw,86px); line-height:.9;
  letter-spacing:.02em; text-transform:uppercase;
  opacity:.25; pointer-events:none;
  transition:opacity .6s var(--ease), letter-spacing .6s var(--ease), color .4s;
}
.gate__btn.is-ready{ opacity:1; pointer-events:auto }
.gate__btn.is-ready:hover{ color:var(--accent); letter-spacing:.09em }

.gate__hint{
  font-size:10px; letter-spacing:.26em; text-transform:uppercase;
  color:var(--faint); display:flex; align-items:center; gap:8px;
  opacity:0; transition:opacity .8s .2s var(--ease);
}
.gate__btn.is-ready ~ .gate__hint{ opacity:1; animation:pulse 2.6s ease-in-out infinite }
.gate__spk{ width:13px; height:13px; flex:0 0 auto }
@keyframes pulse{ 0%,100%{ opacity:.4 } 50%{ opacity:.9 } }

/* ─────────────── STAGE + TILT ─────────────── */
.stage{
  position:relative; z-index:5;
  /* --vh is set from window.innerHeight by main.js — correct on mobile as the
     address bar shows and hides. 100% is the no-JS fallback. */
  height:var(--vh, 100%); max-height:var(--vh, 100%); width:100%;
  overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  padding:var(--pad);
  perspective:1400px;
  transition:opacity .8s var(--ease);
}
body.is-locked .stage{ opacity:0 }

/* Both cards live in one tilt wrapper so they lean together, like two
   cards lying on the same desk rather than two independent widgets. */
.tilt{
  display:flex; align-items:center; justify-content:center;
  gap:clamp(10px, 1.6vw, 18px);
  /* A definite height, inherited from .stage's real pixel height. Without it
     the cards' max-height:100% would resolve against an auto height, be
     ignored, and let a tall card run off the screen. */
  height:100%; max-width:100%;
  transform-style:preserve-3d;
  transition:transform .5s var(--ease);
  animation:deal 1s .1s var(--ease) both;
}
@keyframes deal{
  from{ opacity:0; transform:translateY(26px) rotateX(14deg) scale(.94) }
}

.pass{ flex:0 1 400px }
.pass--file{ flex:0 1 460px }

@media (max-width:900px){
  .tilt{ gap:0 }
  .pass, .pass--file{ flex:1 1 auto; max-width:460px }
}

.pass__kind--file{ display:none }

/* ─────────────── THE PASS ─────────────── */
.pass{
  position:relative;
  transform:translateY(var(--beat-y, 0px)) scale(var(--beat-scale, 1)) rotate(var(--beat-rotate, 0deg));
  transform-origin:center center;
  /* Resolves against .tilt, which is given a definite height below — that's
     what makes this percentage mean anything. */
  max-height:100%;
  overflow:hidden;
  overscroll-behavior:contain;
  padding:16px;
  border-radius:14px;
  border:1px solid var(--line);
  background:
    linear-gradient(158deg, #16161d 0%, #0d0d12 46%, #101017 100%);
  box-shadow:
    0 40px 80px -34px rgba(0,0,0,.95),
    0 2px 0 rgba(255,255,255,.05) inset,
    0 -1px 0 rgba(0,0,0,.6) inset;
  scrollbar-width:thin; scrollbar-color:var(--line) transparent;
}
.pass.is-scrollable{ overflow-y:auto }
.pass::-webkit-scrollbar{ width:4px }
.pass::-webkit-scrollbar-thumb{ background:var(--line); border-radius:4px }

/* Holographic foil — follows the cursor.
   Pastel and desaturated on purpose: saturated hues under color-dodge read
   as an RGB gaming keyboard. Soft-light over pale tints keeps it looking
   like light catching laminate instead. */
.pass__holo{
  position:absolute; inset:0; z-index:4; pointer-events:none; border-radius:inherit;
  background:
    repeating-linear-gradient(
      var(--holo-ang, 115deg),
      rgba(232,214,255,.10) 0%,     /* pale lavender */
      rgba(206,240,238,.10) 16%,    /* soft mint     */
      rgba(255,234,214,.10) 32%,    /* warm peach    */
      rgba(212,228,255,.10) 48%,    /* powder blue   */
      rgba(232,214,255,.10) 64%);
  mix-blend-mode:soft-light;
  opacity:var(--holo, .1);
  transition:opacity .5s var(--ease);
}
/* a faint specular bloom under the cursor */
.pass__glare{
  position:absolute; inset:0; z-index:5; pointer-events:none; border-radius:inherit;
  background:radial-gradient(
    300px circle at var(--gx,50%) var(--gy,0%),
    rgba(255,255,255,.07), transparent 68%);
  opacity:var(--holo, 0);
  transition:opacity .5s var(--ease);
}
/* fine laminate grain */
.pass::after{
  content:""; position:absolute; inset:0; z-index:3; pointer-events:none; border-radius:inherit;
  background:repeating-linear-gradient(
    to bottom, rgba(255,255,255,.022) 0 1px, transparent 1px 4px);
}

.pass > *:not(.pass__holo):not(.pass__glare){ position:relative; z-index:6 }

/* ── header strip ── */
.pass__top{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding-bottom:11px; margin-bottom:13px;
  border-bottom:1px solid var(--line-2);
  font-size:9px; letter-spacing:.24em; text-transform:uppercase; color:var(--faint);
}
.pass__kind{ color:var(--accent); font-weight:700 }
.pass__serial b{ color:var(--muted); font-weight:500 }

.pass__back{ display:inline-flex; align-items:center; gap:7px; color:var(--muted); transition:color .3s }
.pass__back:hover{ color:var(--accent) }
.pass__back i{ font-style:normal; font-size:13px; transition:transform .3s var(--ease) }
.pass__back:hover i{ transform:translateX(-3px) }

/* ── photo + name ── */
.pass__id{ display:flex; gap:14px; align-items:flex-start; margin-bottom:14px }

.photo{
  position:relative; flex:0 0 auto;
  width:82px; aspect-ratio:1; border-radius:3px; overflow:hidden;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.03) 0 2px, transparent 2px 7px),
    linear-gradient(160deg,#1a1a22,#0b0b0f);
  display:grid; place-items:center;
}
.photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:grayscale(.4) contrast(1.08) }
.photo__ph{ font-family:var(--display); font-size:26px; color:rgba(242,240,234,.24); letter-spacing:.02em }
.photo.is-off{ display:none }

/* corner brackets, like a registration mark */
.brk{ position:absolute; width:9px; height:9px; border:1.5px solid var(--accent); opacity:.8 }
.brk--tl{ top:4px; left:4px; border-right:0; border-bottom:0 }
.brk--tr{ top:4px; right:4px; border-left:0; border-bottom:0 }
.brk--bl{ bottom:4px; left:4px; border-right:0; border-top:0 }
.brk--br{ bottom:4px; right:4px; border-left:0; border-top:0 }

.pass__who{ min-width:0; flex:1 }
.pass__name{
  font-family:var(--display); font-weight:400;
  font-size:clamp(30px,8.5vw,44px); line-height:.92;
  letter-spacing:.005em; text-transform:uppercase;
  word-break:break-word;
}
.pass__role{
  font-size:10px; letter-spacing:.15em; text-transform:uppercase;
  color:var(--accent); margin-top:6px; line-height:1.4;
}

.pass__meta{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px 10px; margin-top:11px }
.pass__meta--wide{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px 14px; margin:13px 0 }
.pass__meta > div{ min-width:0 }
.pass__meta dt{ font-size:8px; letter-spacing:.2em; text-transform:uppercase; color:var(--faint) }
.pass__meta dd{ font-size:11px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap }

/* ── divider ── */
.rule{ height:1px; background:repeating-linear-gradient(90deg, var(--line) 0 4px, transparent 4px 8px); margin:13px 0 }

/* ── the link rows (dot leaders, like a form) ── */
.fields{ display:flex; flex-direction:column }

.field{
  position:relative; display:flex; align-items:baseline; gap:8px;
  padding:8px 6px; border-radius:5px;
  animation:fade .5s var(--ease) both; animation-delay:calc(.3s + var(--i,0) * .05s);
  transition:background .25s var(--ease);
}
@keyframes fade{ from{ opacity:0 } }
.field::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:2px; border-radius:2px;
  background:var(--accent); opacity:0; transition:opacity .25s var(--ease);
}
.field:hover, .field:focus-visible{ background:color-mix(in srgb, var(--accent) 12%, transparent) }
.field:hover::before, .field:focus-visible::before{ opacity:1 }

.field__k{
  font-size:10.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink); flex:0 0 auto; transition:color .25s;
}
.field:hover .field__k, .field:focus-visible .field__k{ color:var(--accent) }

/* the dotted leader that stretches between label and value */
.field__dots{
  flex:1 1 auto; min-width:12px; height:1px; align-self:center;
  background:radial-gradient(circle, var(--line) 1px, transparent 1px);
  background-size:5px 1px; background-repeat:repeat-x;
}

.field__v{
  font-size:10.5px; color:var(--muted); flex:0 1 auto; transition:color .25s;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:52%;
}
.field:hover .field__v, .field:focus-visible .field__v{ color:var(--accent) }
.field__go{ font-size:11px; color:var(--faint); flex:0 0 auto; transition:.25s var(--ease) }
.field:hover .field__go, .field:focus-visible .field__go{ color:var(--accent); transform:translate(1px,-1px) }

/* ── footer: barcode + link to page two ── */
.pass__foot{ display:flex; align-items:flex-end; justify-content:space-between; gap:14px }

.barcode{ display:flex; align-items:flex-end; gap:1.5px; height:26px; flex:1 1 auto; overflow:hidden }
.barcode i{ display:block; background:var(--muted); border-radius:.5px }

.scan{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:6px;
  padding:8px 12px; border-radius:6px;
  border:1px solid var(--line); background:rgba(255,255,255,.035);
  font-size:9.5px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  transition:background .25s var(--ease), border-color .25s, color .25s;
}
.scan:hover{ background:var(--accent); border-color:var(--accent); color:#07070a }
.scan i{ font-style:normal; font-size:13px; transition:transform .3s var(--ease) }
.scan:hover i{ transform:translateX(3px) }

.pass__stamp{
  flex:0 0 auto; padding:5px 11px; border-radius:3px;
  border:1.5px solid rgb(255, 255, 255); color:var(--accent);
  font-size:9.5px; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  transform:rotate(-4deg); opacity:.85;
}

/* ─────────────── PAGE TWO ─────────────── */
.file__h{
  font-family:var(--display); font-weight:400;
  font-size:clamp(28px,7vw,40px); line-height:.95;
  letter-spacing:.01em; text-transform:uppercase; margin-bottom:11px;
}
.file__text p{ font-size:11.5px; line-height:1.75; color:var(--muted); margin-bottom:9px }

.dossier{ display:flex; flex-direction:column; gap:7px; margin-bottom:15px }
.dossier:empty{ display:none }
.doc{
  padding:11px 13px; border-radius:6px;
  border:1px solid var(--line-2); background:rgba(255,255,255,.025);
  transition:border-color .25s var(--ease), background .25s;
}
.doc:hover{ border-color:var(--line); background:rgba(255,255,255,.045) }
.doc h3{
  font-size:10.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  margin-bottom:5px;
}
.doc p{ font-size:11px; line-height:1.65; color:var(--muted) }
.doc a{
  display:inline-block; margin-top:8px;
  font-size:9px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--accent); border-bottom:1px solid rgb(255, 255, 255); padding-bottom:2px;
  transition:border-color .25s;
}
.doc a:hover{ border-color:var(--accent) }

/* ─────────────── PORTFOLIO CAROUSEL ─────────────── */
.car{ margin-bottom:14px }

.car__frame{
  position:relative; aspect-ratio:4/3; overflow:hidden;
  border-radius:6px; border:1px solid var(--line-2);
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.02) 0 2px, transparent 2px 8px),
    #0b0b0f;
}
/* the same registration brackets as the ID photo, for continuity */
.car__frame > .brk{ z-index:5; opacity:.55 }

.car__track{ display:flex; height:100%; transition:transform .55s var(--ease) }
.car__track.no-anim{ transition:none }

.slide{
  position:relative; flex:0 0 100%; height:100%;
  cursor:zoom-in; overflow:hidden;
}
.slide img, .slide video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:contain;
  filter:grayscale(.22) contrast(1.04);
  transition:filter .4s var(--ease), transform .6s var(--ease);
}
.slide:hover img, .slide:hover video{ filter:none; transform:scale(1.03) }

.slide__play{
  position:absolute; left:8px; bottom:8px; z-index:3;
  width:20px; height:20px; border-radius:50%;
  background:rgba(7,7,10,.8); border:1px solid var(--line);
  display:grid; place-items:center;
}
.slide__play::after{
  content:""; margin-left:2px;
  border-left:6px solid var(--accent);
  border-top:4px solid transparent; border-bottom:4px solid transparent;
}

.car__count{
  position:absolute; top:8px; left:10px; z-index:6;
  padding:2px 7px; border-radius:3px;
  background:rgba(7,7,10,.72); border:1px solid var(--line);
  font-size:8.5px; letter-spacing:.18em; color:var(--muted);
}

.car__cap{
  position:absolute; left:0; right:0; bottom:0; z-index:4;
  padding:22px 10px 8px;
  background:linear-gradient(transparent, rgba(0,0,0,.88));
  font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.car__cap:empty{ display:none }
.car--still .car__count, .car--still .car__cap{ display:none }

.car__nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:6;
  width:26px; height:38px; border-radius:5px;
  border:1px solid var(--line); background:rgba(7,7,10,.66);
  backdrop-filter:blur(6px);
  font-size:18px; line-height:1; color:var(--muted);
  opacity:0; transition:.25s var(--ease);
}
.car:hover .car__nav{ opacity:1 }
.car__nav:hover{ color:var(--accent); border-color:var(--accent) }
.car__nav--prev{ left:7px } .car__nav--next{ right:7px }
/* always visible where there's no hover to reveal them */
@media (hover:none){ .car__nav{ opacity:1 } }

.car__dots{ display:flex; justify-content:center; gap:5px; margin-top:8px }
.car__dots:empty{ display:none }
.car__dots button{
  width:16px; height:3px; border-radius:2px;
  background:var(--line); transition:background .25s var(--ease), width .25s var(--ease);
}
.car__dots button:hover{ background:var(--muted) }
.car__dots button.on{ background:var(--accent); width:26px }

/* empty state — shown until real files exist */
.car__empty{
  position:absolute; inset:0; z-index:7;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:8px; padding:16px; text-align:center;
}
.car__empty b{
  font-size:9.5px; font-weight:700; letter-spacing:.24em; color:var(--accent);
}
.car__empty span{ font-size:9px; line-height:1.9; letter-spacing:.08em; color:var(--faint) }
.car__empty code{
  font-size:9px; color:var(--muted);
  background:rgba(255,255,255,.05); border-radius:3px; padding:1px 5px;
}
.car.has-media .car__empty{ display:none }
.car:not(.has-media) .car__nav,
.car:not(.has-media) .car__count{ display:none }

/* ─────────────── FULL-SIZE VIEWER ─────────────── */
.viewer{
  position:fixed; inset:0; z-index:300;
  display:grid; place-items:center; padding:clamp(16px,5vw,54px);
  background:rgba(4,4,6,.94); backdrop-filter:blur(10px);
  opacity:0; visibility:hidden; transition:opacity .35s var(--ease), visibility .35s;
}
.viewer.on{ opacity:1; visibility:visible }

.viewer__media{ display:grid; place-items:center; max-width:100%; max-height:100% }
.viewer img, .viewer video{
  max-width:100%; max-height:78vh; object-fit:contain;
  border-radius:6px; border:1px solid var(--line);
  transform:scale(.96); transition:transform .4s var(--ease);
}
.viewer.on img, .viewer.on video{ transform:none }

.viewer__cap{
  position:absolute; left:0; right:0; bottom:26px; text-align:center;
  font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted);
  padding:0 20px;
}
.viewer__cap a{ color:var(--accent); border-bottom:1px solid color-mix(in srgb, var(--accent) 40%, transparent) }

.viewer__x{
  position:absolute; top:18px; right:22px;
  width:34px; height:34px; border-radius:50%;
  border:1px solid var(--line); background:rgba(255,255,255,.05);
  font-size:15px; color:var(--muted); transition:.25s var(--ease);
}
.viewer__x:hover{ color:var(--accent); border-color:var(--accent) }

.viewer__nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:56px; border-radius:8px;
  border:1px solid var(--line); background:rgba(255,255,255,.04);
  font-size:24px; line-height:1; color:var(--muted); transition:.25s var(--ease);
}
.viewer__nav:hover{ color:var(--accent); border-color:var(--accent) }
.viewer__nav--prev{ left:12px } .viewer__nav--next{ right:12px }
.viewer__count{
  position:absolute; top:22px; left:24px;
  font-size:10px; letter-spacing:.2em; color:var(--faint);
}

/* ─────────────── PLAYER ─────────────── */
.player{
  position:fixed; right:var(--pad); bottom:var(--pad); z-index:70;
  display:flex; align-items:center; gap:9px;
  padding:5px 12px 5px 6px; border-radius:100px;
  border:1px solid var(--line); background:rgba(7,7,10,.72);
  backdrop-filter:blur(10px);
  opacity:0; transform:translateY(14px); transition:.6s .4s var(--ease);
}
.player.on{ opacity:1; transform:none }
.player.is-hidden{ display:none }
.player__skip{
  width:18px; height:24px; display:grid; place-items:center;
  color:var(--faint); font-size:18px; line-height:1;
  transition:color .2s var(--ease), transform .2s var(--ease);
}
.player__skip:hover{ color:var(--accent); transform:scale(1.12) }
.player__btn{
  width:24px; height:24px; border-radius:50%; flex:0 0 auto;
  background:var(--accent); display:grid; place-items:center;
}
.player__btn svg{ width:12px; height:12px; fill:#07070a }
.player__btn .ic-pause{ display:none }
.player.is-playing .ic-play{ display:none }
.player.is-playing .ic-pause{ display:block }
.player__viz{ width:58px; height:20px; opacity:.85 }
.player__title{ font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); white-space:nowrap }
.player__volume{
  display:flex; align-items:center; gap:6px; padding-left:9px;
  border-left:1px solid var(--line); color:var(--faint);
}
.player__volume svg{ width:13px; height:13px; flex:0 0 auto; fill:currentColor }
.player__volume input{
  width:76px; height:14px; appearance:none; -webkit-appearance:none;
  background:linear-gradient(to right, var(--accent) 0 var(--volume-level,30%), var(--line) var(--volume-level,30%) 100%);
  border-radius:99px; cursor:pointer;
}
.player__volume input::-webkit-slider-runnable-track{ height:3px; background:transparent }
.player__volume input::-moz-range-track{ height:3px; background:transparent }
.player__volume input::-webkit-slider-thumb{
  width:9px; height:9px; appearance:none; -webkit-appearance:none;
  margin-top:-3px; border:0; border-radius:50%; background:var(--accent);
  box-shadow:0 0 7px color-mix(in srgb, var(--accent) 55%, transparent);
}
.player__volume input::-moz-range-thumb{
  width:9px; height:9px; border:0; border-radius:50%; background:var(--accent);
  box-shadow:0 0 7px color-mix(in srgb, var(--accent) 55%, transparent);
}
.player__volume input:focus-visible{ outline:1px solid var(--accent); outline-offset:4px }

@media (min-width:901px){
  .scan, .pass__back{ display:none }
  .pass__kind--file{ display:inline }
}

/* ─────────────── SMALL SCREENS ─────────────── */
@media (max-width:430px){
  .player__title{ display:none }
  .player__volume{ gap:5px; padding-left:7px }
  .player__volume input{ width:58px }
  .player__viz{ width:36px }
  .pass__meta{ grid-template-columns:1fr 1fr }
  .field__v{ max-width:44% }
  .photo{ width:70px }
  .viewer__nav{ width:34px; height:46px; font-size:20px }
}

@media (max-height:620px){
  .photo{ width:64px }
  .pass__name{ font-size:clamp(26px,7vw,34px) }
  .field{ padding:6px 6px }
}

/* the tilt is a pointer flourish — never on touch, never when reduced */
@media (hover:none){ .tilt{ transform:none !important } }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important }
  .scan-lines{ display:none }
  .brandfield__track{ animation-duration:16s !important; animation-iteration-count:infinite !important }
  .player{ transition:none !important }

  /* The card tilt and the slot bar are asked for by name in the config,
     so they stay. Turn them off there, not here. */
  .gate__slot span{ animation:slot 1.1s linear infinite !important }
}