/* Neon's Store: FX styles v2. Loaded after style.css, so these rules win. */

/* Keyboard focus: thick ink ring instead of the browser's default blue box */
:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }
.nav a:focus-visible { background: var(--yellow); outline-offset: 2px; }

/* ---------- Startup intro: dark viewfinder, camera finds focus, then flashes ---------- */
.intro { background-color: #0b0612; background-image: radial-gradient(rgba(122, 34, 230, 0.55) 2px, transparent 2.6px); background-size: 26px 26px; }
.intro::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 40%, rgba(0, 0, 0, 0.6)); pointer-events: none; }
.vf { border-color: #fff; }
.intro-rec, .intro-tc { -webkit-text-stroke: 0; color: #fff; text-shadow: 3px 3px 0 #7a22e6; }
.intro-rec i { border-color: #fff; }
.intro-stage { position: relative; z-index: 2; display: grid; justify-items: center; gap: clamp(18px, 4vw, 34px); }
.intro-camwrap { position: relative; }
.intro-cam { width: clamp(180px, 36vw, 340px); font-size: 0; line-height: 0; filter: drop-shadow(8px 8px 0 #7a22e6); will-change: transform; }
.intro-cam svg { display: block; width: 100%; height: auto; }
.intro-af { position: absolute; inset: -11%; opacity: 0; pointer-events: none; }
.intro-af b { position: absolute; width: 22%; height: 22%; border: 0 solid #fff; transition: border-color 0.12s; }
.intro-af b:nth-child(1) { left: 0; top: 0; border-width: 5px 0 0 5px; }
.intro-af b:nth-child(2) { right: 0; top: 0; border-width: 5px 5px 0 0; }
.intro-af b:nth-child(3) { left: 0; bottom: 0; border-width: 0 0 5px 5px; }
.intro-af b:nth-child(4) { right: 0; bottom: 0; border-width: 0 5px 5px 0; }
.intro-af.lock b { border-color: #2bea34; }
.intro-word { display: flex; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.5rem, 5.4vw, 3rem); letter-spacing: 0.05em; text-transform: uppercase; color: #fff; }
.intro-word span { display: inline-block; text-shadow: 4px 4px 0 #7a22e6; opacity: 0; }
.intro-flash { clip-path: circle(0 at 50% 50%); }
/* Before the timeline starts (heavy setup + sound loading) the stage is hidden so nothing pops in half-way */
.intro.pre .intro-stage, .intro.pre .vf, .intro.pre .intro-rec, .intro.pre .intro-tc { visibility: hidden; }
.intro-gate { position: absolute; left: 0; right: 0; top: 50%; z-index: 3; text-align: center; transform: translateY(-50%); font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: clamp(1.6rem, 6vw, 3.4rem); letter-spacing: 0.06em; color: #fff; text-shadow: 4px 4px 0 #7a22e6; cursor: pointer; animation: gate-blink 1s steps(1) infinite; }
@keyframes gate-blink { 50% { opacity: 0.35; } }
.intro.gate { cursor: pointer; }
/* The header drops in once the flash has gone */
html.intro-wait .site-head { transform: translateY(-115%); }

/* ---------- Headlines: each one enters its own way (--k-t is set per headline) ---------- */
.k-i { transform: var(--k-t, translateY(118%) rotate(7deg)); transition-duration: 0.55s; }

/* ---------- Scroll reveals: five different entrances ---------- */
.js [data-reveal][data-fx="drop"]:not(.in) { transform: translateY(-44px) rotate(1.5deg); }
.js [data-reveal][data-fx="pop"]:not(.in) { transform: scale(0.8) rotate(-2deg); }
.js [data-reveal][data-fx="tilt"]:not(.in) { transform: translateY(34px) rotate(-3.5deg); transform-origin: 0 100%; }
.js [data-reveal][data-fx="flip"]:not(.in) { transform: perspective(800px) rotateX(38deg) translateY(30px); transform-origin: 50% 0; }
.js [data-reveal][data-fx="pop"].in { transition-timing-function: var(--ease-spring); }

/* ---------- Checkout steps slide the way you are going ---------- */
@keyframes step-back { from { opacity: 0; transform: translateX(-34px); } to { opacity: 1; transform: none; } }
.dir-back .co-step:not([hidden]) { animation-name: step-back; }

/* ---------- Toast: stamps in with a little overshoot ---------- */
.toast { transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-io); }
.toast.show { animation: toast-pop 0.55s var(--ease-spring) both; }
@keyframes toast-pop {
  0% { transform: translate(-50%, 40px) scale(0.85) rotate(-2deg); }
  60% { transform: translate(-50%, -7px) scale(1.04) rotate(0.6deg); }
  100% { transform: translate(-50%, 0) scale(1) rotate(0); }
}

/* ---------- FAQ: panel slides open, the plus turns ---------- */
.faq summary::after { display: inline-block; transition: transform 0.4s var(--ease-spring); }
.faq details[open] summary::after { transform: rotate(180deg); }
@supports (interpolate-size: allow-keywords) {
  .faq details { interpolate-size: allow-keywords; }
  .faq details::details-content { height: 0; overflow: clip; transition: height 0.45s var(--ease-out), content-visibility 0.45s allow-discrete; }
  .faq details[open]::details-content { height: auto; }
}

/* ---------- Cart pill: bigger bounce ---------- */
.cart-pill.bump { animation: bump2 0.5s var(--ease-spring); }
@keyframes bump2 { 0% { transform: scale(1); } 35% { transform: scale(1.22) rotate(-4deg); } 65% { transform: scale(0.96) rotate(2deg); } 100% { transform: scale(1); } }

/* ---------- Done badge: spins in ---------- */
@keyframes pop-in { from { transform: scale(0) rotate(-200deg); } 70% { transform: scale(1.12) rotate(4deg); } to { transform: scale(1) rotate(-6deg); } }
.done-badge { animation-duration: 0.85s; animation-timing-function: var(--ease-spring); }

@media (prefers-reduced-motion: reduce) {
  .toast.show, .dir-back .co-step, .cart-pill.bump, .done-badge { animation: none !important; }
  .k-i { transform: none !important; }
  html.intro-wait .site-head { transform: none; }
}

/* guard: entrance animations that start off-screen must never create a sideways scrollbar */
html, body { overflow-x: clip; }

/* Perf: skip layout/paint of off-screen sections, keep infinite animations cheap */
.view .sec:not(#tt-section) { content-visibility: auto; contain-intrinsic-size: auto 600px; }

/* ---------- Welcome agreement + cookie settings ---------- */
.consent { display: none; position: fixed; inset: 0; z-index: 3100; place-items: center; padding: 16px; overflow: auto; background: rgba(11, 6, 18, 0.9); }
html.consent-wait .consent, html.consent-open .consent { display: grid; }
html.consent-wait, html.consent-open { overflow: hidden; }
.consent-card { width: min(560px, 100%); display: grid; gap: 14px; padding: 24px; background: var(--paper, #fff); color: var(--ink); border: 3px solid var(--ink); box-shadow: 8px 8px 0 var(--purple); animation: consent-in 0.35s var(--ease-out) both; }
@keyframes consent-in { from { transform: translateY(24px) scale(0.96); opacity: 0; } to { transform: none; opacity: 1; } }
.consent-card h2 { margin: 0; font-family: var(--font-display); font-size: clamp(1.9rem, 6vw, 2.6rem); line-height: 1; text-transform: uppercase; }
.consent-card p { margin: 0; line-height: 1.5; }
.consent-card a { color: var(--purple); font-weight: 700; text-underline-offset: 3px; }
.consent-list { margin: 0; padding: 12px 14px 12px 32px; display: grid; gap: 6px; font-size: 0.95rem; background: var(--cream, #fffdf2); border: 3px solid var(--ink); }
.consent-btns { display: flex; flex-wrap: wrap; gap: 12px; }
.consent-btns .btn { flex: 1 1 200px; }
.consent-btns .btn.is-current { outline: 3px dashed var(--purple); outline-offset: 3px; }
.consent-x { justify-self: start; padding: 0; background: none; border: 0; font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; color: var(--ink); cursor: pointer; }
/* The custom cursor must stay visible above the intro and this box */
.cur-arrow, .cur-ring { z-index: 3200 !important; }

/* Footer link-styled buttons */
.linkbtn { padding: 0; background: none; border: 0; font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; text-align: left; }
.foot .linkbtn { color: #fff; text-decoration: none; }
.foot .linkbtn:hover { text-decoration: underline; text-underline-offset: 4px; }
.foot-in { grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); }
@media (max-width: 860px) { .foot-in { grid-template-columns: repeat(2, minmax(0, 1fr)); } .foot-in > :first-child { grid-column: 1 / -1; } }

/* Videos shown without embeds (essential only): dark tile, the play button opens YouTube */
.vthumb.no-thumb { background: var(--ink); }

/* Checkout agree box */
.field.is-bad .check span { color: var(--bad); }

/* Legal pages */
.legal-doc { max-width: 78ch; }
.legal-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }
.legal-tabs a { padding: 8px 16px; background: var(--paper, #fff); color: var(--ink); border: 3px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); font-family: var(--font-display); font-weight: 700; text-decoration: none; }
.legal-tabs a[aria-current="page"] { background: var(--yellow); }
.legal-short { margin: 0 0 28px; padding: 14px 16px; background: var(--green); border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); line-height: 1.5; }
.legal-doc h2 { margin: 34px 0 8px; font-family: var(--font-display); font-size: 1.7rem; line-height: 1.1; }
.legal-doc p, .legal-doc li { line-height: 1.6; }
.legal-doc ul { margin: 8px 0 0; padding-left: 22px; display: grid; gap: 6px; }
.legal-doc a { color: var(--purple); font-weight: 600; text-underline-offset: 3px; }
.legal-table { display: grid; gap: 0; margin-top: 10px; border: 3px solid var(--ink); }
.legal-table > div { display: grid; grid-template-columns: minmax(120px, 0.35fr) 1fr; gap: 14px; padding: 10px 14px; }
.legal-table > div + div { border-top: 3px solid var(--ink); }
.legal-table b { font-family: ui-monospace, Consolas, monospace; font-size: 0.92rem; overflow-wrap: anywhere; }
@media (max-width: 560px) { .legal-table > div { grid-template-columns: 1fr; gap: 2px; } }
.legal-doc .legal-tabs a { color: var(--ink); text-decoration: none; }

/* Legal pages: each section is a card with a sticker heading, like the rest of the site */
.legal-doc { display: grid; gap: 22px; max-width: 80ch; }
.legal-doc > .legal-tabs, .legal-doc > .legal-short { margin: 0; }
.legal-card { position: relative; padding: 22px 22px 20px; background: var(--paper); color: var(--ink); border: 3px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); }
.legal-card > h2 { display: inline-block; margin: -38px 0 12px -8px; padding: 4px 14px 5px; background: var(--yellow); color: var(--ink); border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); transform: rotate(-1.4deg); font-size: 1.45rem; }
.legal-card.lc-1 > h2 { background: var(--green); transform: rotate(1deg); }
.legal-card.lc-2 > h2 { background: var(--blue); color: #fff; transform: rotate(-.8deg); }
.legal-card.lc-3 > h2 { background: var(--purple); color: #fff; transform: rotate(1.3deg); }
.legal-card > p:last-child, .legal-card > ul:last-child, .legal-card > .legal-table:last-child { margin-bottom: 0; }
.legal-card ul { list-style: square; }
.legal-card li::marker { color: var(--purple); }
.legal-card p { margin: 0 0 10px; }
.legal-card { margin-top: 14px; }
@media (max-width: 560px) { .legal-card { padding: 18px 16px 16px; } .legal-card > h2 { font-size: 1.25rem; margin-left: -4px; } }