:root { --volt: #C8FF1A; --blaze: #FF5420; --ink: #0A0A0B; }
html { scroll-behavior: smooth; }
body { background: var(--ink); color: #F2EFE8; }
::selection { background: var(--volt); color: var(--ink); }

/* film grain over everything */
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 60; opacity: .06;
  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='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.eyebrow { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; }
.outline-text { -webkit-text-stroke: 2px #F2EFE8; color: transparent; }
.outline-volt { -webkit-text-stroke: 2px var(--volt); color: transparent; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; padding: 1rem 1.6rem;
  font-family: "Big Shoulders Display", sans-serif; font-weight: 800; font-size: 1.05rem; letter-spacing: .08em;
  text-transform: uppercase; transition: transform .2s, background .2s, color .2s, box-shadow .2s; }
.btn:active { transform: translateY(1px); }
.btn-volt { background: var(--volt); color: var(--ink); box-shadow: 5px 5px 0 #F2EFE8; }
.btn-volt:hover { box-shadow: 2px 2px 0 #F2EFE8; transform: translate(3px, 3px); }
.btn-line { border: 2px solid #F2EFE8; color: #F2EFE8; }
.btn-line:hover { background: #F2EFE8; color: var(--ink); }
.btn[disabled] { opacity: .45; pointer-events: none; }

.chip { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: .15em; text-transform: uppercase; padding: .3rem .55rem; font-weight: 700; }

/* marquee */
.marquee { display: flex; width: max-content; animation: marquee 28s linear infinite; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* load-in */
.rise { opacity: 0; transform: translateY(28px); animation: rise .8s cubic-bezier(.2,.7,.2,1) forwards; }
@keyframes rise { to { opacity: 1; transform: none; } }
.reveal { opacity: 0; transform: translateY(30px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }

.spin-slow { animation: spin 18s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.float { animation: float 6s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-14px) rotate(-2deg); } }

/* product card */
.card-media { background: radial-gradient(120% 90% at 50% 20%, #26262c 0%, #141416 70%); }
.card:hover .card-cap { transform: translateY(-8px) rotate(-3deg) scale(1.04); }
.card-cap { transition: transform .5s cubic-bezier(.2,.7,.2,1); }

/* swatches */
.swatch { width: 30px; height: 30px; border-radius: 999px; border: 2px solid #2A2A30; position: relative; transition: transform .15s; }
.swatch:hover { transform: scale(1.1); }
.swatch[aria-pressed="true"] { outline: 2px solid var(--volt); outline-offset: 3px; }

.no-scrollbar::-webkit-scrollbar { display: none; } .no-scrollbar { scrollbar-width: none; }

/* photos: fade + sharpen in once loaded */
img.pc-img { transform-origin: center; transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
.js-motion img.pc-img:not(.loaded) { opacity: 0; }
.card:hover img.pc-img.loaded { transform: scale(1.04); }

/* reveal: clip + rise */
.reveal { transition-property: opacity, transform, clip-path; }
.reveal-clip { clip-path: inset(0 0 100% 0); transition: clip-path 1s cubic-bezier(.7,0,.2,1), opacity .6s; }
.reveal-clip.in { clip-path: inset(0 0 0 0); }

/* card lift */
.card { transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.card:hover { transform: translateY(-6px); }

/* header edge on scroll */
header.scrolled { box-shadow: 0 10px 30px -12px rgba(0,0,0,.8); background: rgba(10,10,11,.95); }

/* intro curtain */
.pc-curtain { position: fixed; inset: 0; z-index: 100; background: var(--volt); display: flex; align-items: center; justify-content: center; gap: 14px;
  transition: transform .8s cubic-bezier(.7,0,.2,1); }
.pc-curtain svg { width: 64px; animation: pc-pop .6s cubic-bezier(.2,.9,.3,1.4) both; }
.pc-curtain span { font-family: "Big Shoulders Display", sans-serif; font-weight: 900; font-size: 48px; text-transform: uppercase; color: var(--ink); letter-spacing: -.01em; animation: pc-pop .6s .1s cubic-bezier(.2,.9,.3,1.4) both; }
.pc-curtain.out { transform: translateY(-100%); }
@keyframes pc-pop { from { opacity: 0; transform: translateY(20px) scale(.9); } to { opacity: 1; transform: none; } }

/* headline line wipe */
.line-wipe { display: block; overflow: hidden; }
.line-wipe > span { display: block; transform: translateY(105%); animation: wipe-up .9s cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes wipe-up { to { transform: none; } }

/* swatch-change crossfade */
[data-art].swap { animation: fade-in .5s ease both; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

/* scroll cue */
.scroll-cue { animation: cue 1.8s ease-in-out infinite; }
@keyframes cue { 0%,100% { transform: translateY(0); opacity: .4; } 50% { transform: translateY(8px); opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  img.pc-img { opacity: 1; filter: none; transition: none; }
  .reveal-clip { clip-path: none; }
  .line-wipe > span { transform: none; animation: none; }
  .pc-curtain { display: none; }
  .marquee, .spin-slow, .float, .rise { animation: none !important; opacity: 1 !important; transform: none !important; }
  .reveal { opacity: 1; transform: none; }
}