/* Letterbox opening, sticky category scene and 3D viewer. Loaded after cinematic.css. */

/* ---------- letterbox opening ---------- */
.splash .lb { position: absolute; left: 0; right: 0; background: #000; z-index: 3; pointer-events: none; height: 50%; }
.splash .lb.top { top: 0; animation: lb-open 2.7s cubic-bezier(.65, 0, .25, 1) forwards; }
.splash .lb.bot { bottom: 0; animation: lb-open 2.7s cubic-bezier(.65, 0, .25, 1) forwards; }
@keyframes lb-open { 0% { height: 50%; } 28% { height: 13%; } 84% { height: 13%; } 100% { height: 0; } }
.splash .flare { position: absolute; left: 0; right: 0; top: 50%; height: 2px; z-index: 2; background: linear-gradient(90deg, transparent, var(--cyan) 30%, #fff 50%, var(--magenta) 70%, transparent); box-shadow: 0 0 24px 4px rgba(0, 240, 255, .6); transform: scaleX(0); opacity: 0; animation: flare 1.1s cubic-bezier(.2, .8, .2, 1) .1s forwards; pointer-events: none; }
@keyframes flare { 0% { transform: scaleX(0); opacity: 1; } 55% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }

/* ---------- 3D product viewer ---------- */
.viewer { --W: min(64vw, 300px); position: relative; height: min(88vw, 440px); display: grid; place-items: center; perspective: 1100px; border-radius: 28px; overflow: hidden; border: 1px solid var(--line); background: radial-gradient(80% 70% at 50% 40%, rgba(255, 255, 255, .05), transparent 70%), var(--tile); cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.viewer.grab { cursor: grabbing; }
.viewer:focus-visible { outline-offset: 3px; }
.vglow { position: absolute; width: 70%; aspect-ratio: 1; left: 15%; top: 8%; border-radius: 50%; background: conic-gradient(#00f0ff, #9bff2f, #ff2bd6, #00f0ff); filter: blur(60px); opacity: .22; animation: spin 18s linear infinite; pointer-events: none; }
.vstage { position: relative; width: var(--W); aspect-ratio: 1; transform-style: preserve-3d; will-change: transform; margin-bottom: 18px; }
.vface { position: absolute; inset: 0; border-radius: 20px; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; background: var(--surface); box-shadow: 0 0 0 1px rgba(255, 255, 255, .08); }
.vface img, .vface .art { width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; }
.vface.front { transform: translateZ(16px); }
.vface.back { transform: rotateY(180deg) translateZ(16px); }
.vlayer { position: absolute; inset: 0; border-radius: 20px; background: #191930; border: 1px solid rgba(0, 240, 255, .35); }
.vshadow { position: absolute; bottom: 7%; left: 50%; width: 52%; height: 22px; translate: -50% 0; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(0, 240, 255, .45), transparent 70%); filter: blur(6px); pointer-events: none; }
.vhint { position: absolute; bottom: 14px; left: 50%; translate: -50% 0; padding: 6px 14px; border-radius: 999px; background: rgba(5, 5, 10, .7); color: #d9dbef; font-size: 13px; font-weight: 500; pointer-events: none; transition: opacity .4s; }
.viewer.used .vhint { opacity: 0; }
@media (min-width: 700px) {
  .viewer { --W: min(32vw, 340px); height: 480px; }
  .pdp .viewer { position: sticky; top: 90px; }
}
@media (prefers-reduced-motion: reduce) {
  .splash .lb, .splash .flare { display: none; }
}