/* Neon's Store v16: pro layer. Cursor label, pixel trail, click shockwave, card glare,
   timecode playhead, film look, settings panel. Loaded after fx2.css. */
:root { --ae-out: cubic-bezier(0.16, 1, 0.3, 1); --ae-over: cubic-bezier(0.34, 1.7, 0.5, 1); }

/* Pixel trail canvas */
.pro-trail { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 3150; pointer-events: none; }

/* Cursor context label ("Play", "Hit", "Order") that rides beside the ring */
.cur-lab { position: fixed; left: 0; top: 0; z-index: 3210; pointer-events: none; padding: 4px 9px 3px; background: var(--ink); color: #fff; border: 2px solid #fff; font: 700 13px/1 var(--font-display); letter-spacing: 0.02em; white-space: nowrap; opacity: 0; transform: translate3d(-99px, -99px, 0) scale(0.6); transform-origin: 0 0; transition: opacity 0.16s, transform 0.2s var(--ae-over); }
.cur-lab.on { opacity: 1; }
.cur-shock { position: fixed; z-index: 3190; width: 28px; height: 28px; margin: -14px 0 0 -14px; border: 3px solid var(--ink); border-radius: 50%; pointer-events: none; will-change: transform, opacity; }

/* Timecode playhead: the page is a timeline, the scrollbar is the playhead */
.pro-tc { position: fixed; left: 14px; bottom: 14px; z-index: 90; display: flex; align-items: center; gap: 8px; padding: 6px 10px 5px; background: var(--ink); color: #fff; border: 3px solid #fff; box-shadow: 3px 3px 0 var(--ink); font: 700 14px/1 var(--font-display); font-variant-numeric: tabular-nums; pointer-events: none; opacity: 0; transform: translateY(14px); transition: opacity 0.25s, transform 0.35s var(--ae-out); }
.pro-tc.on { opacity: 1; transform: none; }
.pro-tc i { width: 10px; height: 10px; background: #2bea34; transform: rotate(45deg); }
.pro-tc.on i { animation: tcblink 1s steps(2) infinite; }
@keyframes tcblink { 50% { background: #ffd400; } }
@media (max-width: 720px) { .pro-tc { display: none; } }

/* Card glare: a soft highlight that follows the pointer while the card tilts */
.tilt:hover { background-image: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 52%); }

/* Film look (optional, off by default to keep the flat brand colors) */
html.fx-grain::after { content: ""; position: fixed; inset: -60px; z-index: 3100; pointer-events: none; opacity: 0.09; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); animation: grain 0.7s steps(5) infinite; }
@keyframes grain { 0% { transform: translate(0, 0); } 20% { transform: translate(-22px, 14px); } 40% { transform: translate(18px, -26px); } 60% { transform: translate(-12px, -8px); } 80% { transform: translate(24px, 20px); } 100% { transform: translate(0, 0); } }

/* Motion off: everything lands instantly */
html.motion-off *, html.motion-off *::before, html.motion-off *::after { animation-duration: 0.001ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
html.motion-off .pro-tc, html.motion-off .cur-lab, html.motion-off .pro-trail { display: none; }

/* Settings button + panel (same flat look as the rest of the header) */
.set-btn svg { transition: transform 0.45s var(--ae-over); }
.set-btn[aria-expanded="true"] svg { transform: rotate(90deg); }
.set-panel { position: fixed; top: 76px; right: 14px; z-index: 3050; width: min(320px, calc(100vw - 28px)); padding: 16px; background: var(--paper, #fff); color: var(--ink); border: 3px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); display: grid; gap: 14px; transform-origin: 90% 0; opacity: 0; transform: scale(0.82) translateY(-8px); pointer-events: none; transition: opacity 0.15s, transform 0.3s var(--ae-over); }
.set-panel.open { opacity: 1; transform: none; pointer-events: auto; }
.set-panel h2 { margin: 0; font: 700 1.25rem/1 var(--font-display); }
.set-row { display: grid; gap: 6px; }
.set-row > span { font-weight: 700; font-size: 0.9rem; }
.set-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border: 3px solid var(--ink); }
.set-seg button, .set-sw, .set-replay { font: 600 0.9rem/1 var(--font-body, inherit); color: var(--ink); background: #fff; border: 0; padding: 9px 4px; cursor: pointer; }
.set-seg button + button { border-left: 3px solid var(--ink); }
.set-seg button[aria-pressed="true"] { background: var(--purple, #7a22e6); color: #fff; }
.set-sw { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 8px 10px; border: 3px solid var(--ink); text-align: left; }
.set-sw b { position: relative; flex: none; width: 42px; height: 22px; border: 3px solid var(--ink); background: #fff; transition: background 0.2s; }
.set-sw b::after { content: ""; position: absolute; top: 1px; left: 1px; width: 12px; height: 12px; background: var(--ink); transition: transform 0.25s var(--ae-over); }
.set-sw[aria-checked="true"] b { background: #2bea34; }
.set-sw[aria-checked="true"] b::after { transform: translateX(20px); }
.set-replay { border: 3px solid var(--ink); background: #ffd400; font-weight: 700; box-shadow: 3px 3px 0 var(--ink); }
.set-replay:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.set-note { margin: 0; font-size: 0.8rem; opacity: 0.75; }
.set-panel button:focus-visible, .set-btn:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .set-panel, .cur-lab, .pro-tc { transition: none; } }

/* Finish: brand selection, slim scrollbar, one focus ring everywhere */
::selection { background: #ffd400; color: #0b0612; }
html { scrollbar-width: thin; scrollbar-color: #7a22e6 transparent; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

/* Hero depth: each word of the logo sits on its own layer and drifts with the pointer (uses the separate translate property, so the entrance animations keep working) */
.logo-panel h1 .w1, .logo-panel h1 .w2, .logo-panel h1 .w3 { translate: calc(var(--px, 0) * var(--d, 10) * 1px) calc(var(--py, 0) * var(--d, 10) * 0.6px); transition: translate 0.35s var(--ae-out); }
.logo-panel h1 .w1 { --d: 8; } .logo-panel h1 .w2 { --d: 16; } .logo-panel h1 .w3 { --d: 26; }

/* Hero: floating pixel shapes behind the content */
.hero { isolation: isolate; position: relative; }
.fl { position: absolute; z-index: -1; width: var(--s, 22px); height: var(--s, 22px); background: var(--c, #ffd400); border: 3px solid var(--ink); pointer-events: none; animation: flo var(--t, 7s) ease-in-out var(--dl, 0s) infinite alternate; }
@keyframes flo { from { transform: translate3d(0, 0, 0) rotate(0deg); } to { transform: translate3d(var(--fx, 14px), -22px, 0) rotate(var(--r1, 45deg)); } }
@media (max-width: 900px) { .fl { display: none; } }

/* Checkout: stepper pops, picked options snap, fields lift on focus */
.stepper li { transition: background-color 0.3s var(--ae-out), box-shadow 0.35s var(--ae-out), transform 0.45s var(--ae-over), opacity 0.3s; }
.stepper li.is-current { transform: translate(-2px, -2px); }
.stepper li.is-done b { animation: ckpop 0.55s var(--ae-over); }
.stepper li.is-current b { animation: ckpop 0.45s var(--ae-over); }
@keyframes ckpop { 0% { transform: scale(0.4) rotate(-30deg); } 100% { transform: none; } }
.opt.is-checked { animation: optpop 0.45s var(--ae-over); }
@keyframes optpop { 0% { transform: scale(0.96); } 55% { transform: scale(1.025); } 100% { transform: none; } }
.field input, .field textarea { transition: transform 0.3s var(--ae-out), box-shadow 0.3s var(--ae-out), border-color 0.2s; }
.field input:focus, .field textarea:focus { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--purple, #7a22e6); }

/* Spring-driven hero depth (JS spring replaces the CSS transition) and scrubbed text */
.logo-panel h1 .w1, .logo-panel h1 .w2, .logo-panel h1 .w3 { transition: none; }
.sc-w { opacity: 0.22; transition: opacity 0.3s var(--ae-out); }
.sc-w.on { opacity: 1; }

/* Home timeline (an editing timeline that plays as you scroll) */
.tl-box { position: relative; background: var(--paper, #fff); color: var(--ink); border: 4px solid var(--ink); box-shadow: 9px 9px 0 #7a22e6; overflow: hidden; }
.tl-row { display: grid; grid-template-columns: 64px 1fr; border-top: 3px solid var(--ink); }
.tl-row:first-child { border-top: 0; }
.tl-row b { display: grid; place-items: center; font: 700 1rem/1 var(--font-display); background: var(--cream, #f4efe6); border-right: 3px solid var(--ink); }
.tl-lane { position: relative; height: 56px; }
.tl-lane i { position: absolute; top: 6px; bottom: 6px; left: calc(var(--a) * 1%); width: calc(var(--w) * 1%); display: flex; align-items: center; padding: 0 8px; background: var(--c); border: 3px solid var(--ink); font: 700 0.85rem/1 var(--font-display); font-style: normal; color: var(--ink); white-space: nowrap; overflow: hidden; opacity: 0; transform: scaleX(0.2); transform-origin: left; transition: opacity 0.2s, transform 0.5s var(--ae-over); }
.tl-lane i.lt { color: #fff; }
.tl-lane i.on { opacity: 1; transform: none; }
.tl-ph { position: absolute; top: 0; bottom: 0; left: calc(64px + (100% - 64px) * var(--k, 0)); width: 3px; margin-left: -1px; background: #ff3b3b; z-index: 2; pointer-events: none; }
.tl-ph span { position: absolute; top: 0; left: 50%; transform: translateX(-50%); padding: 3px 6px; background: #ff3b3b; color: #fff; border: 3px solid var(--ink); font: 700 0.8rem/1 var(--font-display); font-variant-numeric: tabular-nums; }
.tl-end { position: absolute; right: 12px; bottom: 10px; z-index: 3; padding: 8px 12px; background: #2bea34; color: var(--ink); border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); font: 700 1rem/1 var(--font-display); opacity: 0; transform: scale(0.5) rotate(-8deg); transition: opacity 0.2s, transform 0.5s var(--ae-over); }
.tl-end.on { opacity: 1; transform: rotate(-3deg); }
@media (max-width: 600px) { .tl-row { grid-template-columns: 40px 1fr; } .tl-ph { left: calc(40px + (100% - 40px) * var(--k, 0)); } .tl-lane i { font-size: 0.7rem; padding: 0 4px; } }