@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Bebas+Neue&display=swap');

:root {
  --bg: #0a000a;
  --bg-elevated: #100818;
  --bg-card: #100818;
  --surface: rgba(168,85,247,0.03);
  --surface-solid: #100818;
  --border: rgba(168,85,247,0.2);
  --border-subtle: rgba(168,85,247,0.08);
  --border-solid: #1a0f2e;
  --text: #e8e0ff;
  --text-dim: #605570;
  --text-faint: #3d2a50;
  --accent: #a855f7;
  --accent-hover: #c084fc;
  --accent-dim: rgba(168,85,247,0.15);
  --green: #a855f7;
  --header-bg: rgba(10,0,10,0.92);
  --header-text: #e8e0ff;
  --header-text-dim: #605570;
  --btn-primary-bg: #a855f7;
  --btn-primary-text: #ffffff;
  --btn-outline-border: rgba(168,85,247,0.15);
  --tr: 0.25s cubic-bezier(0.4,0,0.2,1);
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; overscroll-behavior:none; }
body {
  font-family:'Inter',-apple-system,sans-serif;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
  overflow-x:hidden;
  position:relative;
}
body::after {
  content:''; position:fixed; inset:0; pointer-events:none; z-index:9998; opacity:0.04;
  background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(255,255,255,0.03) 2px, rgba(255,255,255,0.03) 4px);
}
a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }
button { cursor:none; font-family:inherit; border:none; background:none; color:inherit; }

/* ---- TOPBAR ---- */
.topbar{background:rgba(10,0,10,0.9);backdrop-filter:blur(20px);border-bottom:1px solid var(--border);padding:0 24px;position:sticky;top:0;z-index:100;}
.topbar-inner{max-width:1400px;margin:0 auto;height:64px;display:flex;align-items:center;justify-content:space-between;}
.topbar .logo{font-family:'Bebas Neue',sans-serif;font-size:22px;font-weight:900;color:var(--text);text-decoration:none;text-shadow:0 0 15px rgba(168,85,247,0.25);letter-spacing:4px;line-height:1;}
.topbar .logo::after{content:'_';animation:blink 1s step-end infinite;color:var(--accent);}
@keyframes blink{50%{opacity:0}}

.nav-links{display:flex;gap:32px;align-items:center;}
.nav-links a{color:var(--text-dim);text-decoration:none;font-size:13px;letter-spacing:2px;transition:all .3s;position:relative;font-weight:500;}
.nav-links a:hover,.nav-links a.active{color:var(--accent);text-shadow:0 0 12px rgba(168,85,247,0.25);font-weight:600;}

.h-actions{display:flex;gap:12px;align-items:center;}
.icon-btn{background:none;border:1px solid var(--border);color:var(--text-dim);width:40px;height:40px;border-radius:50%;cursor:pointer;transition:all .3s;display:flex;align-items:center;justify-content:center;position:relative;font-size:18px;}
.icon-btn:hover{border-color:var(--accent);color:var(--accent);box-shadow:0 0 15px rgba(168,85,247,0.1);}
.icon-btn .count{position:absolute;top:-4px;right:-4px;background:var(--accent);color:#fff;font-size:9px;font-weight:900;width:16px;height:16px;border-radius:50%;display:flex;align-items:center;justify-content:center;}

/* ---- SEARCH ---- */
.search-wrap{background:rgba(10,0,10,0.95);border-bottom:1px solid var(--border);padding:12px 24px;position:sticky;top:64px;z-index:99;}
.search-bar{max-width:600px;margin:0 auto;position:relative;}
.search-bar input{width:100%;height:44px;background:rgba(168,85,247,0.03);border:1px solid var(--border);border-radius:24px;padding:0 48px 0 20px;color:var(--text);font-family:inherit;font-size:13px;outline:none;transition:all .3s;}
.search-bar input:focus{border-color:var(--accent);box-shadow:0 0 20px rgba(168,85,247,0.08);}
.search-bar input::placeholder{color:var(--text-dim);}

/* ---- BUTTONS ---- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 32px; border-radius:2px; font-size:13px; font-weight:800;
  text-transform:uppercase; letter-spacing:1px; transition:all var(--tr);
  cursor:pointer; border:none; font-family:inherit; position:relative; overflow:hidden; outline:none;
}
.btn:focus-visible { box-shadow:0 0 0 2px rgba(168,85,247,0.5); }
.btn-primary { background:var(--accent); color:var(--btn-primary-text); }
.btn-primary:hover { background:var(--accent-hover); box-shadow:0 0 24px rgba(168,85,247,0.3); transform:translateY(-1px); }
.btn-outline { background:transparent; color:var(--text); border:1.5px solid var(--btn-outline-border); }
.btn-outline:hover { border-color:var(--accent); color:var(--accent); box-shadow:0 0 16px rgba(168,85,247,0.1); }

/* ---- CARDS (Product / Universal) ---- */
.card-brutal {
  background:var(--bg-card); border:1px solid var(--border-subtle); border-radius:2px;
  overflow:hidden; position:relative; transition:all 0.4s cubic-bezier(0.4,0,0.2,1);
  box-shadow:0 2px 8px rgba(0,0,0,0.3);
}
.card-brutal:hover {
  border-color:var(--accent);
  box-shadow:0 0 24px rgba(168,85,247,0.12), 0 8px 32px rgba(0,0,0,0.4);
  transform:translateY(-4px);
}
.card-brutal .card-img { aspect-ratio:1; overflow:hidden; background:var(--surface-solid); position:relative; }
.card-brutal .card-img::after {
  content:''; position:absolute; inset:0;
  background:radial-gradient(circle at center, transparent 40%, var(--bg-card) 100%);
  pointer-events:none; z-index:1; opacity:0.6; transition:opacity 0.4s;
}
.card-brutal:hover .card-img::after { opacity:0.9; }
.card-brutal .card-img img { width:100%; height:100%; object-fit:cover; transition:transform 0.5s cubic-bezier(0.4,0,0.2,1); }
.card-brutal:hover .card-img img { transform:scale(1.06); }
.card-brutal .card-info { padding:16px; display:flex; flex-direction:column; gap:4px; }
.card-brutal .card-brand { font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:1.5px; color:var(--text-faint); }
.card-brutal .card-name { font-size:14px; font-weight:600; line-height:1.3; }
.card-brutal .card-price { font-size:14px; font-weight:700; margin-top:4px; color:var(--text); }
.card-brutal .card-price .old { font-size:12px; color:var(--text-faint); text-decoration:line-through; margin-left:8px; font-weight:500; }

/* ---- GLITCH TEXT ---- */
.glitch-text {
  position:relative; display:inline-block;
}
.glitch-text::before, .glitch-text::after {
  content:attr(data-text); position:absolute; top:0; left:0; width:100%; height:100%;
  background:var(--bg);
}
.glitch-text::before {
  left:2px; text-shadow:-1px 0 #00ffff; clip-path:inset(0 0 60% 0);
  animation:glitch-1 2.5s infinite linear alternate-reverse;
}
.glitch-text::after {
  left:-2px; text-shadow:-1px 0 #ff00ff; clip-path:inset(40% 0 0 0);
  animation:glitch-2 3s infinite linear alternate-reverse;
}
@keyframes glitch-1 {
  0%{clip-path:inset(20% 0 80% 0)} 20%{clip-path:inset(60% 0 10% 0)} 40%{clip-path:inset(40% 0 50% 0)} 60%{clip-path:inset(80% 0 5% 0)} 80%{clip-path:inset(10% 0 70% 0)} 100%{clip-path:inset(30% 0 20% 0)}
}
@keyframes glitch-2 {
  0%{clip-path:inset(10% 0 60% 0)} 20%{clip-path:inset(30% 0 40% 0)} 40%{clip-path:inset(70% 0 15% 0)} 60%{clip-path:inset(15% 0 65% 0)} 80%{clip-path:inset(55% 0 25% 0)} 100%{clip-path:inset(5% 0 85% 0)}
}

/* ---- MARQUEE ---- */
.marquee-section {
  background:var(--bg-elevated); border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  overflow:hidden; position:relative; padding:10px 0;
}
.marquee-section::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg, var(--bg-elevated) 0%, transparent 8%, transparent 92%, var(--bg-elevated) 100%);
  z-index:2; pointer-events:none;
}
.marquee-row { display:flex; width:max-content; position:relative; z-index:1; }
.marquee-row.forward { animation:marquee-scroll-l 25s linear infinite; }
.marquee-row.reverse { animation:marquee-scroll-r 25s linear infinite; margin-top:4px; }
.marquee-section:hover .marquee-row { animation-play-state:paused; }
@keyframes marquee-scroll-l { 0%{transform:translateX(0);} 100%{transform:translateX(-50%);} }
@keyframes marquee-scroll-r { 0%{transform:translateX(-50%);} 100%{transform:translateX(0);} }
.marquee-item {
  font-family:'Bebas Neue',sans-serif; font-size:18px; letter-spacing:4px;
  color:var(--text-faint); padding:0 32px; white-space:nowrap; transition:all 0.3s;
  display:flex; align-items:center; gap:32px; cursor:default; text-transform:uppercase;
}
.marquee-item:hover { color:var(--accent); text-shadow:0 0 20px rgba(168,85,247,0.4); }
.marquee-dot { display:inline-block; width:4px; height:4px; background:var(--accent); border-radius:0; align-self:center; flex-shrink:0; box-shadow:0 0 8px var(--accent); }

/* ---- REVEAL ---- */
.reveal { opacity:0; transform:translateY(40px); transition:opacity 0.8s cubic-bezier(0.4,0,0.2,1),transform 0.8s cubic-bezier(0.4,0,0.2,1); }
.reveal.visible { opacity:1; transform:translateY(0); }
.reveal-delay-1 { transition-delay:0.1s; }
.reveal-delay-2 { transition-delay:0.2s; }
.reveal-delay-3 { transition-delay:0.3s; }

/* ---- FOOTER ---- */
footer { border-top:1px solid var(--border); background:var(--bg-elevated); position:relative; overflow:hidden; }
.footer-inner { max-width:1400px; margin:0 auto; padding:64px 24px 36px; position:relative; z-index:1; }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr 1fr; gap:48px; margin-bottom:56px; }
.footer-logo { font-family:'Bebas Neue',sans-serif; font-size:32px; letter-spacing:3px; margin-bottom:14px; display:inline-block; color:var(--text); }
.footer-logo span { color:var(--accent); }
.footer-desc { font-size:14px; color:var(--text-faint); line-height:1.7; max-width:320px; }
.footer-grid h4 { font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:1.5px; color:var(--text); margin-bottom:22px; }
.footer-grid a { display:block; font-size:14px; color:var(--text-faint); margin-bottom:12px; transition:color var(--tr),transform var(--tr); }
.footer-grid a:hover { color:var(--accent); transform:translateX(4px); }
.footer-bottom { display:flex; justify-content:space-between; align-items:center; padding-top:28px; border-top:1px solid var(--border-subtle); font-size:12px; color:var(--text-faint); }
.footer-bottom a { color:var(--text-faint); margin-left:24px; transition:color var(--tr); }
.footer-bottom a:hover { color:var(--accent); }

/* ---- CART DRAWER // CRT PURPLE ---- */
.cart-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.85); backdrop-filter:blur(20px); z-index:400; opacity:0; visibility:hidden; pointer-events:none; transition:opacity 0.4s cubic-bezier(0.4,0,0.2,1),visibility 0.4s, backdrop-filter 0.4s; }
.cart-overlay.open { opacity:1; visibility:visible; pointer-events:auto; }
.cart-drawer { position:fixed; top:0; right:0; width:440px; max-width:100vw; height:100vh; background:rgba(10,0,10,0.95); z-index:401; transform:translate3d(110%,0,0); transition:transform 0.55s cubic-bezier(0.34,1.56,0.64,1); display:flex; flex-direction:column; border-left:2px solid rgba(168,85,247,0.2); box-shadow:-8px 0 40px rgba(0,0,0,0.6),0 0 40px rgba(168,85,247,0.08); font-family:'VT323',monospace; will-change:transform; }
.cart-drawer.open { transform:translate3d(0,0,0); }
.cart-drawer.open .cart-item { opacity:1; transform:translate3d(0,0,0); }
.cart-item { opacity:0; transform:translate3d(40px,0,0); transition:opacity 0.4s ease-out, transform 0.5s cubic-bezier(0.32,0.72,0,1); }
.cart-drawer:not(.open) .cart-item { transition-delay:0s !important; }
.cart-drawer.open .cart-item:nth-child(1) { transition-delay:0.08s; }
.cart-drawer.open .cart-item:nth-child(2) { transition-delay:0.16s; }
.cart-drawer.open .cart-item:nth-child(3) { transition-delay:0.24s; }
.cart-drawer.open .cart-item:nth-child(4) { transition-delay:0.32s; }
.cart-drawer.open .cart-item:nth-child(5) { transition-delay:0.40s; }
.cart-drawer.open .cart-item:nth-child(6) { transition-delay:0.48s; }
.cart-drawer::before { content:''; position:absolute; inset:0; background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(168,85,247,0.03) 3px,rgba(168,85,247,0.03) 6px); pointer-events:none; z-index:2; }
.cart-header { display:flex; justify-content:space-between; align-items:center; padding:24px; border-bottom:1px dashed rgba(168,85,247,0.2); position:relative; z-index:1; }
.cart-header h3 { font-family:'VT323',monospace; font-size:28px; letter-spacing:2px; color:#a855f7; text-transform:uppercase; }
.cart-close { width:32px; height:32px; border:1px solid rgba(168,85,247,0.2); display:flex; align-items:center; justify-content:center; background:transparent; color:rgba(168,85,247,0.6); transition:all 0.25s; cursor:pointer; font-size:20px; }
.cart-close:hover { border-color:var(--accent); color:var(--accent); background:rgba(168,85,247,0.06); }
.cart-body { flex:1; overflow-y:auto; padding:20px 24px; position:relative; z-index:1; }
.cart-empty { text-align:center; padding:48px 0; color:rgba(168,85,247,0.4); font-size:18px; font-family:'VT323',monospace; }
.cart-item { display:flex; gap:14px; padding:16px 0; border-bottom:1px dashed rgba(168,85,247,0.15); position:relative; z-index:1; transition:all 0.25s; }
.cart-item:hover { background:rgba(168,85,247,0.03); margin:0 -12px; padding:16px 12px; border-radius:4px; }
.cart-item img { width:56px; height:56px; object-fit:cover; border:1px solid rgba(168,85,247,0.2); filter:hue-rotate(260deg) saturate(0.6) contrast(1.2); }
.cart-item-info { flex:1; display:flex; flex-direction:column; justify-content:center; gap:4px; }
.cart-item-brand { font-size:14px; color:rgba(168,85,247,0.5); text-transform:uppercase; letter-spacing:1px; font-family:'VT323',monospace; }
.cart-item-name { font-size:20px; color:var(--text); font-family:'VT323',monospace; }
.cart-item-price { font-size:18px; color:var(--accent); font-family:'VT323',monospace; }
.cart-item-remove { align-self:flex-start; color:rgba(168,85,247,0.4); font-size:20px; cursor:pointer; background:none; border:none; transition:all 0.2s; font-family:'VT323',monospace; }
.cart-item-remove:hover { color:var(--accent); text-shadow:0 0 10px rgba(168,85,247,0.4); }
.cart-footer { padding:24px; border-top:1px dashed rgba(168,85,247,0.2); position:relative; z-index:1; }
.cart-subtotal { display:flex; justify-content:space-between; margin-bottom:6px; font-size:16px; color:rgba(168,85,247,0.5); font-family:'VT323',monospace; }
.cart-total-row { display:flex; justify-content:space-between; margin-bottom:16px; font-size:24px; color:var(--accent); font-family:'VT323',monospace; text-shadow:0 0 10px rgba(168,85,247,0.3); }
.cart-btn-checkout { width:100%; height:48px; background:var(--accent); color:#0a000a; border:none; border-radius:0; font-size:20px; font-weight:800; text-transform:uppercase; letter-spacing:2px; cursor:pointer; transition:all 0.25s; font-family:'VT323',monospace; box-shadow:0 0 20px rgba(168,85,247,0.2); }
.cart-btn-checkout:hover { box-shadow:0 0 30px rgba(168,85,247,0.4); text-shadow:0 0 8px rgba(168,85,247,0.5); }

/* ---- COOKIE BANNER ---- */
.cookie-banner { position:fixed; bottom:0; left:0; right:0; background:var(--bg-card); backdrop-filter:blur(20px); border-top:1px solid var(--border); z-index:500; padding:16px 24px; transform:translateY(0); transition:transform 0.4s cubic-bezier(0.4,0,0.2,1); }
.cookie-banner.hidden { transform:translateY(100%); }
.cookie-inner { max-width:1400px; margin:0 auto; display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap; }
.cookie-btn { padding:10px 20px; border-radius:2px; font-size:13px; font-weight:700; cursor:pointer; border:1px solid var(--border-subtle); font-family:inherit; transition:all var(--tr); text-transform:uppercase; letter-spacing:0.5px; }
.cookie-btn-outline { background:transparent; color:var(--text-dim); }
.cookie-btn-outline:hover { background:var(--surface); border-color:var(--accent); color:var(--accent); }
.cookie-btn-primary { background:var(--accent); color:#fff; border-color:var(--accent); }
.cookie-btn-primary:hover { background:var(--accent-hover); box-shadow:0 0 16px rgba(168,85,247,0.3); }

/* ---- BADGES ---- */
.badge-neon {
  display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:2px;
  font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:1px;
  border:1px solid var(--accent); color:var(--accent); background:rgba(168,85,247,0.08);
  box-shadow:0 0 8px rgba(168,85,247,0.15);
}
.badge-green {
  display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:2px;
  font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:1px;
  border:1px solid var(--green); color:var(--green); background:rgba(216,180,254,0.08);
  box-shadow:0 0 8px rgba(216,180,254,0.15);
}

/* ---- SCROLLBAR ---- */
::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-track { background:var(--bg); }
::-webkit-scrollbar-thumb { background:var(--border-subtle); border-radius:0; }
::-webkit-scrollbar-thumb:hover { background:var(--accent); }

/* ---- RESPONSIVE ---- */
@media (max-width:1024px){
  .footer-grid { grid-template-columns:repeat(3,1fr); }
  .marquee-item { font-size:14px; letter-spacing:2px; }
}
@media (max-width:768px){
  nav { display:none; }
  .menu-toggle { display:flex; }
  .footer-grid { grid-template-columns:1fr 1fr; gap:36px; }
  .footer-bottom { flex-direction:column; gap:10px; text-align:center; }
  .cart-drawer { width:100%; }
  .btn { padding:12px 24px; font-size:12px; }
}
/* ---- HERO ---- */
.hero {
  position:relative; min-height:100vh; display:flex; align-items:center;
  overflow:hidden; padding-top:68px;
}
.hero-bg {
  position:absolute; inset:0; z-index:0;
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-elevated) 100%);
}
.hero-scanlines {
  position:absolute; inset:0; z-index:1; pointer-events:none; opacity:0.15;
  background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(255,255,255,0.03) 2px, rgba(255,255,255,0.03) 4px);
}
.hero-grid {
  position:absolute; inset:0; z-index:1; opacity:0.08;
  background-image:
    linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size:60px 60px;
  pointer-events:none;
}
.hero-inner {
  max-width:1400px; margin:0 auto; padding:80px 24px;
  display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center;
  position:relative; z-index:3; width:100%;
}
.hero-left { display:flex; flex-direction:column; gap:18px; }
.hero-tag {
  display:inline-flex; align-items:center; gap:8px; width:fit-content;
  background:var(--accent-dim); color:var(--accent); padding:6px 14px; border-radius:2px;
  font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:2px;
  border:1px solid var(--accent); box-shadow:0 0 12px rgba(168,85,247,0.2);
}
.hero h1 {
  font-family:'Bebas Neue',sans-serif; font-size:clamp(48px,6vw,96px);
  line-height:0.92; letter-spacing:4px; text-transform:uppercase;
  color:var(--text);
}
.hero h1 .line-sub {
  font-size:0.35em; letter-spacing:6px; color:var(--text-faint); margin-top:6px;
  display:block; font-family:'Inter',sans-serif; font-weight:400;
}
.hero-desc { font-size:15px; color:var(--text-dim); max-width:420px; line-height:1.7; }
.hero-price { font-family:'Bebas Neue',sans-serif; font-size:42px; letter-spacing:3px; color:var(--accent); }
.hero-cta { display:flex; gap:14px; flex-wrap:wrap; }
.hero-right { position:relative; display:flex; align-items:center; justify-content:center; }
.hero-shoe-wrap {
  width:100%; max-width:520px; position:relative; z-index:2;
  animation: heroFloat 5s ease-in-out infinite;
  min-height: 320px;
}
@keyframes heroFloat { 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-18px); } }
.hero-shoe-wrap img {
  width:100%; display:block;
  filter:drop-shadow(0 20px 40px rgba(168,85,247,0.15));
}
.hero-glow {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:80%; height:80%; background:radial-gradient(circle, var(--accent) 0%, transparent 70%);
  opacity:0.08; filter:blur(60px); z-index:0;
  animation:glowPulse 4s ease-in-out infinite;
}
@keyframes glowPulse { 0%,100%{ opacity:0.02; transform:translate(-50%,-50%) scale(1); } 50%{ opacity:0.06; transform:translate(-50%,-50%) scale(1.1); } }

/* ---- SECTION HEAD ---- */
.section-head {
  max-width:1400px; margin:0 auto; padding:48px 24px 20px;
  display:flex; justify-content:space-between; align-items:baseline;
}
.section-head h2 {
  font-family:'Bebas Neue',sans-serif; font-size:clamp(32px,3vw,48px); letter-spacing:2px; text-transform:uppercase;
  color:var(--text);
}
.section-head a {
  font-size:13px; font-weight:700; color:var(--text-dim); text-transform:uppercase; letter-spacing:0.8px; transition:color var(--tr);
}
.section-head a:hover { color:var(--accent); }

/* ---- SLIDE CARDS (scroll) ---- */
.scroll-slider {
  max-width:1400px; margin:0 auto; padding:0 24px 80px;
  overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.scroll-slider::-webkit-scrollbar { display:none; }
.scroll-track { display:flex; gap:20px; padding-bottom:8px; }
.slide-card {
  flex:0 0 300px; background:var(--bg-card); border:1px solid var(--border-subtle);
  border-radius:2px; overflow:hidden; position:relative;
  transition:all 0.4s cubic-bezier(0.4,0,0.2,1);
  box-shadow:0 2px 8px rgba(0,0,0,0.3);
}
.slide-card:hover {
  border-color:var(--accent);
  box-shadow:0 0 24px rgba(168,85,247,0.1), 0 8px 32px rgba(0,0,0,0.4);
  transform:translateY(-4px);
}
.slide-img { aspect-ratio:1; overflow:hidden; background:var(--surface-solid); position:relative; }
.slide-img img { width:100%; height:100%; object-fit:cover; transition:transform 0.5s cubic-bezier(0.4,0,0.2,1); }
.slide-card:hover .slide-img img { transform:scale(1.06); }
.slide-shimmer {
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.06) 45%, transparent 50%);
  background-size:200% 100%; opacity:0; transition:opacity 0.3s;
}
.slide-card:hover .slide-shimmer { opacity:1; animation:shimmerSweep 1.2s ease-in-out infinite; }
@keyframes shimmerSweep { 0%{ background-position:200% 0; } 100%{ background-position:-200% 0; } }
.slide-atc {
  position:absolute; bottom:0; left:0; right:0;
  background:linear-gradient(to top, rgba(0,0,0,0.8), transparent);
  padding:20px 16px 12px;
  transform:translateY(100%);
  transition:transform 0.4s cubic-bezier(0.4,0,0.2,1);
  z-index:3; display:flex; justify-content:center;
}
.slide-card:hover .slide-atc { transform:translateY(0); }
.slide-atc button {
  background:var(--accent); color:#fff; padding:10px 22px; border-radius:2px;
  font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:0.5px;
  border:none; cursor:pointer; transition:all 0.2s; outline:none;
}
.slide-atc button:hover { background:var(--accent-hover); transform:scale(1.03); }
.slide-atc button:focus-visible { box-shadow:0 0 0 2px rgba(168,85,247,0.5); }
.slide-wish {
  position:absolute; top:14px; right:14px; width:36px; height:36px; border-radius:2px;
  background:rgba(0,0,0,0.6); backdrop-filter:blur(8px); border:1px solid var(--border-subtle);
  display:flex; align-items:center; justify-content:center; color:var(--text);
  transition:all var(--tr); font-size:14px; z-index:4; cursor:pointer;
}
.slide-wish:focus-visible { box-shadow:0 0 0 2px rgba(168,85,247,0.5); }
.slide-wish:hover { background:var(--accent); color:#fff; border-color:var(--accent); }
.slide-wish.saved { background:var(--accent); color:#fff; border-color:var(--accent); }
.slide-info { padding:16px; display:flex; flex-direction:column; gap:4px; }
.slide-brand { font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:1.5px; color:var(--text-faint); }
.slide-name { font-size:14px; font-weight:600; line-height:1.3; }
.slide-price { font-size:14px; font-weight:700; margin-top:4px; color:var(--text); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; }
.stock-indicator { display:flex; align-items:center; gap:6px; margin-top:6px; font-size:11px; font-weight:600; color:var(--text-dim); }
.stock-dot { width:6px; height:6px; border-radius:0; display:inline-block; }
.stock-dot.green { background:#d8b4fe; box-shadow:0 0 6px rgba(216,180,254,0.4); }
.stock-dot.yellow { background:#ffcc00; box-shadow:0 0 6px rgba(255,204,0,0.4); }
.stock-dot.red { background:var(--accent); box-shadow:0 0 6px rgba(168,85,247,0.4); }

.qv-btn {
  position:absolute; bottom:14px; left:50%; transform:translateX(-50%);
  background:rgba(0,0,0,0.85); color:#fff; padding:8px 18px; border-radius:2px;
  font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:0.5px;
  box-shadow:0 4px 16px rgba(0,0,0,0.3); opacity:0; transition:opacity var(--tr),transform var(--tr);
  pointer-events:none; z-index:4; border:none; cursor:pointer;
}
.slide-wish:focus-visible { box-shadow:0 0 0 2px rgba(168,85,247,0.5); }
.slide-card:hover .qv-btn { opacity:1; pointer-events:auto; }

/* ---- BANNERS ---- */
.banners {
  max-width:1400px; margin:0 auto; padding:0 24px 80px;
  display:grid; grid-template-columns:1fr 1fr; gap:20px;
}
.banner-card {
  position:relative; height:480px; border-radius:2px; overflow:hidden;
  display:flex; flex-direction:column; justify-content:flex-end; padding:36px;
  border:1px solid var(--border-subtle); box-shadow:0 2px 8px rgba(0,0,0,0.3);
  will-change:transform; transition:all 0.4s;
}
.banner-card:hover { border-color:var(--accent); box-shadow:0 0 24px rgba(168,85,247,0.1), 0 8px 32px rgba(0,0,0,0.4); transform:translateY(-4px); }
.banner-card img {
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform 0.8s cubic-bezier(0.4,0,0.2,1); will-change:transform;
}
.banner-card:hover img { transform:scale(1.04); }
.banner-card::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.4) 40%, transparent 100%);
  pointer-events:none;
}
.banner-content { position:relative; z-index:3; }
.banner-content .label {
  font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:2px;
  color:var(--accent); margin-bottom:12px; display:inline-block;
  border:1px solid var(--accent); padding:4px 12px; border-radius:2px;
  box-shadow:0 0 8px rgba(168,85,247,0.2);
}
.banner-content h3 {
  font-family:'Bebas Neue',sans-serif; font-size:clamp(36px,3.5vw,56px); text-transform:uppercase;
  letter-spacing:2px; line-height:1; margin-bottom:14px; color:#fff;
}
.banner-content p { font-size:15px; color:rgba(255,255,255,0.6); max-width:380px; line-height:1.7; margin-bottom:20px; }

/* ---- MANIFESTO ---- */
.manifesto-section {
  max-width:1400px; margin:0 auto; padding:0 24px 80px;
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
}
.manifesto-card {
  background:var(--bg-card); border:1px solid var(--border-subtle); border-radius:2px;
  padding:40px 32px; position:relative; overflow:hidden;
  transition:all 0.4s cubic-bezier(0.4,0,0.2,1);
  box-shadow:0 2px 8px rgba(0,0,0,0.3);
}
.manifesto-card:hover {
  border-color:var(--accent);
  box-shadow:0 0 24px rgba(168,85,247,0.08), 0 8px 32px rgba(0,0,0,0.4);
  transform:translateY(-4px);
}
.m-index {
  font-family:'Bebas Neue',sans-serif; font-size:80px; line-height:1;
  color:rgba(255,255,255,0.03); position:absolute; top:12px; right:20px; pointer-events:none;
  transition:color 0.4s;
}
.manifesto-card:hover .m-index { color:var(--accent); opacity:0.08; }
.m-label {
  font-size:10px; text-transform:uppercase; letter-spacing:2px; color:var(--accent);
  margin-bottom:18px; display:inline-block;
  border:1px solid var(--accent); padding:4px 10px; border-radius:2px;
  box-shadow:0 0 8px rgba(168,85,247,0.15);
}
.manifesto-card h3 {
  font-family:'Bebas Neue',sans-serif; font-size:28px; letter-spacing:1.5px;
  text-transform:uppercase; margin-bottom:14px; position:relative; z-index:2; color:var(--text);
}
.manifesto-card p { font-size:14px; color:var(--text-dim); line-height:1.7; position:relative; z-index:2; }
.m-icon {
  width:48px; height:48px; margin-bottom:16px; position:relative; z-index:2;
  display:flex; align-items:center; justify-content:center;
  background:var(--surface); border-radius:2px; border:1px solid var(--border-subtle);
  color:var(--accent); font-size:20px;
  transition:all 0.4s cubic-bezier(0.34,1.56,0.64,1);
}
.manifesto-card:hover .m-icon { transform:scale(1.1); background:rgba(168,85,247,0.1); border-color:var(--accent); box-shadow:0 0 12px rgba(168,85,247,0.15); }

/* ---- NEWSLETTER ---- */
.newsletter {
  background:var(--bg-elevated); border-top:1px solid var(--border);
  position:relative; overflow:hidden;
}
.newsletter-inner {
  max-width:1400px; margin:0 auto; padding:80px 24px;
  display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center;
  position:relative; z-index:1;
}
.newsletter-left { position:relative; }
.newsletter-left .join-text {
  font-family:'Bebas Neue',sans-serif; font-size:clamp(80px,12vw,160px);
  line-height:0.85; letter-spacing:4px; color:var(--text);
  opacity:0.04; position:absolute; top:50%; left:0; transform:translateY(-50%);
  pointer-events:none; user-select:none; white-space:nowrap;
}
.newsletter-left h3 {
  font-family:'Bebas Neue',sans-serif; font-size:42px; text-transform:uppercase;
  letter-spacing:2px; margin-bottom:14px; position:relative; z-index:1;
}
.newsletter-left p { font-size:15px; color:var(--text-dim); line-height:1.7; position:relative; z-index:1; }
.newsletter-form { display:flex; gap:12px; position:relative; z-index:1; }
.newsletter-form input {
  flex:1; height:52px; background:var(--surface);
  border:1px solid var(--border-subtle); border-radius:2px; padding:0 20px;
  color:var(--text); font-family:inherit; font-size:15px; outline:none;
  transition:border-color var(--tr), box-shadow var(--tr);
}
.newsletter-form input::placeholder { color:var(--text-faint); }
.newsletter-form input:focus {
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(168,85,247,0.15), 0 0 20px rgba(168,85,247,0.08);
}
.magnetic-btn {
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  padding:14px 32px; border-radius:2px; font-size:14px; font-weight:800;
  text-transform:uppercase; letter-spacing:0.8px;
  background:var(--btn-primary-bg); color:var(--btn-primary-text);
  border:none; cursor:pointer; overflow:hidden;
  transition:transform 0.15s cubic-bezier(0.4,0,0.2,1), box-shadow 0.3s;
}
.magnetic-btn:hover { box-shadow:0 0 24px rgba(168,85,247,0.3); transform:translateY(-1px); }

/* ---- QUICK VIEW ---- */
.qv-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.7); backdrop-filter:blur(12px); z-index:610; display:none; align-items:center; justify-content:center; padding:20px; }
.qv-overlay.open { display:flex; }
.qv-modal { background:var(--bg-card); border:1px solid var(--border-subtle); border-radius:2px; width:100%; max-width:800px; max-height:90vh; overflow-y:auto; display:grid; grid-template-columns:1fr 1fr; gap:0; box-shadow:0 24px 60px rgba(0,0,0,0.5), 0 0 40px rgba(168,85,247,0.08); position:relative; }
.qv-img { padding:24px; background:var(--surface-solid); display:flex; align-items:center; justify-content:center; }
.qv-img img { width:100%; border-radius:2px; }
.qv-detail { padding:32px; display:flex; flex-direction:column; gap:16px; }
.qv-detail h2 { font-family:'Bebas Neue'; font-size:36px; letter-spacing:1.5px; line-height:1; color:var(--text); }
.qv-brand { font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:1px; color:var(--accent); }
.qv-price { font-family:'Bebas Neue'; font-size:32px; letter-spacing:1px; color:var(--text); }
.qv-desc { font-size:14px; color:var(--text-dim); line-height:1.7; }
.qv-sizes-label { font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:0.5px; color:var(--text-faint); }
.qv-sizes { display:flex; flex-wrap:wrap; gap:8px; margin-top:4px; }
.size-btn { height:44px; min-width:52px; padding:0 16px; border:1px solid var(--border-subtle); background:transparent; color:var(--text); font-weight:700; font-size:13px; cursor:pointer; transition:all var(--tr); border-radius:2px; }
.size-btn:hover, .size-btn.active { border-color:var(--accent); background:var(--accent); color:#fff; box-shadow:0 0 12px rgba(168,85,247,0.2); }
.qv-close { position:absolute; top:16px; right:16px; width:36px; height:36px; border-radius:2px; background:var(--surface); border:1px solid var(--border-subtle); display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--text); z-index:5; transition:all 0.2s; }
.qv-close:hover { background:var(--accent); color:#fff; border-color:var(--accent); }

/* ---- PROMO POPUP ---- */
.promo-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.6); backdrop-filter:blur(8px); z-index:700; display:none; align-items:center; justify-content:center; padding:20px; }
.promo-overlay.open { display:flex; }
.promo-modal { background:var(--bg-card); border:1px solid var(--accent); border-radius:2px; max-width:420px; width:100%; padding:40px; text-align:center; position:relative; box-shadow:0 24px 60px rgba(0,0,0,0.4), 0 0 40px rgba(168,85,247,0.1); }
.promo-close { position:absolute; top:12px; right:12px; width:32px; height:32px; border-radius:2px; background:transparent; border:none; color:var(--text-dim); font-size:20px; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.promo-tag { display:inline-flex; align-items:center; gap:8px; background:var(--accent-dim); color:var(--accent); padding:6px 14px; border-radius:2px; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:2px; margin-bottom:16px; border:1px solid var(--accent); box-shadow:0 0 8px rgba(168,85,247,0.2); }
.promo-modal h3 { font-family:'Bebas Neue'; font-size:36px; letter-spacing:1px; margin-bottom:12px; line-height:1; color:var(--text); }
.promo-modal p { font-size:15px; color:var(--text-dim); line-height:1.7; margin-bottom:24px; }
.promo-dismiss { margin-top:12px; font-size:13px; color:var(--text-faint); cursor:pointer; text-decoration:underline; }

/* ---- LIVE CHAT ---- */
.chat-fab {
  position:fixed; bottom:24px; right:24px; width:56px; height:56px; border-radius:2px;
  background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 24px rgba(168,85,247,0.3); z-index:300; cursor:pointer; border:none;
  transition:all var(--tr); font-size:20px;
}
.chat-fab:hover { transform:scale(1.05); box-shadow:0 0 32px rgba(168,85,247,0.4); }
.chat-panel {
  position:fixed; bottom:92px; right:24px; width:320px; background:var(--bg-card);
  border:1px solid var(--accent); border-radius:2px;
  box-shadow:0 12px 40px rgba(0,0,0,0.4), 0 0 24px rgba(168,85,247,0.1); z-index:300;
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:all var(--tr);
}
.chat-panel.open { opacity:1; visibility:visible; transform:translateY(0); }
.chat-header { padding:16px 20px; border-bottom:1px solid var(--border-subtle); font-weight:800; font-size:14px; display:flex; justify-content:space-between; align-items:center; color:var(--text); text-transform:uppercase; letter-spacing:1px; }
.chat-body { padding:20px; font-size:13px; color:var(--text-dim); line-height:1.7; }

/* ---- BACK TO TOP ---- */
.back-to-top {
  position:fixed; bottom:24px; left:24px; width:48px; height:48px; border-radius:2px;
  background:var(--bg-card); color:var(--text); box-shadow:0 0 16px rgba(168,85,247,0.15);
  display:flex; align-items:center; justify-content:center; z-index:300;
  opacity:0; visibility:hidden; transition:all var(--tr); cursor:pointer; border:1px solid var(--border-subtle);
}
.back-to-top.visible { opacity:1; visibility:visible; }
.back-to-top:hover { background:var(--accent); color:#fff; border-color:var(--accent); box-shadow:0 0 24px rgba(168,85,247,0.3); }

/* ---- RECENT CARD ---- */
.recent-card { flex:0 0 240px; background:var(--bg-card); border:1px solid var(--border-subtle); border-radius:2px; overflow:hidden; transition:all var(--tr); }
.recent-card:hover { transform:translateY(-4px); box-shadow:0 0 16px rgba(168,85,247,0.1), 0 8px 24px rgba(0,0,0,0.3); border-color:var(--accent); }
.recent-card img { width:100%; aspect-ratio:1; object-fit:cover; }
.recent-info { padding:14px; display:flex; flex-direction:column; gap:2px; }
.recent-brand { font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:1px; color:var(--text-faint); }
.recent-name { font-size:14px; font-weight:600; color:var(--text); }
.recent-price { font-size:14px; font-weight:700; margin-top:4px; color:var(--text); }

@media (max-width:1024px){
  .hero-inner { grid-template-columns:1fr; text-align:center; padding-top:60px; }
  .hero-left { order:2; align-items:center; }
  .hero-right { order:1; }
  .hero-right img { max-width:380px; }
  .hero-desc { max-width:500px; }
  .hero-cta { justify-content:center; }
  .banners { grid-template-columns:1fr; }
  .newsletter-inner { grid-template-columns:1fr; text-align:center; }
  .manifesto-section { grid-template-columns:1fr; }
  .qv-modal { grid-template-columns:1fr; }
  .slide-card { flex:0 0 280px; }
}
@media (max-width:768px){
  .hero h1 { font-size:56px; }
  .hero-price { font-size:36px; }
  .banner-card { height:400px; padding:28px; }
  .banner-content h3 { font-size:36px; }
  .manifesto-card { padding:32px 24px; }
  .newsletter-inner { padding:48px 24px; }
  .hero-shoe-wrap { animation:none; }
  .hero-particles { display:none; }
  .marquee-item span { animation:none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; }
}

/* ==========================================================
   ANIMATIONS - Brutalist Cyberpunk Effects
   ========================================================== */

/* ---- 1. SCROLL REVEAL ---- */
.reveal-up {
  opacity:0;
  transform:translateY(60px);
  transition:opacity 0.9s cubic-bezier(0.16,1,0.3,1), transform 0.9s cubic-bezier(0.16,1,0.3,1);
}
.reveal-up.visible {
  opacity:1;
  transform:translateY(0);
}

.reveal-left {
  opacity:0;
  transform:translateX(-60px);
  transition:opacity 0.9s cubic-bezier(0.16,1,0.3,1), transform 0.9s cubic-bezier(0.16,1,0.3,1);
}
.reveal-left.visible {
  opacity:1;
  transform:translateX(0);
}

.reveal-right {
  opacity:0;
  transform:translateX(60px);
  transition:opacity 0.9s cubic-bezier(0.16,1,0.3,1), transform 0.9s cubic-bezier(0.16,1,0.3,1);
}
.reveal-right.visible {
  opacity:1;
  transform:translateX(0);
}

.reveal-scale {
  opacity:0;
  transform:scale(0.85);
  transition:opacity 0.9s cubic-bezier(0.16,1,0.3,1), transform 0.9s cubic-bezier(0.16,1,0.3,1);
}
.reveal-scale.visible {
  opacity:1;
  transform:scale(1);
}

/* Glitch reveal variant */
.reveal-glitch {
  opacity:0;
  transform:translateY(40px) skewX(-2deg);
  filter:blur(4px);
  transition:opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1), filter 0.7s;
}
.reveal-glitch.visible {
  opacity:1;
  transform:translateY(0) skewX(0deg);
  filter:blur(0);
}

/* Stagger delays */
.stagger-1 { transition-delay:0.08s; }
.stagger-2 { transition-delay:0.16s; }
.stagger-3 { transition-delay:0.24s; }
.stagger-4 { transition-delay:0.32s; }
.stagger-5 { transition-delay:0.40s; }
.stagger-6 { transition-delay:0.48s; }
.stagger-7 { transition-delay:0.56s; }
.stagger-8 { transition-delay:0.64s; }

/* ---- 2. NEON FLICKER ---- */
@keyframes neonPulse {
  0%, 100% { opacity:1; text-shadow:0 0 10px var(--accent), 0 0 20px var(--accent), 0 0 40px var(--accent); }
  50% { opacity:0.85; text-shadow:0 0 5px var(--accent), 0 0 10px var(--accent), 0 0 20px var(--accent); }
}

@keyframes neonFlicker {
  0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
    opacity:1;
    text-shadow:0 0 10px var(--accent), 0 0 20px var(--accent), 0 0 40px var(--accent), 0 0 80px rgba(168,85,247,0.3);
  }
  20%, 24%, 55% {
    opacity:0.6;
    text-shadow:none;
  }
}

.neon-flicker {
  animation:neonFlicker 4s infinite;
}

.neon-pulse {
  animation:neonPulse 2s ease-in-out infinite;
}

/* Neon border flicker */
@keyframes borderFlicker {
  0%, 100% { border-color:var(--accent); box-shadow:0 0 8px rgba(168,85,247,0.3), inset 0 0 8px rgba(168,85,247,0.05); }
  50% { border-color:rgba(168,85,247,0.6); box-shadow:0 0 20px rgba(168,85,247,0.5), inset 0 0 12px rgba(168,85,247,0.1); }
}

.neon-border {
  animation:borderFlicker 3s ease-in-out infinite;
}

/* ---- 3. TEXT SCRAMBLE CURSOR ---- */
@keyframes cursorBlink {
  0%, 100% { opacity:1; }
  50% { opacity:0; }
}

.scramble-cursor::after {
  content:'_';
  color:var(--accent);
  animation:cursorBlink 1s step-end infinite;
  margin-left:2px;
}

/* ---- 4. STAGGERED GRID LOAD ---- */
@keyframes gridStagger {
  0% { opacity:0; transform:translateY(40px) scale(0.95); }
  100% { opacity:1; transform:translateY(0) scale(1); }
}

.grid-stagger > * {
  opacity:0;
  animation:gridStagger 0.6s cubic-bezier(0.16,1,0.3,1) forwards;
}
.grid-stagger > *:nth-child(1) { animation-delay:0.05s; }
.grid-stagger > *:nth-child(2) { animation-delay:0.10s; }
.grid-stagger > *:nth-child(3) { animation-delay:0.15s; }
.grid-stagger > *:nth-child(4) { animation-delay:0.20s; }
.grid-stagger > *:nth-child(5) { animation-delay:0.25s; }
.grid-stagger > *:nth-child(6) { animation-delay:0.30s; }
.grid-stagger > *:nth-child(7) { animation-delay:0.35s; }
.grid-stagger > *:nth-child(8) { animation-delay:0.40s; }
.grid-stagger > *:nth-child(9) { animation-delay:0.45s; }
.grid-stagger > *:nth-child(10) { animation-delay:0.50s; }
.grid-stagger > *:nth-child(11) { animation-delay:0.55s; }
.grid-stagger > *:nth-child(12) { animation-delay:0.60s; }

/* ---- 5. PARALLAX ---- */
.parallax-slow {
  will-change:transform;
  transition:transform 0.1s linear;
}

/* ---- 6. PAGE TRANSITIONS ---- */
/* ---- 7. ENHANCED GLITCH ---- */
@keyframes glitchSkew {
  0% { transform:skew(0deg); }
  20% { transform:skew(-2deg); }
  40% { transform:skew(2deg); }
  60% { transform:skew(-1deg); }
  80% { transform:skew(1deg); }
  100% { transform:skew(0deg); }
}

.glitch-skew {
  animation:glitchSkew 4s infinite;
}

@keyframes glitchShake {
  0%, 100% { transform:translate(0); }
  10% { transform:translate(-2px, 1px); }
  20% { transform:translate(2px, -1px); }
  30% { transform:translate(-1px, 2px); }
  40% { transform:translate(1px, -2px); }
  50% { transform:translate(-2px, -1px); }
  60% { transform:translate(2px, 1px); }
  70% { transform:translate(-1px, -2px); }
  80% { transform:translate(1px, 2px); }
  90% { transform:translate(-2px, 1px); }
}

.glitch-shake {
  animation:glitchShake 0.5s cubic-bezier(0.36,0.07,0.19,0.97) both;
}

/* ---- 8. FLOATING / HOVER EFFECTS ---- */
@keyframes float {
  0%, 100% { transform:translateY(0); }
  50% { transform:translateY(-10px); }
}

.float-animation {
  animation:float 4s ease-in-out infinite;
}

/* Magnetic button effect helper */
.magnetic-hover {
  transition:transform 0.2s cubic-bezier(0.4,0,0.2,1);
}

/* ---- 9. LOADING / SKELETON ---- */
@keyframes skeletonShine {
  0% { background-position:-200% 0; }
  100% { background-position:200% 0; }
}

.skeleton {
  background:linear-gradient(90deg, var(--surface-solid) 25%, rgba(168,85,247,0.05) 50%, var(--surface-solid) 75%);
  background-size:200% 100%;
  animation:skeletonShine 1.5s infinite;
}

/* ---- 10. PARTICLE / NOISE ---- */
@keyframes noise {
  0%, 100% { transform:translate(0, 0); }
  10% { transform:translate(-2%, -2%); }
  20% { transform:translate(2%, 2%); }
  30% { transform:translate(-1%, 1%); }
  40% { transform:translate(1%, -1%); }
  50% { transform:translate(-2%, 2%); }
  60% { transform:translate(2%, -2%); }
  70% { transform:translate(-1%, -1%); }
  80% { transform:translate(1%, 1%); }
  90% { transform:translate(-2%, -1%); }
}

.noise-bg {
  position:relative;
  overflow:hidden;
}
.noise-bg::before {
  content:''; position:absolute; inset:-50%;
  background:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:0.03;
  animation:noise 0.5s steps(2) infinite;
  pointer-events:none;
  z-index:1;
}

/* ---- 11. HEARTBEAT ---- */
@keyframes heartBeat {
  0% { transform:scale(1); }
  14% { transform:scale(1.15); }
  28% { transform:scale(1); }
  42% { transform:scale(1.15); }
  70% { transform:scale(1); }
}

.heart-beat {
  animation:heartBeat 0.8s ease-in-out;
}

/* ---- 12. SCANLINE SWEEP ---- */
@keyframes scanlineSweep {
  0% { top:-10%; }
  100% { top:110%; }
}

.scanline-sweep::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 0%, rgba(168,85,247,0.03) 50%, transparent 100%);
  height:20%;
  top:-10%;
  animation:scanlineSweep 4s linear infinite;
  pointer-events:none;
  z-index:2;
}

/* ---- 13. TYPING EFFECT ---- */
@keyframes typing {
  from { width:0; }
  to { width:100%; }
}

.typing-effect {
  overflow:hidden;
  white-space:nowrap;
  border-right:2px solid var(--accent);
  animation:typing 2s steps(40, end), cursorBlink 0.75s step-end infinite;
}

/* ---- 14. COUNT UP ---- */
@keyframes countUp {
  0% { opacity:0; transform:translateY(20px); }
  100% { opacity:1; transform:translateY(0); }
}

/* ---- 15. ROTATION GLITCH ---- */
@keyframes rotateGlitch {
  0% { transform:rotate(0deg); }
  25% { transform:rotate(1deg); }
  50% { transform:rotate(-1deg); }
  75% { transform:rotate(0.5deg); }
  100% { transform:rotate(0deg); }
}

.rotate-glitch {
  animation:rotateGlitch 3s ease-in-out infinite;
}

/* ---- 16. GLOBAL CUSTOM CURSOR ---- */
*, *::before, *::after, *:hover, *:active, *:focus, *:focus-visible, *:visited, *:link, *:checked, *:enabled, *:disabled {
  cursor:none !important;
}
input, textarea, select, button, a, label, [role="button"], [role="link"] {
  cursor:none !important;
}

/* Disable custom cursor on touch devices */
@media (hover:none) and (pointer:coarse) {
  *, *::before, *::after, *:hover, *:active, *:focus { cursor:auto !important; }
}
input, textarea, select, button, a, label, [role="button"], [role="link"] {
  cursor:none !important;
}

.custom-cursor {
  position:fixed; width:24px; height:24px; border:1.5px solid var(--accent); border-radius:50%;
  pointer-events:none; z-index:99999; transition:transform 0.15s ease-out, background 0.2s, border-color 0.2s;
  transform:translate(-50%,-50%);
}
.custom-cursor.hover {
  background:rgba(168,85,247,0.2); transform:translate(-50%,-50%) scale(1.8); border-color:var(--accent-hover);
}

.custom-cursor-dot {
  position:fixed; width:4px; height:4px; background:var(--accent); border-radius:50%;
  pointer-events:none; z-index:99998; transform:translate(-50%,-50%); transition:transform 0.08s ease-out;
}

/* Disable custom cursor on touch devices */
@media (hover:none) and (pointer:coarse) {
  *, *::before, *::after, *:hover, *:active, *:focus { cursor:auto !important; }
  .custom-cursor, .custom-cursor-dot { display:none !important; }
}

/* Checkout Success Animation */
.checkout-success-panel {
  text-align:center;
  padding:32px 20px;
  animation: checkoutSuccessIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes checkoutSuccessIn {
  from { opacity:0; transform:scale(0.85) translateY(20px); }
  to   { opacity:1; transform:scale(1) translateY(0); }
}
.checkout-success-panel .success-icon {
  font-size:56px;
  margin-bottom:16px;
  display:inline-block;
  animation: successPulse 1.2s ease-in-out infinite;
  color:var(--green);
}
@keyframes successPulse {
  0%,100% { transform:scale(1); filter:drop-shadow(0 0 6px rgba(168,85,247,0.4)); }
  50%      { transform:scale(1.08); filter:drop-shadow(0 0 16px rgba(168,85,247,0.7)); }
}
.checkout-success-panel .success-title {
  font-family:'Bebas Neue',sans-serif;
  font-size:24px;
  letter-spacing:3px;
  margin-bottom:10px;
  color:var(--text);
}
.checkout-success-panel .success-sub {
  font-size:13px;
  color:var(--text-faint);
  margin-bottom:24px;
}


/* Crypto Payment & Order Timeline */
#cryptoOverlay, #orderSuccessOverlay { display:none; }
.tl-step { display:flex; flex-direction:column; align-items:center; gap:6px; flex:1; position:relative; }
.tl-step .tl-dot { width:10px; height:10px; border-radius:50%; background:var(--border-solid); border:2px solid var(--text-faint); transition:all 0.4s; }
.tl-step.tl-active .tl-dot { background:var(--accent); border-color:var(--accent-hover); box-shadow:0 0 8px rgba(168,85,247,0.4); }
.tl-step .tl-label { font-size:9px; color:var(--text-faint); text-transform:uppercase; letter-spacing:0.5px; text-align:center; }
.tl-step.tl-active .tl-label { color:var(--accent); }
@keyframes spin { to { transform:rotate(360deg); } }

/* ==========================================
   SCROLL REVEAL SYSTEM (scroll-animations.js)
   ========================================== */
[data-scroll-reveal] {
  opacity: 0;
  transition: opacity 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: opacity, transform;
}
[data-scroll-reveal="up"] { transform: translateY(40px); }
[data-scroll-reveal="left"] { transform: translateX(-40px); }
[data-scroll-reveal="right"] { transform: translateX(40px); }
[data-scroll-reveal="scale"] { transform: scale(0.92); }
[data-scroll-reveal="scale-up"] { transform: scale(0.88); }
[data-scroll-reveal="blur-up"] {
  transform: translateY(30px);
  filter: blur(6px);
  transition: opacity 1s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              filter 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
[data-scroll-reveal="skew-left"] { transform: translateX(-20px) skewX(-3deg); }
[data-scroll-reveal="skew-right"] { transform: translateX(20px) skewX(3deg); }
[data-scroll-reveal].revealed {
  opacity: 1;
  transform: translate(0) scale(1) skew(0);
  filter: blur(0);
}

/* Stagger children */
[data-stagger] > * {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
[data-stagger].revealed > * {
  opacity: 1;
  transform: translateY(0);
}
[data-stagger].revealed > *:nth-child(1) { transition-delay: 0s; }
[data-stagger].revealed > *:nth-child(2) { transition-delay: 0.08s; }
[data-stagger].revealed > *:nth-child(3) { transition-delay: 0.16s; }
[data-stagger].revealed > *:nth-child(4) { transition-delay: 0.24s; }
[data-stagger].revealed > *:nth-child(5) { transition-delay: 0.32s; }
[data-stagger].revealed > *:nth-child(6) { transition-delay: 0.40s; }
[data-stagger].revealed > *:nth-child(7) { transition-delay: 0.48s; }
[data-stagger].revealed > *:nth-child(8) { transition-delay: 0.56s; }
[data-stagger].revealed > *:nth-child(9) { transition-delay: 0.64s; }
[data-stagger].revealed > *:nth-child(10) { transition-delay: 0.72s; }
[data-stagger].revealed > *:nth-child(11) { transition-delay: 0.80s; }
[data-stagger].revealed > *:nth-child(12) { transition-delay: 0.88s; }

/* Text fill on scroll */
.text-fill-scroll {
  position: relative;
  display: inline-block;
  overflow: hidden;
}
.text-fill-scroll .text-back {
  display: block;
  color: var(--text-faint);
}
.text-fill-scroll .text-front {
  display: block;
  position: absolute;
  inset: 0;
  color: var(--text);
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.text-fill-scroll.revealed .text-front {
  clip-path: inset(0 0% 0 0);
}

/* Section line reveal */
.section-line {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(168,85,247,0.25), transparent);
  max-width: 1400px;
  margin: 0 auto;
  opacity: 0;
  transform: scaleX(0.6);
  transition: opacity 1s, transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.section-line.revealed {
  opacity: 1;
  transform: scaleX(1);
}

/* Glow reveal */
[data-glow-reveal] {
  position: relative;
  overflow: hidden;
}
[data-glow-reveal]::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(168,85,247,0.12), transparent 60%);
  opacity: 0;
  transition: opacity 0.6s;
  pointer-events: none;
  z-index: 1;
}
[data-glow-reveal]:hover::after {
  opacity: 1;
}

/* Image reveal */
.img-reveal {
  position: relative;
  overflow: hidden;
}
.img-reveal::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--bg);
  transform: translateY(0);
  transition: transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  z-index: 2;
}
.img-reveal.revealed::before {
  transform: translateY(100%);
}

/* Scroll progress bar */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  z-index: 10000;
  box-shadow: 0 0 10px var(--accent);
  transition: width 0.1s linear;
}

/* Slide shimmer */
.slide-shimmer {
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.04) 45%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.04) 55%, transparent 60%);
  transform: translateX(-100%);
  transition: none;
  pointer-events: none;
  z-index: 3;
}
.slide-card:hover .slide-shimmer {
  animation: shimmerSweep 0.8s ease;
}
@keyframes shimmerSweep {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* Nav link hover underline */
.nav-links a {
  position: relative;
}
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 1.5px;
  background: var(--accent);
  box-shadow: 0 0 8px rgba(168,85,247,0.4);
  transition: width 0.3s cubic-bezier(0.16,1,0.3,1);
}
.nav-links a:hover::after,
.nav-links a.active::after {
  width: 100%;
}

/* Quick modal overlay */
.qv-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(12px);
  z-index: 500;
  display: none;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s;
}
.qv-overlay.open {
  display: flex;
  opacity: 1;
}
.qv-modal {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 2px;
  width: 92%;
  max-width: 920px;
  max-height: 90vh;
  overflow-y: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  box-shadow: 0 24px 60px rgba(0,0,0,0.5), 0 0 40px rgba(168,85,247,0.08);
  transform: scale(0.96) translateY(10px);
  transition: transform 0.4s cubic-bezier(0.16,1,0.3,1);
}
.qv-overlay.open .qv-modal {
  transform: scale(1) translateY(0);
}
.qv-img {
  position: relative;
  background: var(--surface-solid);
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.qv-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.qv-detail {
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.qv-brand {
  font-size: 11px;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 2px;
}
.qv-name {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 28px;
  letter-spacing: 1px;
  color: var(--text);
}
.qv-price {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 32px;
  color: var(--accent);
  letter-spacing: 1px;
}
.qv-desc {
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.7;
}
.qv-sizes-label {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-faint);
}
.qv-sizes {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.qv-sizes .size-btn {
  width: 44px;
  height: 36px;
  border: 1px solid var(--border-subtle);
  background: var(--surface-solid);
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
  border-radius: 2px;
  transition: all 0.2s;
  cursor: none;
}
.qv-sizes .size-btn:hover,
.qv-sizes .size-btn.active {
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 0 0 8px rgba(168,85,247,0.15);
}
.qv-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  background: rgba(0,0,0,0.5);
  border: 1px solid var(--border-subtle);
  color: var(--text);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  cursor: none;
  transition: all 0.2s;
}
.qv-close:hover {
  background: var(--surface-solid);
  border-color: var(--accent);
  color: var(--accent);
}
@media (max-width: 768px) {
  .qv-modal { grid-template-columns: 1fr; }
  .qv-img { min-height: 280px; }
}

/* Toast notification */
#toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(120%);
  background: rgba(10,0,10,0.95);
  border: 1px solid rgba(168,85,247,0.3);
  color: var(--text);
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 13px;
  z-index: 500;
  transition: opacity 0.3s, transform 0.3s;
  opacity: 0;
}