/* Work page: select-screen hero over animated fire trails, H-style card set, challenger closer */
@keyframes holoSweep{from{background-position:120% 0}to{background-position:-120% 0}}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}

.whero{position:relative;overflow:hidden;min-height:min(900px,100svh);display:flex;flex-direction:column;background:#0a0b1a}
.whero__bg,.whero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 85%}
.whero__video{opacity:0;transition:opacity 1s ease}
.whero__video.is-ready{opacity:1}
.whero__shade{position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(180deg,rgba(10,11,26,.85) 0%,rgba(10,11,26,.35) 30%,rgba(10,11,26,0) 55%,rgba(10,11,26,.15) 80%,#0a0b1a 100%),
  linear-gradient(90deg,rgba(10,11,26,0) 40%,rgba(10,11,26,.55) 70%,rgba(10,11,26,.2) 100%)}
.whero__scan{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0 1px,transparent 1px 4px)}
.whero .sparks{position:absolute;left:0;right:0;bottom:60px;height:260px;pointer-events:none}
.whero__in{position:relative;flex:1;width:100%;max-width:1280px;margin:0 auto;padding:40px 32px 60px;box-sizing:border-box;display:flex;flex-direction:column}
.whero__hud{display:flex;justify-content:space-between;align-items:center;gap:12px;font:400 12px var(--pixel);text-transform:uppercase}
.whero__hud .p1{color:var(--pink)}
.whero__hud h1{margin:0;font:400 clamp(16px,2.2vw,30px)/1.3 var(--pixel);color:var(--yellow);text-align:center;text-shadow:3px 3px 0 var(--pink),0 0 24px rgba(255,122,26,.6)}
.whero__hud .time{display:flex;align-items:center;gap:10px;color:#a49fd0}
.whero__hud .time b{font-weight:400;font-size:26px;color:#f4f1ff}
.whero__body{flex:1;display:flex;flex-wrap:wrap;align-items:center;gap:48px;padding-top:44px}

.pick{flex:1 1 380px;display:flex;justify-content:center;position:relative}
.pick::before{content:"";position:absolute;width:460px;height:460px;max-width:100%;border-radius:50%;background:radial-gradient(circle,rgba(255,122,26,.45),rgba(255,79,163,.2) 45%,transparent 70%);top:50%;left:50%;transform:translate(-50%,-50%)}
.pick__card{position:relative;display:block;width:min(350px,78vw);aspect-ratio:5/7;border-radius:16px;padding:9px;background:linear-gradient(135deg,#ff4fa3,#ffd23f 50%,#2de2e6);transform:perspective(900px) rotateY(14deg) rotateZ(-2deg);box-shadow:-24px 30px 60px rgba(0,0,0,.7),0 0 60px rgba(255,122,26,.5);transition:transform .5s cubic-bezier(.2,.8,.2,1);text-decoration:none;color:#f4f1ff}
.pick__card:hover,.pick__card:focus-visible{transform:perspective(900px) rotateY(0) rotateZ(0) translateY(-6px)}
.pick__face{position:relative;height:100%;border-radius:9px;overflow:hidden;background:#0a0b1a}
.pick__face img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pick__face::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,11,26,.4) 0%,transparent 25%,transparent 55%,rgba(10,11,26,.95) 100%)}
.pick__tag{position:absolute;top:12px;z-index:2;font:400 10px var(--pixel);color:#0a0b1a;padding:6px 8px;border-radius:3px}
.pick__tag--p1{left:12px;background:var(--pink)}
.pick__tag--holo{right:12px;font-size:8px;background:linear-gradient(90deg,#ff4fa3,#2de2e6)}
.pick__name{position:absolute;left:16px;right:16px;bottom:16px;z-index:2}
.pick__name small{display:block;font:400 8px var(--pixel);color:var(--cyan);margin-bottom:8px}
.pick__name strong{display:block;font:400 42px/.92 var(--display);text-transform:uppercase}
.holo-sheen{position:absolute;inset:0;z-index:1;pointer-events:none;mix-blend-mode:color-dodge;opacity:.55;background:linear-gradient(115deg,transparent 25%,rgba(255,79,163,.8) 40%,rgba(45,226,230,.8) 50%,rgba(255,210,63,.8) 60%,transparent 75%);background-size:260% 100%;animation:holoSweep 3.5s linear infinite}

.stats{flex:999 1 480px;min-width:0;background:rgba(10,11,26,.82);border:2px solid #3a2f6b;border-radius:14px;padding:30px 32px;box-shadow:0 30px 60px rgba(0,0,0,.5);backdrop-filter:blur(4px)}
.stats__head{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:10px}
.stats h2{margin:0;font:400 clamp(40px,4.2vw,62px)/.95 var(--display);text-transform:uppercase}
.stats__ok{font:400 9px var(--pixel);color:#5dff9a}
.stats__who{margin:10px 0 24px;color:#c9c4e6}
.stats__label{font:400 9px var(--pixel);color:#a49fd0;margin-bottom:12px}
.moves{display:grid;grid-template-columns:110px 1fr;gap:10px 16px;align-items:center;margin:0 0 26px}
.moves dt{font:400 9px var(--pixel);color:#f4f1ff}
.moves dt.off{color:#4a4870}
.moves dd{margin:0;display:grid;grid-template-columns:repeat(10,1fr);gap:3px}
.moves dd i{height:14px;background:#23264a}
.moves dd.on i:nth-child(1),.moves dd.on i:nth-child(2),.moves dd.on i:nth-child(3){background:#ff4fa3;box-shadow:0 0 6px #ff4fa3}
.moves dd.on i:nth-child(4){background:#ff7a8f;box-shadow:0 0 6px #ff7a8f}
.moves dd.on i:nth-child(5){background:#ff9a7a;box-shadow:0 0 6px #ff9a7a}
.moves dd.on i:nth-child(6){background:#ffb066;box-shadow:0 0 6px #ffb066}
.moves dd.on i:nth-child(7){background:#ffc54d;box-shadow:0 0 6px #ffc54d}
.moves dd.on i:nth-child(n+8){background:#ffd23f;box-shadow:0 0 6px #ffd23f}
.stats__boxes{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-bottom:26px}
.stats__box{background:#131533;border-radius:10px;padding:16px 18px}
.stats__box b{display:block;font:400 9px var(--pixel);margin-bottom:8px}
.stats__box strong{display:block;font:400 26px/1 var(--display);text-transform:uppercase}
.stats__box blockquote{margin:0;font:400 22px/1.1 var(--display);text-transform:uppercase}
.stats__box p{margin:8px 0 0;font-size:15px;color:#c9c4e6}
.stats__cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.press{font:400 12px var(--pixel);color:#0a0b1a;background:var(--yellow);padding:16px 20px;border-radius:6px;text-decoration:none;box-shadow:0 0 0 3px #0a0b1a,0 0 0 5px var(--yellow)}
.press:hover{color:#0a0b1a;background:#fff3b0}
.ghost{font-weight:700;color:#f4f1ff;padding:13px 18px;border:2px solid #f4f1ff;border-radius:6px;text-decoration:none}
.ghost:hover{color:var(--yellow);border-color:var(--yellow)}
.blink{font:400 9px var(--pixel);color:#a49fd0;animation:blink 1s steps(1) infinite}

/* The full set: H-style card faces (cream stock, color band, name strip) */
.set .cards{grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:26px 22px}
.set .tcard:nth-child(4n+1) .tcard__inner{rotate:-1.2deg}
.set .tcard:nth-child(4n+2) .tcard__inner{rotate:-.4deg}
.set .tcard:nth-child(4n+3) .tcard__inner{rotate:.4deg}
.set .tcard:nth-child(4n) .tcard__inner{rotate:1.2deg}
.set .tcard__front{background:#fdf8ec;padding:5px;display:block}
.set .tcard--holo .tcard__front{background:linear-gradient(135deg,#ff4fa3,#ffd23f 50%,#2de2e6);box-shadow:0 14px 30px rgba(0,0,0,.5),0 0 26px rgba(255,79,163,.45)}
.set .tcard__top{display:none}
.set .tcard__art{position:absolute;inset:5px;border:3px solid var(--c);border-radius:6px;background:#0a0b1a}
.set .tcard__art img{height:78%}
.set .tcard__name{position:absolute;left:8px;right:8px;bottom:8px;height:26%;margin:0;border-radius:0 0 4px 4px;padding:10px;box-sizing:border-box;display:flex;flex-direction:column;justify-content:flex-end;overflow:visible}
.set .tcard__name::before{content:"";position:absolute;left:-12%;right:-12%;top:-14px;height:24px;background:var(--c);transform:rotate(-7deg);z-index:-1}
.set .tcard__name h3{font-size:18px;position:relative}
.set .tcard__name p{color:var(--c);font-size:7px;position:relative}
.set .tcard__art{z-index:0}
.set .tcard__name{z-index:1;background:#0a0b1a}
.set .holo-tag{position:absolute;top:12px;right:12px;z-index:3;font:400 7px var(--pixel);color:#0a0b1a;background:linear-gradient(90deg,#ff4fa3,#2de2e6);padding:4px 5px;border-radius:3px}
.set .tcard--holo .tcard__top{display:block}
.set .tcard--holo .tcard__top span:first-child{display:none}
.set__hint{margin:22px 0 0;text-align:center;font:400 9px/1.8 var(--pixel);color:#a49fd0;text-transform:uppercase}

/* Closer */
.closer{text-align:center;padding:110px 32px 120px}
.closer .eyebrow{color:var(--cyan)}
.closer h2{margin:16px 0 0;font:400 clamp(56px,7vw,108px)/.9 var(--display);text-transform:uppercase}
.closer p.lede{margin:22px auto 30px;max-width:520px;color:#c9c4e6}

@media (max-width:760px){
  .whero__in{padding:28px 20px 48px}
  .whero__hud{font-size:9px}
  .whero__hud .time b{font-size:18px}
  .whero__body{gap:36px;padding-top:28px}
  .pick__card{transform:rotateZ(-2deg)}
  .stats{padding:24px 20px}
  .moves{grid-template-columns:90px 1fr}
  .set .cards{grid-template-columns:repeat(2,1fr);gap:18px 14px}
  .set .tcard__name h3{font-size:15px}
  .set .tcard__back{padding:12px;gap:7px}
  .set .tcard__back h3{font-size:18px}
  .set .tcard__back p{font-size:12.5px;line-height:1.35}
  .set .tcard__back .go{padding:8px;font-size:13px}
}
@media (prefers-reduced-motion:reduce){.holo-sheen,.blink{animation:none}.whero__video{display:none}}
.pick__face,.pick__name,.pick__name strong,.pick__name small{display:block}
.set .tcard__name{height:auto;min-height:26%}

/* Closer: graffiti wall rising from the footer */
.closer{position:relative;isolation:isolate;padding:150px 32px 230px}
.closer::before{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;background:url(/assets/img/home-graffiti.webp?v=2) center bottom/100% auto no-repeat;opacity:.3;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.25) 35%,#000 80%);mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.25) 35%,#000 80%)}
.closer::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 40% 50% at 50% 46%,rgba(10,11,26,.85),rgba(10,11,26,0) 100%)}
@media (max-width:760px){
  .closer{padding:110px 20px 250px}
  .closer::before{background-size:171% auto;background-position:98% bottom;opacity:.36;
    -webkit-mask-image:linear-gradient(180deg,transparent 0%,transparent 55%,rgba(0,0,0,.6) 68%,#000 82%);mask-image:linear-gradient(180deg,transparent 0%,transparent 55%,rgba(0,0,0,.6) 68%,#000 82%)}
  .closer::after{background:radial-gradient(ellipse 60% 38% at 50% 35%,rgba(10,11,26,.85),rgba(10,11,26,0) 100%)}
}

.whero__kicker{display:block;margin:0 0 10px;font-size:9px;line-height:1.6;color:var(--cyan);text-shadow:none}
@media (max-width:760px){.whero__kicker{font-size:7px}}

/* Hero v2: centered fire trails + spinning PXLPZA plate; Camp Creek panel removed */
.whero__bg,.whero__video{object-position:50% 60%}
.whero__shade{background:linear-gradient(180deg,rgba(10,11,26,.85) 0%,rgba(10,11,26,.25) 25%,rgba(10,11,26,0) 50%,rgba(10,11,26,.1) 85%,#0a0b1a 100%)}
.whero__body{min-height:520px}
@media (max-width:760px){
  .whero{min-height:0}
  .whero__in{padding-bottom:0}
  .whero__body{min-height:0;padding:0}
  .whero__body::after{content:"";display:block;width:100%;aspect-ratio:4/3}
}

/* Hero copy: big headline in the sky, above the spinning plate */
.whero__copy{width:100%;text-align:center;align-self:flex-start;padding-top:18px}
.whero__big{margin:0 auto;max-width:980px;font:400 clamp(44px,6.4vw,96px)/.92 var(--display);text-transform:uppercase;letter-spacing:-.5px;color:var(--text);text-shadow:0 0 28px rgba(255,79,163,.55),0 4px 30px rgba(0,0,0,.7)}
.whero__big .yellow{display:block;text-shadow:0 0 24px rgba(255,210,63,.45),0 4px 30px rgba(0,0,0,.7)}
.whero__sub{margin:18px auto 0;max-width:560px;font-size:18px;line-height:1.5;color:var(--muted);text-shadow:0 2px 12px rgba(0,0,0,.8)}
.whero__dash{margin:14px 0 0;font:400 10px var(--pixel);text-transform:uppercase;color:var(--cyan);letter-spacing:1px;text-shadow:0 0 8px rgba(45,226,230,.5)}
.whero__dash b{font-weight:400;color:var(--yellow)}
@media (max-width:760px){
  .whero__copy{padding-top:6px}
  .whero__big{font-size:clamp(34px,10vw,48px)}
  .whero__sub{font-size:15px;margin-top:10px}
  .whero__dash{font-size:7px}
}
.whero__plaque{display:inline-block;margin-top:18px;padding:12px 22px 12px;border-radius:12px;background:rgba(10,11,26,.62);border:1px solid rgba(255,255,255,.08);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);box-shadow:0 10px 30px rgba(0,0,0,.35)}
.whero__plaque .whero__sub{margin-top:0;color:var(--text)}
@media (max-width:760px){.whero__plaque{margin-top:10px;padding:8px 12px;max-width:94%}}
@media (max-width:760px){.whero__dash{white-space:nowrap;letter-spacing:.5px;font-size:6.5px}}
/* A11y/hierarchy pass: headline is the H1, "Select a project" becomes a HUD label */
.whero__hud .whero__title{margin:0;font:400 clamp(14px,1.7vw,22px)/1.3 var(--pixel);text-transform:uppercase;color:var(--yellow);text-align:center;text-shadow:2px 2px 0 var(--pink),0 0 18px rgba(255,122,26,.5)}
.set .holo-tag{font-size:8px}
@media (max-width:760px){
  .whero__hud .whero__title{font-size:11px}
  .whero__kicker{font-size:8px}
  .whero__dash{font-size:8px;letter-spacing:.5px}
  .whero__dest{display:none}
}
.set .tcard__name p{font-size:8px}
@media (max-width:760px){.set .tcard__back .go{min-height:44px;display:flex;align-items:center;justify-content:center}}
/* One flip hint above the grid; per-card flip buttons stay for keyboard users and appear on focus */
.set__hint{margin:-14px 0 22px;text-align:left;font-size:10px;color:var(--yellow)}
.set .tcard__flip{position:absolute!important;width:1px!important;height:1px!important;min-height:0!important;padding:0!important;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.set .tcard__flip:focus-visible{position:static!important;width:100%!important;height:auto!important;min-height:44px!important;padding:6px!important;clip:auto;overflow:visible;color:var(--yellow)}
/* Uniform mural spacing across pages */
.closer{padding-bottom:170px}
@media (max-width:760px){.closer{padding-bottom:190px}}
/* Card backs: text scales with the card, button always pinned at the bottom, extra copy scrolls */
.set .tcard{container-type:inline-size}
.set .tcard__back{padding:6cqw 6cqw 5cqw;gap:2.6cqw}
.set .tcard__back .pw{font-size:max(8px,3cqw);line-height:1.4}
.set .tcard__back h3{font-size:clamp(16px,8.6cqw,26px);line-height:1}
.set .tcard__back p{flex:1 1 auto;min-height:0;overflow-y:auto;font-size:clamp(12px,5.4cqw,15px);line-height:1.35;overscroll-behavior:contain;scrollbar-width:thin;
  -webkit-mask-image:linear-gradient(180deg,#000 82%,transparent);mask-image:linear-gradient(180deg,#000 82%,transparent);padding-bottom:6px}
.set .tcard__back ul{gap:4px;flex:0 0 auto}
.set .tcard__back li{font-size:8px;padding:5px 6px}
.set .tcard__back .go{flex:0 0 auto;margin-top:0;min-height:44px;display:flex;align-items:center;justify-content:center;padding:6px 8px;font-size:clamp(13px,5.4cqw,15px)}
/* only the visible face takes taps */
.tcard.is-flipped .tcard__front,.toy.is-flipped .toy__face:not(.toy__back){pointer-events:none}
.tcard:not(.is-flipped) .tcard__back{pointer-events:none}
/* very narrow cards (two-up on phones): drop the "Power-ups" label and keep chips on one swipeable row */
@container (max-width:200px){
  .set .tcard__back .pw + h3 + p + .pw{display:none}
  .set .tcard__back ul{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .set .tcard__back ul::-webkit-scrollbar{display:none}
  .set .tcard__back li{flex:0 0 auto}
}
@container (max-width:200px){
  .set .tcard__back .go__pre{display:none}
  .set .tcard__back .go__cs{display:inline-block}
  .set .tcard__back .go__cs::first-letter{text-transform:uppercase}
  .set .tcard__back ul{-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent)}
}
@container (max-width:200px){.set .tcard__back ul{overflow:hidden}}
.set .tcard__back .go__pre{margin-right:.28em}