:root{
  --bg:#060609;
  --panel:#0c0d12;
  --ink:#f3f4f8;
  --muted:#7f838f;
  --volt:#4d8bff;
  --volt2:#7c5cff;
  --line:#191b22;
  --glow:rgba(77,139,255,.35);
  --display:'Anton','Arial Narrow',sans-serif;
  --body:'Barlow Condensed','Arial Narrow',sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg)}
html.preloading,html.preloading body{overflow:hidden;height:100%}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--body);
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
  overflow-x:hidden;
  cursor:none;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;user-select:none;-webkit-user-drag:none}
.kicker{
  display:inline-block;
  color:var(--volt);
  text-transform:uppercase;
  letter-spacing:.32em;
  font-size:12px;
  font-weight:600;
  text-shadow:0 0 12px var(--glow);
  margin-bottom:14px;
}

/* ============ GRAIN ============ */
#grain{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  z-index:9998;
  pointer-events:none;
  opacity:.05;
  mix-blend-mode:overlay;
}

/* ============ CUSTOM CURSOR ============ */
.cursor{
  position:fixed;
  top:0;left:0;
  width:14px;height:14px;
  border-radius:50%;
  background:var(--volt);
  box-shadow:0 0 16px var(--glow);
  pointer-events:none;
  z-index:9999;
  mix-blend-mode:difference;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:width .25s cubic-bezier(.16,1,.3,1),height .25s cubic-bezier(.16,1,.3,1),background .25s;
}
.cursor.grow{width:88px;height:88px;background:rgba(6,6,9,.85);box-shadow:0 0 30px var(--glow)}
.cursor #cursorLabel{
  font-family:var(--body);
  font-size:11px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink);
  opacity:0;
  white-space:nowrap;
}
.cursor.grow #cursorLabel{opacity:1}
@media(hover:none){.cursor{display:none}body{cursor:auto}}

/* ============ PRELOADER ============ */
.preloader{
  position:fixed;
  inset:0;
  background:var(--bg);
  z-index:10000;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:22px;
}
.preloader-mark{width:min(260px,50vw);filter:drop-shadow(0 0 24px var(--glow))}
.preloader-count{
  font-family:var(--display);
  font-size:15px;
  letter-spacing:.1em;
  color:var(--muted);
}
.preloader-count span{color:var(--volt)}

/* ============ NAV ============ */
.site-nav{
  position:fixed;
  top:0;left:0;right:0;
  z-index:500;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:26px clamp(20px,5vw,60px);
  mix-blend-mode:difference;
}
.nav-logo{
  font-weight:900;
  font-size:20px;
  letter-spacing:.14em;
  text-transform:lowercase;
  color:var(--ink);
}
.nav-logo b{color:var(--volt)}
.nav-links{display:flex;gap:34px}
.nav-links a{
  text-transform:uppercase;
  font-size:12px;
  letter-spacing:.14em;
  font-weight:700;
  color:var(--ink);
  opacity:.7;
}
.nav-links a:hover{opacity:1}
@media(max-width:640px){.nav-links{gap:18px}.nav-links a{font-size:10px}}

/* ============ HERO ============ */
.hero{
  position:relative;
  height:100vh;
  height:100svh;
  display:flex;
  align-items:center;
  padding:0 clamp(20px,5vw,60px);
  overflow:hidden;
}
.hero::before{
  content:'';
  position:absolute;
  inset:0;
  background:
    radial-gradient(ellipse 60% 50% at 50% 100%, var(--glow), transparent 70%);
  opacity:.5;
  pointer-events:none;
  animation:heroFlicker 6s infinite;
}
@keyframes heroFlicker{
  0%,19%,21%,23%,54%,56%,100%{opacity:.5}
  20%,55%{opacity:.85}
  22%{opacity:.35}
}
.hero-static{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:1;
  pointer-events:none;
  opacity:.16;
  mix-blend-mode:screen;
}
.hero-scanlines{
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:repeating-linear-gradient(to bottom, rgba(243,244,248,.05) 0px, rgba(243,244,248,.05) 1px, transparent 1px, transparent 3px);
  opacity:.35;
  mix-blend-mode:overlay;
}
.hero-pin{max-width:900px;position:relative;z-index:3}
.hero-kicker{
  text-transform:uppercase;
  letter-spacing:.28em;
  font-size:12px;
  font-weight:600;
  color:var(--volt);
  text-shadow:0 0 12px var(--glow);
  margin-bottom:22px;
}
.hero-title{
  font-family:var(--display);
  text-transform:uppercase;
  font-size:clamp(52px,11vw,140px);
  line-height:.88;
  letter-spacing:.005em;
  margin-bottom:28px;
}
.hero-title .char{display:inline-block;will-change:transform,opacity}
.hero-lead{
  color:var(--muted);
  font-size:clamp(15px,1.6vw,19px);
  max-width:520px;
  margin-bottom:34px;
  text-transform:uppercase;
  letter-spacing:.02em;
}
.hero-cta{
  display:inline-flex;
  align-items:center;
  gap:10px;
  border:1px solid var(--line);
  padding:16px 30px;
  text-transform:uppercase;
  font-size:13px;
  font-weight:700;
  letter-spacing:.14em;
  transition:border-color .3s, color .3s;
}
.hero-cta:hover{border-color:var(--volt);color:var(--volt)}
.scroll-progress{
  position:absolute;
  z-index:3;
  right:clamp(20px,5vw,60px);
  bottom:36px;
  display:flex;
  align-items:center;
  gap:10px;
  font-family:var(--display);
  font-size:13px;
  letter-spacing:.1em;
  color:var(--muted);
  text-transform:uppercase;
}
.scroll-progress #scrollPct{color:var(--volt);min-width:26px;display:inline-block;text-align:right}
.scroll-word{writing-mode:vertical-rl}

/* ============ TICKER ============ */
.ticker-wrap{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  overflow:hidden;
  background:var(--panel);
  padding:16px 0;
}
.ticker-track{
  display:flex;
  white-space:nowrap;
  width:max-content;
  font-family:var(--display);
  font-size:clamp(18px,3vw,30px);
  letter-spacing:.02em;
  text-transform:uppercase;
  color:var(--ink);
  cursor:grab;
}
.ticker-track span:nth-child(odd){color:var(--volt);text-shadow:0 0 14px var(--glow)}
.ticker-track:active{cursor:grabbing}

/* ============ DROP SHOWCASE ============ */
.drop{position:relative}
.drop-pin{
  height:100vh;
  height:100svh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  overflow:hidden;
  padding:60px 0 0;
}
.drop-head{padding:0 clamp(20px,5vw,60px);margin-bottom:34px}
.drop-head h2{
  font-family:var(--display);
  text-transform:uppercase;
  font-size:clamp(32px,5vw,56px);
  letter-spacing:.01em;
}
.drop-track{
  display:flex;
  gap:28px;
  padding:0 clamp(20px,5vw,60px);
  will-change:transform;
}
.card{
  position:relative;
  flex:0 0 auto;
  width:min(320px,72vw);
  cursor:none;
  will-change:transform,opacity,filter;
  transform-origin:50% 60%;
}
.card-media{
  position:relative;
  aspect-ratio:4/5;
  overflow:hidden;
  background:var(--panel);
  border:1px solid var(--line);
}
.card-media img{width:100%;height:100%;object-fit:cover;transform:scale(1.02);transition:transform .6s cubic-bezier(.16,1,.3,1)}
.card:hover .card-media img{transform:scale(1.09)}
.card-flash{
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, var(--ink), var(--volt) 60%);
  opacity:0;
  pointer-events:none;
  mix-blend-mode:screen;
}
.card-scan{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:repeating-linear-gradient(to bottom, rgba(243,244,248,.5) 0px, rgba(243,244,248,.5) 1px, transparent 1px, transparent 3px);
  opacity:0;
  mix-blend-mode:overlay;
}
.card-meta{padding:18px 2px}
.card-meta h3{
  font-family:var(--display);
  text-transform:uppercase;
  font-size:20px;
  letter-spacing:.01em;
  margin-bottom:6px;
}
.card-meta p{color:var(--muted);font-size:14px;margin-bottom:10px}
.card-price{
  color:var(--volt);
  font-weight:700;
  letter-spacing:.06em;
  font-size:14px;
  text-shadow:0 0 10px var(--glow);
}
.card-look{
  color:var(--muted);
  font-size:12px;
  letter-spacing:.02em;
  text-transform:none;
  font-family:var(--body);
}

/* sealed / next-drop teaser card */
.card--locked .card-media img{filter:grayscale(.4) brightness(.7);transition:filter .6s ease, transform .6s cubic-bezier(.16,1,.3,1)}
.card--locked:hover .card-media img{filter:grayscale(.1) brightness(.85)}
.card--locked .card-media{position:relative}
.card--locked .card-media::after{
  content:'SEALED';
  position:absolute;
  top:14px; left:14px;
  border:1px solid var(--volt);
  color:var(--volt);
  background:rgba(6,6,9,.7);
  font-family:var(--display);
  font-size:11px;
  letter-spacing:.16em;
  padding:6px 10px;
  text-shadow:0 0 10px var(--glow);
}
.card--locked .card-price{color:var(--muted);text-shadow:none}

/* ============ MANIFESTO ============ */
.manifesto{
  min-height:70vh;
  display:flex;
  align-items:center;
  padding:120px clamp(20px,5vw,60px);
  border-top:1px solid var(--line);
}
.manifesto-text{
  font-family:var(--display);
  text-transform:uppercase;
  font-size:clamp(26px,4.4vw,56px);
  line-height:1.15;
  max-width:1100px;
  color:var(--muted);
}
.manifesto-text .word{display:inline-block;opacity:.18;will-change:opacity,transform}
.manifesto-text .accent{color:var(--volt);text-shadow:0 0 18px var(--glow)}

/* ============ CLOSER ============ */
.closer{
  min-height:80vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:36px;
  padding:80px 20px;
  border-top:1px solid var(--line);
}
.closer h2{
  font-family:var(--display);
  text-transform:uppercase;
  font-size:clamp(38px,8vw,100px);
  line-height:.9;
}
.closer h2 .char{display:inline-block}
.closer-cta{
  font-size:clamp(16px,2vw,22px);
  letter-spacing:.06em;
  border-bottom:1px solid var(--volt);
  color:var(--volt);
  padding-bottom:4px;
  text-shadow:0 0 12px var(--glow);
}

/* ============ FOOTER ============ */
.site-footer{
  border-top:1px solid var(--line);
  color:var(--muted);
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.foot-bottom-row{
  padding:34px clamp(20px,5vw,60px);
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.flogo{font-weight:900;font-size:18px;letter-spacing:.14em;text-transform:lowercase;color:var(--ink)}
.flogo b{color:var(--volt)}

/* Footer lightning banner -- same wordmark + bolt-strike treatment as the hero */
.foot-bolt{position:relative;background:var(--bg);isolation:isolate}
.foot-bolt-glow{position:absolute;inset:0;background:radial-gradient(ellipse 60% 60% at 50% 50%,var(--glow),transparent 70%);opacity:.5;pointer-events:none;animation:footFlicker 6s infinite}
@keyframes footFlicker{0%,19%,21%,23%,54%,56%,100%{opacity:.5}20%,55%{opacity:.85}22%{opacity:.35}}
.foot-static{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;opacity:.16;mix-blend-mode:screen}
.foot-bolt-in{position:relative;z-index:2;padding:90px 20px 70px;display:flex;flex-direction:column;align-items:center;text-align:center}
.foot-mark-stage{position:relative;isolation:isolate;max-width:340px;width:100%;border:1px solid var(--line);box-shadow:0 0 40px var(--glow);cursor:pointer;animation:footHum 4.5s infinite}
.foot-mark-stage img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block}
.foot-bolts{position:absolute;left:-10%;top:-25%;width:120%;height:150%;z-index:3;pointer-events:none;overflow:visible}
.foot-bolts path{fill:none;stroke-linecap:round;stroke-linejoin:round;filter:url(#footGlowDemo)}
.foot-flash{position:absolute;inset:-25% -10%;z-index:1;background:radial-gradient(58% 58% at 50% 44%,rgba(77,139,255,.5),rgba(124,92,255,.16) 46%,transparent 72%);opacity:0;pointer-events:none;mix-blend-mode:screen}
.foot-tagline{position:relative;margin-top:24px;color:var(--volt);text-transform:uppercase;letter-spacing:.24em;font-size:12px;font-weight:700;text-shadow:0 0 14px var(--glow)}
@keyframes footHum{0%,100%{filter:brightness(1)}46%{filter:brightness(1.05)}48%{filter:brightness(.92)}50%{filter:brightness(1.13)}52%{filter:brightness(.96)}54%{filter:brightness(1.04)}}
@keyframes footGlitch{
  0%{transform:translate(0,0);filter:brightness(1)}
  15%{transform:translate(-3px,1px);filter:brightness(1.35) saturate(1.4)}
  30%{transform:translate(3px,-2px);filter:brightness(1.55) saturate(1.6)}
  45%{transform:translate(-2px,1px);filter:brightness(1.15)}
  60%{transform:translate(2px,0);filter:brightness(1.3)}
  100%{transform:translate(0,0);filter:brightness(1)}
}
.foot-mark-stage.strike{animation:footGlitch .34s steps(2,end) 1,footHum 4.5s infinite}
@keyframes footPowerOn{0%{filter:brightness(.12)}8%{filter:brightness(1.5)}13%{filter:brightness(.18)}22%{filter:brightness(1.7)}30%{filter:brightness(.4)}42%{filter:brightness(1.35)}56%{filter:brightness(.6)}72%{filter:brightness(1.25)}88%{filter:brightness(.9)}100%{filter:brightness(1)}}
.foot-mark-stage.poweron{animation:footPowerOn .9s linear 1}

/* Glitch / chromatic-aberration distortion on the footer model photo --
   RGB-split ghost layers + clip-path tearing, subtle at rest and
   amplified in sync with every lightning strike */
.foot-mark-stage img{filter:contrast(1.14) saturate(1.08) brightness(.97);animation:footImgIdleGlitch 6.5s infinite}
.foot-mark-stage::before,
.foot-mark-stage::after{
  content:'';
  position:absolute;
  inset:0;
  z-index:1;
  background-image:url('images/gothic-skull.webp');
  background-size:cover;
  background-position:center;
  mix-blend-mode:screen;
  opacity:0;
  pointer-events:none;
}
.foot-mark-stage::before{filter:sepia(1) saturate(9) hue-rotate(-58deg) brightness(1.15);animation:footGhostL 6.5s infinite}
.foot-mark-stage::after{filter:sepia(1) saturate(9) hue-rotate(148deg) brightness(1.15);animation:footGhostR 6.5s infinite}
@keyframes footImgIdleGlitch{
  0%,91%,100%{transform:translate(0,0);clip-path:inset(0 0 0 0)}
  92%{transform:translate(-1.5%,0);clip-path:inset(14% 0 58% 0)}
  93.5%{transform:translate(1.5%,0);clip-path:inset(62% 0 6% 0)}
  95%{transform:translate(-1%,0);clip-path:inset(32% 0 40% 0)}
  96.5%{transform:translate(0,0);clip-path:inset(0 0 0 0)}
}
@keyframes footGhostL{0%,90%,100%{opacity:0;transform:translate(0,0)}91%{opacity:.5;transform:translate(-6px,1px)}93%{opacity:.3;transform:translate(-3px,0)}95%{opacity:0;transform:translate(0,0)}}
@keyframes footGhostR{0%,90%,100%{opacity:0;transform:translate(0,0)}91%{opacity:.5;transform:translate(6px,-1px)}93%{opacity:.3;transform:translate(3px,0)}95%{opacity:0;transform:translate(0,0)}}
.foot-mark-stage.strike img,
.foot-mark-stage.poweron img{animation:footImgTear .34s steps(2,end) 1}
.foot-mark-stage.strike::before,
.foot-mark-stage.poweron::before{animation:footGhostStrikeL .34s steps(2,end) 1}
.foot-mark-stage.strike::after,
.foot-mark-stage.poweron::after{animation:footGhostStrikeR .34s steps(2,end) 1}
.foot-mark-stage.poweron img,
.foot-mark-stage.poweron::before,
.foot-mark-stage.poweron::after{animation-duration:.9s;animation-timing-function:steps(3,end)}
@keyframes footImgTear{
  0%{clip-path:inset(0 0 0 0);transform:translate(0,0)}
  25%{clip-path:inset(10% 0 64% 0);transform:translate(-3.5%,0)}
  50%{clip-path:inset(60% 0 8% 0);transform:translate(3.5%,0)}
  75%{clip-path:inset(34% 0 38% 0);transform:translate(-2%,0)}
  100%{clip-path:inset(0 0 0 0);transform:translate(0,0)}
}
@keyframes footGhostStrikeL{0%{opacity:0;transform:translate(0,0)}25%{opacity:.9;transform:translate(-11px,3px)}55%{opacity:.6;transform:translate(-6px,-2px)}80%{opacity:.3;transform:translate(-2px,1px)}100%{opacity:0;transform:translate(0,0)}}
@keyframes footGhostStrikeR{0%{opacity:0;transform:translate(0,0)}25%{opacity:.9;transform:translate(11px,-3px)}55%{opacity:.6;transform:translate(6px,2px)}80%{opacity:.3;transform:translate(2px,-1px)}100%{opacity:0;transform:translate(0,0)}}

@media(prefers-reduced-motion:reduce){.foot-bolt-glow{animation:none}.foot-bolts,.foot-flash,.foot-static{display:none}.foot-mark-stage,.foot-mark-stage.strike,.foot-mark-stage.poweron,.foot-mark-stage img,.foot-mark-stage.strike img,.foot-mark-stage.poweron img{animation:none}.foot-mark-stage::before,.foot-mark-stage::after{display:none}}

/* ============ PRODUCT DETAIL OVERLAY (Flip) ============ */
.detail-overlay{
  position:fixed;
  inset:0;
  z-index:900;
  background:var(--bg);
  display:none;
  grid-template-columns:1fr 1fr;
}
.detail-overlay.active{display:grid}
.detail-media{overflow:hidden;background:var(--panel)}
.detail-media img{width:100%;height:100%;object-fit:cover}
.detail-info{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:60px clamp(30px,6vw,90px);
}
.detail-info h3{
  font-family:var(--display);
  text-transform:uppercase;
  font-size:clamp(32px,4vw,52px);
  margin-bottom:18px;
}
.detail-info p{color:#c4c7d0;font-size:16px;line-height:1.7;max-width:520px;margin-bottom:24px}
.detail-price{
  color:var(--volt);
  font-family:var(--display);
  font-size:26px;
  text-shadow:0 0 14px var(--glow);
  margin-bottom:26px;
  display:block;
}
.detail-fine{color:var(--muted)!important;font-size:12px!important;text-transform:uppercase;letter-spacing:.06em}
.detail-close{
  position:absolute;
  top:26px;right:clamp(20px,5vw,60px);
  background:none;
  border:1px solid var(--line);
  color:var(--ink);
  width:44px;height:44px;
  font-size:16px;
  cursor:none;
  z-index:10;
}
.detail-close:hover{border-color:var(--volt);color:var(--volt)}
@media(max-width:800px){
  .detail-overlay.active{grid-template-columns:1fr;grid-template-rows:40vh 1fr;overflow-y:auto}
}