/* Interactive + 3D layer (loaded after styles.css) */
.kit-sec{background:var(--dark);color:var(--darkink);overflow:hidden}
.kit-sec h2{color:var(--darkink)}
.kit-sec .sub{max-width:46ch;opacity:.8;margin-top:16px}
#kit{position:relative;height:clamp(380px,62vh,640px);margin-top:36px;border:1.5px solid rgba(239,233,221,.25);border-radius:28px;background:radial-gradient(120% 90% at 50% 100%,rgba(255,79,31,.28),transparent 60%),#0a0908;touch-action:pan-y}
#kit canvas{width:100%;height:100%;display:block;cursor:grab;touch-action:pan-y}
#kit canvas:active{cursor:grabbing}
#kit.nogl:before{content:"3D needs WebGL — tap the pads below to play.";position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:24px;opacity:.7}
#kit-hint{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);background:var(--pop2);color:var(--ink);font:600 13px Inter;letter-spacing:.1em;text-transform:uppercase;padding:9px 16px;border-radius:999px;pointer-events:none;transition:opacity .4s,transform .4s;white-space:nowrap}
#kit-hint.gone{opacity:0;transform:translate(-50%,10px)}
.pads{display:grid;grid-template-columns:repeat(auto-fit,minmax(92px,1fr));gap:10px;margin-top:16px}
.pads button{font:600 13px Inter;letter-spacing:.08em;text-transform:uppercase;color:var(--darkink);background:transparent;border:1.5px solid rgba(239,233,221,.35);border-radius:14px;padding:14px 8px;cursor:pointer;transition:background .15s,color .15s,transform .1s;min-height:48px}
.pads button:hover{background:var(--pop2);color:var(--ink)}
.pads button:active{transform:scale(.94);background:var(--pop);color:#fff}
.pads kbd{display:block;font:500 11px Inter;opacity:.6;margin-top:3px}
@media (max-width:600px){.pads kbd{display:none}}

/* Shoot gallery */
.shoot-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,2vw,24px);margin-top:36px}
.shot{position:relative;display:block;aspect-ratio:4/5;border-radius:24px;overflow:hidden;border:2px solid var(--ink);background:#111;transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s;transform-style:preserve-3d;will-change:transform}
.shot:nth-child(2){margin-top:clamp(0px,4vw,48px)}.shot:nth-child(3){margin-top:clamp(0px,8vw,96px)}
.shot img{width:100%;height:100%;object-fit:cover;display:block}
.shot:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at var(--sx,50%) var(--sy,50%),rgba(255,255,255,.28),transparent 45%);opacity:0;transition:opacity .25s;mix-blend-mode:soft-light}
.shot:hover{box-shadow:10px 10px 0 var(--pop)}
.shot:hover:after{opacity:1}
.shot figcaption{position:absolute;left:12px;bottom:12px;background:var(--bg);color:var(--ink);font:600 12px Inter;letter-spacing:.1em;text-transform:uppercase;padding:7px 12px;border-radius:999px;border:1.5px solid var(--ink)}
@media (max-width:820px){.shoot-grid{grid-template-columns:1fr 1fr}.shot:nth-child(n){margin-top:0}}
@media (max-width:480px){.shoot-grid{grid-template-columns:1fr}}

/* tiles get the same tilt */
.tile.tilt{transition:transform .2s ease-out}

/* cursor glow */
.cursor-glow{position:fixed;left:-14px;top:-14px;width:28px;height:28px;border-radius:50%;background:var(--pop2);mix-blend-mode:difference;pointer-events:none;z-index:200;opacity:0;transition:width .2s,height .2s,margin .2s,opacity .3s}
.cursor-glow.big{width:64px;height:64px;margin:-18px 0 0 -18px}
@media (hover:none){.cursor-glow{display:none}}
@media (prefers-reduced-motion:reduce){.shot,.tile.tilt{transition:none}}