/* ============================================================================
   SECTIONS — boot, hero cue, sprite band, gallery, lightbox, arcade, process,
   contact, toasts, sound toggle, effects
   ========================================================================= */

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---- boot sequence ------------------------------------------------------ */
#boot{
  position:fixed;inset:0;z-index:var(--z-boot);background:var(--bg);
  display:grid;place-items:center;text-align:center;
}
#boot[hidden]{display:none}
#boot::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(to bottom,rgba(0,0,0,.4) 0 1px,transparent 1px 3px);
}
.boot-logo{
  font-size:clamp(16px,4vw,28px);color:var(--accent);
  text-shadow:0 0 30px rgba(var(--glow),.7);
  animation:drop .7s steps(8) both;
}
@keyframes drop{from{transform:translateY(-40vh)}to{transform:translateY(0)}}
.boot-bar{
  width:220px;height:10px;margin:var(--s8) auto var(--s4);
  box-shadow:inset 0 0 0 1px rgba(var(--glow),.4);
}
.boot-bar i{display:block;height:100%;width:0;background:var(--accent);animation:load 1.1s steps(11) .5s forwards}
@keyframes load{to{width:100%}}
.boot-skip{color:var(--ink-dim);opacity:0;animation:fadein .3s .9s forwards}
@keyframes fadein{to{opacity:1}}

/* ---- hero scroll cue ---------------------------------------------------- */
.scroll-cue{
  position:absolute;left:50%;bottom:var(--s8);transform:translateX(-50%);
  display:grid;gap:var(--s2);justify-items:center;
  text-decoration:none;background:none;border:0;cursor:var(--cur-point) 10 0,pointer;z-index:3;
}
.scroll-cue .label{font-size:10px;color:var(--ink-dim)}
.scroll-cue i{
  display:block;width:2px;height:26px;background:linear-gradient(var(--accent),transparent);
  animation:cue 1.8s ease-in-out infinite;
}
@keyframes cue{0%,100%{transform:translateY(0);opacity:1}50%{transform:translateY(7px);opacity:.35}}
@media(max-width:940px){.scroll-cue{display:none}}

/* ---- animated sprite band ------------------------------------------------
   Frame sheets driven by steps(). --f is frame count, --w the display size,
   --ms the frame duration (the slider writes it on the container).          */
.sprites{
  display:flex;flex-wrap:wrap;gap:var(--s12);align-items:flex-end;justify-content:center;
  margin-bottom:var(--s12);padding:var(--s12) var(--s6);
}
.sprite{text-align:center}
.sprite i{
  display:block;width:var(--w);height:var(--w);
  background-repeat:no-repeat;
  background-size:calc(var(--w) * var(--f)) var(--w);
  image-rendering:pixelated;
  animation:play calc(var(--f) * var(--ms,120ms)) steps(var(--f)) infinite;
  animation-play-state:var(--play,running);
  margin:0 auto var(--s3);
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.7));
}
@keyframes play{to{background-position:calc(var(--w) * var(--f) * -1) 0}}
@media(prefers-reduced-motion:reduce){.sprite i{animation:none}}
.sprite b{font-family:var(--font-ui);font-size:11px;font-weight:400;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-dim)}
.sprite-ctl{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;width:100%;justify-content:center;margin-top:var(--s4)}
.sprite-ctl .label{font-size:10px}

/* A range input that reads as hardware rather than an OS control. */
input[type=range]{
  -webkit-appearance:none;appearance:none;width:150px;height:6px;
  background:var(--raise);box-shadow:inset 0 0 0 1px var(--line);cursor:var(--cur-point) 10 0,pointer;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:12px;height:18px;background:var(--accent);
  box-shadow:0 0 10px rgba(var(--glow),.7);
}
input[type=range]::-moz-range-thumb{
  width:12px;height:18px;border:0;background:var(--accent);
  box-shadow:0 0 10px rgba(var(--glow),.7);
}

/* ---- gallery ------------------------------------------------------------ */
.gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:var(--s4)}
.gal button{
  display:block;padding:0;border:0;cursor:var(--cur-point) 10 0,pointer;background:var(--panel);
  position:relative;overflow:hidden;
  box-shadow:0 0 0 1px var(--line);
  transition:transform .3s cubic-bezier(.2,.9,.25,1.2),box-shadow .3s;
}
.gal button:hover{
  transform:translateY(-5px);
  box-shadow:0 0 0 1px rgba(var(--glow),.6),0 20px 34px -18px rgba(var(--glow),.5);
  z-index:2;
}
.gal img{width:100%;aspect-ratio:1;object-fit:cover;transition:transform .4s cubic-bezier(.2,.9,.25,1.1)}
.gal button:hover img{transform:scale(1.06)}
/* Caption rides up from the bottom edge on hover. */
.gal button::after{
  content:attr(data-cap);position:absolute;left:0;right:0;bottom:0;
  font-family:var(--font-ui);font-size:10px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--gb3);background:linear-gradient(transparent,rgba(0,0,0,.9));
  padding:var(--s6) var(--s2) var(--s2);
  transform:translateY(101%);transition:transform .28s cubic-bezier(.2,.9,.25,1.1);
}
.gal button:hover::after,.gal button:focus-visible::after{transform:translateY(0)}
.gal-group{grid-column:1/-1;display:flex;align-items:center;gap:var(--s4);margin-top:var(--s8)}
.gal-group:first-child{margin-top:0}
.gal-group h3{font-size:12px;color:var(--accent)}
.gal-group .rule{flex:1}

/* ---- lightbox ----------------------------------------------------------- */
.lightbox{
  position:fixed;inset:0;z-index:var(--z-lightbox);
  background:rgba(4,6,4,.96);
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;
  padding:var(--s16) var(--s6) var(--s12);
  backdrop-filter:blur(6px);
}
.lightbox[hidden]{display:none}
.lb-bar{
  position:fixed;top:var(--s4);left:0;right:0;
  display:flex;gap:var(--s4);align-items:center;justify-content:center;
}
.lightbox figure{margin:0;text-align:center;justify-self:center;max-width:min(76vw,640px)}
.lightbox img{
  width:100%;height:auto;max-height:70vh;object-fit:contain;
  box-shadow:0 0 0 1px rgba(var(--glow),.35),0 40px 80px -30px rgba(0,0,0,.9);
}
/* 1:1 mode: stop fitting to the box and show true pixels, scrollable. */
.lightbox.is-1x figure{max-width:90vw;overflow:auto;max-height:76vh}
.lightbox.is-1x img{width:auto;max-height:none}
.lightbox figcaption{color:var(--ink-soft);margin-top:var(--s4)}
.lb-nav{
  font-family:var(--font-display);font-size:14px;
  background:transparent;color:var(--ink-dim);border:0;cursor:var(--cur-point) 10 0,pointer;
  padding:var(--s6) var(--s4);transition:color .2s,transform .2s;
}
.lb-nav:hover{color:var(--accent);transform:scale(1.2)}
@media(max-width:700px){
  .lightbox{grid-template-columns:1fr;padding-top:var(--s24)}
  .lb-nav{position:fixed;bottom:var(--s6)}
  .lb-prev{left:var(--s6)}.lb-next{right:var(--s6)}
}

/* ---- arcade ------------------------------------------------------------- */
.arcade{display:grid;grid-template-columns:1.25fr 1fr;gap:var(--s16);align-items:center}
@media(max-width:940px){.arcade{grid-template-columns:1fr;gap:var(--s8)}}
.arcade-screen{padding:var(--s3)}
.arcade-screen canvas{width:100%;height:auto;display:block;touch-action:manipulation}
.arcade-side h3{font-size:17px;margin-bottom:var(--s4)}
.arcade-side p{color:var(--ink-soft);font-size:15px;max-width:48ch}
.arcade-scores{display:flex;gap:var(--s16);margin:var(--s8) 0}
.arcade-scores dd{margin:0;font-family:var(--font-display);font-size:24px;color:var(--accent)}
.arcade-controls{display:flex;flex-wrap:wrap;gap:var(--s4);align-items:center}
.arcade-hint{margin-top:var(--s4);font-size:11px}

/* ---- sound toggle -------------------------------------------------------- */
.sfx-btn{
  display:inline-flex;align-items:center;gap:var(--s2);
  font-family:var(--font-ui);font-size:12px;letter-spacing:.08em;
  padding:var(--s3) var(--s4);cursor:var(--cur-point) 10 0,pointer;border:0;
  background:transparent;color:var(--ink-soft);
  box-shadow:inset 0 0 0 1px var(--line-hi);
  transition:color .2s,box-shadow .2s;
}
.sfx-btn::before{
  content:"";width:8px;height:8px;background:var(--accent);
  box-shadow:0 0 10px rgba(var(--glow),.9);
}
.sfx-btn.is-off{color:var(--ink-dim)}
.sfx-btn.is-off::before{background:var(--ink-dim);box-shadow:none}
.sfx-btn:hover{color:var(--ink);box-shadow:inset 0 0 0 1px rgba(var(--glow),.5)}

/* ---- process steps ------------------------------------------------------ */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s4)}
@media(max-width:940px){.steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.steps{grid-template-columns:1fr}}
.steps li{padding:var(--s8);position:relative;transition:background .3s}
.steps li:hover{background:var(--raise)}
.step-n{
  display:inline-grid;place-items:center;width:var(--s8);height:var(--s8);
  color:var(--accent);font-size:12px;margin-bottom:var(--s6);
  box-shadow:inset 0 0 0 1px rgba(var(--glow),.4);
}
.steps h3{font-size:13px;margin-bottom:var(--s3)}
.steps p{font-size:14px;color:var(--ink-soft)}

/* ---- contact ------------------------------------------------------------ */
.contact-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:var(--s8);align-items:start}
@media(max-width:940px){.contact-grid{grid-template-columns:1fr}}
.contact-form{padding:var(--s8);display:grid;gap:var(--s6)}
.field{display:grid;gap:var(--s2)}
.field input,.field select,.field textarea{
  font-family:var(--font-body);font-size:16px;padding:var(--s3) var(--s4);
  background:#060806;color:var(--ink);border:0;
  box-shadow:inset 0 0 0 1px var(--line);
  transition:box-shadow .2s;
}
.field textarea{resize:vertical;min-height:120px}
/* Drop the OS select chrome and draw our own caret. */
.field select{
  -webkit-appearance:none;appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--accent) 50%),
                   linear-gradient(135deg,var(--accent) 50%,transparent 50%);
  background-position:calc(100% - 18px) 50%,calc(100% - 12px) 50%;
  background-size:6px 6px,6px 6px;
  background-repeat:no-repeat;
  padding-right:var(--s8);
}
.field select option{background:#060806;color:var(--ink)}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;
  box-shadow:inset 0 0 0 1px rgba(var(--glow),.8),0 0 20px -6px rgba(var(--glow),.5);
}
.field .invalid{box-shadow:inset 0 0 0 1px #e0563f}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-msg{min-height:1.4em}
.form-msg.ok{color:var(--accent)}
.form-msg.err{color:#e0563f}
.contact-side h3{font-size:13px;margin-bottom:var(--s6);color:var(--gb3)}
.links{list-style:none;margin:0 0 var(--s6);padding:0;display:grid;gap:var(--s4)}
.links li{display:grid;gap:2px}
.links a{
  font-family:var(--font-ui);font-size:15px;color:var(--gb3);text-decoration:none;
  border-bottom:1px solid rgba(var(--glow),.35);transition:border-color .2s;
}
.links a:hover{border-bottom-color:var(--gb3)}
.contact-note{font-size:14px;color:var(--gb2);opacity:.85}

/* ---- unlock toasts ------------------------------------------------------ */
.toasts{
  position:fixed;right:var(--s6);bottom:var(--s6);z-index:var(--z-toast);
  display:grid;gap:var(--s2);justify-items:end;pointer-events:none;
}
.toast{
  display:flex;align-items:center;gap:var(--s3);
  background:var(--panel);padding:var(--s3) var(--s4);
  box-shadow:inset 0 0 0 1px rgba(var(--glow),.4),0 18px 40px -20px rgba(0,0,0,.95);
  animation:toastin .4s cubic-bezier(.2,.9,.25,1.3);
}
.toast.out{animation:toastout .35s forwards}
.toast i{width:8px;height:8px;background:var(--accent);box-shadow:0 0 10px rgba(var(--glow),.9);flex:none}
.toast b{font-family:var(--font-ui);font-size:12px;font-weight:400;letter-spacing:.06em;color:var(--ink);display:block}
.toast small{font-family:var(--font-ui);font-size:10px;color:var(--ink-dim);display:block}
@keyframes toastin{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
@keyframes toastout{to{opacity:0;transform:translateX(24px)}}
@media(max-width:620px){.toasts{left:var(--s4);right:var(--s4);justify-items:stretch}}

/* ---- hero embers canvas -------------------------------------------------- */
.hero-fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1;image-rendering:pixelated}

/* ---- gallery dissolve ----------------------------------------------------
   Rules for an effect that sits on top of the artist's actual work:

     1. No animation-fill-mode. A fill mode pins an element to a keyframe, so
        an animation that never runs leaves the tile stuck in its "from" state.
     2. Never animate opacity. The wipe only touches clip-path, whose resting
        value is "no clipping" — any failure degrades to a visible tile.
     3. The stagger lives in JS, which adds the class late, rather than in
        animation-delay, which would need a fill mode to avoid a flicker.

   Two earlier versions of this rendered the gallery blank. Nothing here may be
   able to hide a piece.                                                      */
.fx-tile.fx-in{animation:tilein .40s steps(7)}
@keyframes tilein{
  from{clip-path:inset(0 0 100% 0)}
  to{clip-path:inset(0 0 0 0)}
}
.fx-tile.fx-in::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;z-index:3;
  background:linear-gradient(var(--gb3),var(--gb3));mix-blend-mode:overlay;
  animation:tileflash .42s steps(4);
}
@keyframes tileflash{from{opacity:.5}to{opacity:0}}
@media(prefers-reduced-motion:reduce){
  .fx-tile.fx-in,.fx-tile.fx-in::before{animation:none}
}

/* ---- CRT mode (konami) --------------------------------------------------- */
html.crt body::after{
  content:"";position:fixed;inset:0;z-index:var(--z-toast);pointer-events:none;
  background:
    repeating-linear-gradient(to bottom,rgba(0,0,0,.34) 0 1px,transparent 1px 3px),
    radial-gradient(120% 100% at 50% 50%,transparent 55%,rgba(0,0,0,.85) 100%);
  animation:flicker 4s steps(2) infinite;
}
@keyframes flicker{0%,97%{opacity:1}98%{opacity:.86}100%{opacity:1}}
html.crt main{filter:saturate(1.2) contrast(1.05)}