/*
 * Pixel kit: one shared retro layer for the portfolio.
 * Inspired by the "Loot Pixel" reveal: hard pixels, ordered dither instead of
 * soft alpha, stepped motion, scanlines, square sparks. Tokens stay on the
 * site palette (purple, white, grayscale) and the two-size type system.
 */
:root{
  --px-unit:3px;
  --px-purple:#b87bfb;
  --px-lilac:#d7b4ff;
  --px-pale:#f2e7ff;
  --px-deep:#7d52c4;
  --px-ink:#0b0a0e;
  --px-scan:repeating-linear-gradient(to bottom,transparent 0 2px,#00000038 2px 3px);
}

/* Screen-reader copy for split headings. */
.px-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- Pixel buttons: bevel, hard drop shadow, stepped lift and press ---------- */
.button-work,
.simpol-controls button,
.rice-race-actions button{
  --px-hi:#e9d8ff;
  --px-lo:#7d52c4;
  --px-drop:var(--px-ink);
  --px-extra:0 0 #0000;
  box-shadow:inset 2px 2px 0 var(--px-hi),inset -2px -2px 0 var(--px-lo),4px 4px 0 var(--px-drop),var(--px-extra);
  transition:background-color .12s steps(2,end),color .12s steps(2,end),box-shadow .12s steps(2,end),translate .12s steps(2,end);
  -webkit-tap-highlight-color:transparent;
}
/* The hover state grows the drop shadow only, so the hit box never moves. */
@media(hover:hover){
  .button-work:hover,
  .simpol-controls button:hover,
  .rice-race-actions button:hover{--px-hi:#fff;--px-lo:#bdb3cc;box-shadow:inset 2px 2px 0 var(--px-hi),inset -2px -2px 0 var(--px-lo),6px 6px 0 var(--px-drop),var(--px-extra)}
  .cta-actions .copy-email-button:hover{--px-hi:#ffffff55;--px-lo:#00000070;box-shadow:inset 0 0 0 1px #ffffff55,inset 2px 2px 0 var(--px-hi),inset -2px -2px 0 var(--px-lo),6px 6px 0 var(--px-drop),var(--px-extra)}
  .simpol-controls button:not(:last-child):hover,
  .rice-race-actions button:not(:last-child):hover{--px-hi:#fff;--px-lo:#bdb3cc}
}
.button-work:active,
.simpol-controls button:active,
.rice-race-actions button:active{translate:4px 4px;box-shadow:inset 2px 2px 0 var(--px-lo),inset -2px -2px 0 var(--px-hi),0 0 0 var(--px-drop),var(--px-extra);transition-duration:0s}
.button-work:focus-visible,
.simpol-controls button:focus-visible,
.rice-race-actions button:focus-visible{outline:2px solid var(--px-pale);outline-offset:4px}

/* Ghost buttons keep their outline and take the same pixel depth. */
.cta-actions .copy-email-button,
.simpol-controls button:not(:last-child),
.rice-race-actions button:not(:last-child){--px-hi:#ffffff30;--px-lo:#00000070}
.cta-actions .copy-email-button{box-shadow:inset 0 0 0 1px #ffffff30,inset 2px 2px 0 var(--px-hi),inset -2px -2px 0 var(--px-lo),4px 4px 0 var(--px-drop),var(--px-extra)}
.cta-actions .copy-email-button:active{box-shadow:inset 0 0 0 1px #ffffff55,inset 2px 2px 0 var(--px-lo),inset -2px -2px 0 var(--px-hi),0 0 0 var(--px-drop),var(--px-extra)}
/* The floating Open2Jam button keeps its legibility shadow over the game lane. */
.lab-card .jam-play{--px-extra:0 .4rem 2rem #000b}

/* Text links select like a terminal menu item. */
.case-study_links a,.lab-card_link{transition:color .12s steps(2,end),background-color .12s steps(2,end),box-shadow .12s steps(2,end)}
.case-study_links a:hover,.case-study_links a:focus-visible,.lab-card_link:hover,.lab-card_link:focus-visible{color:#000;background:var(--px-purple);border-color:transparent;box-shadow:0 0 0 3px var(--px-purple);outline:2px solid transparent;outline-offset:3px}

/* One impact frame when a button confirms an action. */
.px-impact{animation:px-impact .3s steps(1,end)}
@keyframes px-impact{0%{background-color:#fff;color:#000;box-shadow:inset 0 0 0 2px #000,0 0 0 2px #fff}33%{background-color:#000;color:#fff;box-shadow:inset 0 0 0 2px #fff,0 0 0 2px #000}66%{background-color:var(--px-purple);color:#000}}

/* ---------- Corner glyphs shared by every panel ---------- */
.px-corners{position:absolute;z-index:5;inset:0;pointer-events:none;color:var(--px-purple);line-height:1}
.px-corners i{position:absolute;font-style:normal}
.px-corners i:first-child{top:-.12rem;left:-.08rem}
.px-corners i:last-child{right:-.08rem;bottom:-.12rem}

/* ---------- Header card: stars pop in, one glints at a time, foil sweep on hover ---------- */
.works-intro_content-stars .px-star{display:inline-block;position:relative}
.px-stars-wait .px-star{opacity:0}
.px-stars-in .px-star{animation:px-star-pop .42s steps(4,end) both;animation-delay:calc(var(--i) * 110ms)}
@keyframes px-star-pop{0%{opacity:0;transform:scale(0)}25%{opacity:1;transform:scale(1.75);color:#fff}60%{transform:scale(.8)}100%{opacity:1;transform:scale(1)}}
.px-star.is-glint{color:#fff}
.px-star.is-glint:after{content:"";position:absolute;left:50%;top:50%;width:2px;height:2px;margin:-1px 0 0 -1px;background:#fff;box-shadow:0 -4px #fff,0 4px #fff,-4px 0 #fff,4px 0 #fff,0 -8px var(--px-lilac),0 8px var(--px-lilac),-8px 0 var(--px-lilac),8px 0 var(--px-lilac);animation:px-twinkle .5s steps(3,end) both;pointer-events:none}
@keyframes px-twinkle{0%{opacity:0;transform:scale(.4)}40%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.4)}}
.px-foil{position:absolute;z-index:1;inset:0;overflow:hidden;pointer-events:none}
.px-foil:before{content:"";position:absolute;inset:-20% auto -20% 0;width:45%;background:linear-gradient(100deg,transparent 0 30%,#ffffff26 42%,#d7b4ff40 50%,#ffffff26 58%,transparent 70% 100%);-webkit-mask-image:var(--px-checker);mask-image:var(--px-checker);-webkit-mask-size:var(--px-checker-size);mask-size:var(--px-checker-size);transform:translateX(-120%);opacity:0}
.px-foil.is-sweeping:before{animation:px-foil-sweep .72s steps(12,end) both}
@keyframes px-foil-sweep{0%{transform:translateX(-120%);opacity:1}100%{transform:translateX(330%);opacity:1}}

/* ---------- Letter drop for section headings ---------- */
.px-word{display:inline-block;white-space:nowrap}
.px-char{display:inline-block}
html body .px-word,html body .px-char,html body .px-sr,html body .px-star{font-size:inherit!important}
.px-drop-wait .px-char{opacity:0}
.px-drop .px-char{animation:px-drop .56s both;animation-delay:calc(var(--i) * 18ms)}
@keyframes px-drop{
  0%{opacity:0;transform:translateY(-1.1em);animation-timing-function:steps(3,end)}
  1%{opacity:1}
  32%{transform:translateY(0);animation-timing-function:steps(2,end);color:#fff}
  48%{transform:translateY(-.25em);animation-timing-function:steps(2,end)}
  64%{transform:translateY(0);animation-timing-function:steps(1,end)}
  76%{transform:translateY(-.08em)}
  86%,100%{opacity:1;transform:translateY(0)}
}

/* ---------- Materialize: dither mask plus bottom-to-top scan (driven by pixel-kit.js) ---------- */
.px-await{-webkit-mask-image:linear-gradient(transparent,transparent);mask-image:linear-gradient(transparent,transparent)}

/* ---------- Screens: scanlines aligned to 3px rows ---------- */
.px-scanlines{position:absolute;z-index:2;inset:0;pointer-events:none;background:var(--px-scan);mix-blend-mode:multiply;opacity:.85}
.case-study_visual>a .px-scanlines{transition:opacity .2s steps(2,end)}
.case-study_visual>a:hover .px-scanlines,.case-study_visual>a:focus-visible .px-scanlines{opacity:.45}

/* ---------- CTA banners: dithered light and vignette instead of soft gradients ---------- */
.section_mid-cta .mid-cta_banner:before{background:none!important}
.px-glow{position:absolute;z-index:1;inset:0;pointer-events:none;background-repeat:no-repeat;background-size:100% 100%;image-rendering:pixelated}
.px-glow:after{content:"";position:absolute;inset:0;background:var(--px-scan);opacity:.55}

/* ---------- Progress badge: one impact frame per page change ---------- */
.departure-progress.px-flash{animation:px-progress-flash .26s steps(1,end)}
@keyframes px-progress-flash{0%{color:#000;background:var(--px-lilac);box-shadow:inset 0 0 0 1px #fff}50%{color:#fff;background:#000;box-shadow:inset 0 0 0 1px var(--px-purple)}}

/* ---------- Effects canvas ---------- */
.px-fx{position:fixed;z-index:1001;inset:0;width:100%;height:100%;pointer-events:none;image-rendering:pixelated}

@media(prefers-reduced-motion:reduce){
  .button-work,.simpol-controls button,.rice-race-actions button{transition:none}
  .button-work:active,.simpol-controls button:active,.rice-race-actions button:active{translate:none}
  .px-impact,.px-stars-in .px-star,.px-star.is-glint:after,.px-foil.is-sweeping:before,.px-drop .px-char,.departure-progress.px-flash{animation:none!important}
  .px-stars-wait .px-star,.px-drop-wait .px-char{opacity:1}
  .px-await{-webkit-mask-image:none;mask-image:none}
}

/* Print everything, whatever was scrolled into view. */
@media print{
  .px-await,.case-study_visual>a,.case-metrics,.lab-card,.mid-cta_banner{-webkit-mask:none!important;mask:none!important}
  .px-drop-wait .px-char,.px-stars-wait .px-star{opacity:1!important}
  .px-fx,.px-foil,.px-scanlines{display:none!important}
}