/* ═══════════════════════════════════════════════════════════
   WikiShoes — The Sneaker Experience
   EXTREME Premium CSS — Glass, Glow, Parallax, Animations
   ═══════════════════════════════════════════════════════════ */

/* ─── CSS VARIABLES ─── */
:root {
    --bg-primary: #0A0A0A;
    --bg-secondary: #0B1F3A;
    --bg-tertiary: #112a4a;
    --bg-card: #0e1a2e;
    --text-primary: #FFFFFF;
    --text-secondary: #b0c4de;
    --text-muted: #5a7a9a;
    --accent: #D4AF37;
    --accent-dark: #b8961f;
    --accent-light: #F5D76E;
    --accent-orange: #F5D76E;
    --accent-blue: #1C3D66;
    --accent-gold: #D4AF37;
    --accent-emerald: #4ecdc4;
    --accent-violet: #7c6bc4;
    --accent-cyan: #5ba4cf;
    --glass-bg: rgba(255,255,255,0.03);
    --glass-border: rgba(212,175,55,0.08);
    --glass-bg-strong: rgba(255,255,255,0.06);
    --glass-border-strong: rgba(212,175,55,0.15);
    --gradient-main: linear-gradient(135deg, #D4AF37 0%, #F5D76E 50%, #D4AF37 100%);
    --gradient-text: linear-gradient(135deg, #F5D76E, #D4AF37, #b8961f);
    --gradient-cool: linear-gradient(135deg, #1C3D66 0%, #0B1F3A 50%, #1C3D66 100%);
    --gradient-aurora: linear-gradient(135deg, #1C3D66, #D4AF37, #F5D76E, #0B1F3A);
    --gradient-glow: radial-gradient(circle, rgba(212,175,55,0.10) 0%, transparent 70%);
    --shadow-glass: 0 8px 32px rgba(0,0,0,0.6);
    --shadow-glow: 0 0 60px rgba(212,175,55,0.18);
    --shadow-glow-strong: 0 0 80px rgba(212,175,55,0.3), 0 0 120px rgba(212,175,55,0.1);
    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-xl: 32px;
    --radius-full: 100px;
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-elastic: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    --font-primary: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-display: 'Syne', sans-serif;
    --font-serif: 'Playfair Display', Georgia, serif;
}

/* ─── LIGHT MODE ─── */
body.light-mode {
    --bg-primary: #f5f5f0;
    --bg-secondary: #eeeee8;
    --bg-tertiary: #e5e5df;
    --bg-card: #ffffff;
    --text-primary: #0A0A0A;
    --text-secondary: #3a4a5a;
    --text-muted: #7a8a9a;
    --glass-bg: rgba(0,0,0,0.03);
    --glass-border: rgba(212,175,55,0.10);
    --glass-bg-strong: rgba(0,0,0,0.06);
    --glass-border-strong: rgba(212,175,55,0.18);
    --shadow-glass: 0 8px 32px rgba(0,0,0,0.08);
    --shadow-glow: 0 0 60px rgba(212,175,55,0.12);
    --shadow-glow-strong: 0 0 40px rgba(212,175,55,0.15);
    --gradient-glow: radial-gradient(circle, rgba(212,175,55,0.05) 0%, transparent 70%);
}
body.light-mode .cursor,body.light-mode .cursor-follower{mix-blend-mode:normal}
body.light-mode ::-webkit-scrollbar-track{background:var(--bg-secondary)}
body.light-mode .preloader-blob{opacity:.15}
body.light-mode .nav.scrolled{background:rgba(245,245,240,0.9)}

/* ─── RESET ─── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;font-size:16px;overflow-x:hidden}
body{font-family:var(--font-primary);background:var(--bg-primary);color:var(--text-primary);overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;transition:background .5s,color .5s}
::selection{background:var(--accent);color:#fff}
::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-track{background:var(--bg-primary)}
::-webkit-scrollbar-thumb{background:var(--accent);border-radius:5px}
a{text-decoration:none;color:inherit}
ul{list-style:none}
img{max-width:100%;display:block}
button{border:none;background:none;cursor:pointer;font-family:var(--font-primary)}
input,select,textarea{font-family:var(--font-primary)}
.container{width:100%;max-width:1400px;margin:0 auto;padding:0 40px}
.section{padding:120px 0;position:relative}

/* ═══════════════════════════════════════════════════════════
   PRELOADER — Premium Loading Experience
   ═══════════════════════════════════════════════════════════ */
#preloader{position:fixed;inset:0;background:linear-gradient(135deg,#0A0A0A 0%,#0B1F3A 50%,#0A0A0A 100%);background-size:400% 400%;animation:preloaderBgShift 8s ease infinite;z-index:99999;display:flex;align-items:center;justify-content:center;transition:opacity 1s var(--ease-out),visibility 1s,transform 1s var(--ease-out)}
#preloader.loaded{opacity:0;visibility:hidden;pointer-events:none;transform:scale(1.05)}
.preloader-inner{text-align:center;position:relative;animation:preloaderFloat 3s ease-in-out infinite;display:flex;flex-direction:column;align-items:center;justify-content:center}
@keyframes preloaderBgShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes preloaderFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.preloader-blob{position:absolute;width:350px;height:350px;background:radial-gradient(circle,var(--accent) 0%,transparent 70%);border-radius:40% 60% 70% 30%;top:50%;left:50%;transform:translate(-50%,-50%);filter:blur(80px);animation:blobPulse 2s ease-in-out infinite,blobMorph 8s ease-in-out infinite;opacity:.25}
.preloader-blob-2{background:radial-gradient(circle,var(--accent-blue) 0%,transparent 70%);animation-delay:1s;width:250px;height:250px;border-radius:60% 40% 30% 70%}
@keyframes blobPulse{0%,100%{transform:translate(-50%,-50%) scale(1);opacity:.25}50%{transform:translate(-50%,-50%) scale(1.4);opacity:.45}}
@keyframes blobMorph{0%{border-radius:40% 60% 70% 30%}25%{border-radius:60% 40% 30% 70%}50%{border-radius:50% 50% 60% 40%}75%{border-radius:30% 70% 40% 60%}100%{border-radius:40% 60% 70% 30%}}
.preloader-content{position:relative;z-index:2}
.preloader-logo-wrap{margin-bottom:50px;position:relative;display:flex;flex-direction:column;align-items:center}
.preloader-logo{font-family:var(--font-display);font-size:clamp(2.5rem,7vw,4.5rem);font-weight:900;letter-spacing:12px;display:block;background:var(--gradient-main);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:logoShine 3s linear infinite;background-size:200% auto;text-shadow:none;position:relative}
.preloader-logo::after{content:'';position:absolute;bottom:-8px;left:50%;transform:translateX(-50%);width:60px;height:2px;background:var(--gradient-main);border-radius:2px;animation:preloaderLineExpand 2s ease-in-out infinite}
@keyframes preloaderLineExpand{0%,100%{width:60px;opacity:.5}50%{width:120px;opacity:1}}
@keyframes logoShine{to{background-position:200% center}}
.preloader-tagline{font-size:10px;letter-spacing:6px;color:var(--accent-light);text-transform:uppercase;display:block;margin-top:18px;opacity:.6;animation:preloaderTagFade 2s ease-in-out infinite}
@keyframes preloaderTagFade{0%,100%{opacity:.4;letter-spacing:6px}50%{opacity:.8;letter-spacing:8px}}
.preloader-progress{display:flex;flex-direction:column;align-items:center;gap:16px;width:100%}
.preloader-bar{width:260px;height:3px;background:rgba(212,175,55,0.08);border-radius:3px;overflow:hidden;position:relative}
.preloader-bar::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(212,175,55,.1),transparent);animation:preloaderBarShimmer 2s linear infinite}
@keyframes preloaderBarShimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
.preloader-bar-fill{height:100%;width:0%;background:var(--gradient-main);border-radius:3px;transition:width .15s ease;box-shadow:0 0 15px rgba(212,175,55,0.5),0 0 30px rgba(212,175,55,0.2)}
.preloader-percent{font-size:11px;color:var(--accent-light);letter-spacing:4px;font-weight:600;font-family:var(--font-display);opacity:.7}
/* Orbit rings */
.preloader-ring{position:absolute;border-radius:50%;border:1px solid transparent;top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none}
.preloader-ring-1{width:200px;height:200px;border-top-color:rgba(212,175,55,.2);border-right-color:rgba(212,175,55,.05);animation:preloaderOrbit 4s linear infinite}
.preloader-ring-2{width:280px;height:280px;border-bottom-color:rgba(245,215,110,.15);border-left-color:rgba(245,215,110,.03);animation:preloaderOrbit 6s linear infinite reverse}
.preloader-ring-3{width:360px;height:360px;border-top-color:rgba(28,61,102,.1);border-right-color:rgba(28,61,102,.03);animation:preloaderOrbit 8s linear infinite}
@keyframes preloaderOrbit{to{transform:translate(-50%,-50%) rotate(360deg)}}

/* Preloader enhanced particles */
.preloader-particle{position:absolute;width:4px;height:4px;background:var(--accent);border-radius:50%;pointer-events:none;opacity:0}
@keyframes preloaderParticleFloat{0%{transform:translate(0,0) scale(0);opacity:0}20%{opacity:.8;transform:scale(1)}80%{opacity:.3}100%{transform:translate(var(--px,50px),var(--py,-80px)) scale(0);opacity:0}}
.preloader-particle{animation:preloaderParticleFloat var(--pdur,3s) ease-out infinite;animation-delay:var(--pdelay,0s)}

/* Preloader glowing dots ring */
.preloader-dots-ring{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:320px;height:320px;animation:preloaderOrbit 10s linear infinite;pointer-events:none}
.preloader-dot{position:absolute;width:5px;height:5px;background:var(--accent);border-radius:50%;box-shadow:0 0 8px rgba(212,175,55,0.5);opacity:.6}

/* Preloader text shimmer */
.preloader-logo{position:relative;overflow:hidden}
.preloader-logo::before{content:'';position:absolute;top:0;left:-100%;width:50%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.2),transparent);animation:preloaderLogoSweep 2.5s ease-in-out infinite}
@keyframes preloaderLogoSweep{0%{left:-100%}100%{left:200%}}

/* Preloader pulse wave */
.preloader-pulse{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100px;height:100px;border:2px solid rgba(212,175,55,0.2);border-radius:50%;animation:preloaderPulseWave 2s ease-out infinite;pointer-events:none}
.preloader-pulse:nth-child(2){animation-delay:0.5s}
.preloader-pulse:nth-child(3){animation-delay:1s}
@keyframes preloaderPulseWave{0%{width:100px;height:100px;opacity:.6}100%{width:500px;height:500px;opacity:0}}

/* Preloader corner decorations */
.preloader-corner{position:absolute;width:40px;height:40px;border-color:rgba(212,175,55,0.2);border-style:solid;border-width:0;animation:cornerFade 3s ease-in-out infinite}
.preloader-corner-tl{top:30px;left:30px;border-top-width:2px;border-left-width:2px}
.preloader-corner-tr{top:30px;right:30px;border-top-width:2px;border-right-width:2px}
.preloader-corner-bl{bottom:30px;left:30px;border-bottom-width:2px;border-left-width:2px}
.preloader-corner-br{bottom:30px;right:30px;border-bottom-width:2px;border-right-width:2px}
@keyframes cornerFade{0%,100%{opacity:.3;transform:scale(1)}50%{opacity:.8;transform:scale(1.15)}}

/* ═══════════════════════════════════════════════════════════
   PAGE TRANSITION
   ═══════════════════════════════════════════════════════════ */
.page-transition{position:fixed;inset:0;z-index:99998;pointer-events:none}
.pt-layer{position:absolute;top:0;width:33.34%;height:100%;background:var(--bg-primary);transform:translateY(100%);transition:transform .6s var(--ease-out)}
.pt-layer-1{left:0}
.pt-layer-2{left:33.33%;transition-delay:.08s}
.pt-layer-3{left:66.66%;transition-delay:.16s}
.page-transition.active .pt-layer{transform:translateY(0)}

/* ═══════════════════════════════════════════════════════════
   NAVBAR
   ═══════════════════════════════════════════════════════════ */
.nav{position:fixed;top:0;left:0;width:100%;z-index:1000;padding:20px 0;transition:all .4s var(--ease-smooth)}
.nav.scrolled{padding:10px 0;background:rgba(10,10,10,0.90);-webkit-backdrop-filter:blur(30px) saturate(200%);backdrop-filter:blur(30px) saturate(200%);border-bottom:1px solid var(--glass-border);box-shadow:0 4px 30px rgba(0,0,0,0.5)}
.nav-inner{max-width:1400px;margin:0 auto;padding:0 40px;display:flex;align-items:center;justify-content:space-between}
.nav-logo{display:flex;align-items:center;gap:10px;position:relative}
.nav-logo-img{height:38px;width:auto;object-fit:contain;filter:drop-shadow(0 0 8px rgba(212,175,55,0.3));transition:transform .3s var(--ease-elastic),filter .3s}
.nav-logo:hover .nav-logo-img{transform:scale(1.1) rotate(-3deg);filter:drop-shadow(0 0 15px rgba(212,175,55,0.5))}
.nav-logo-text{font-family:var(--font-display);font-size:1.6rem;font-weight:900;letter-spacing:6px;background:var(--gradient-main);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.nav-logo-dot{width:8px;height:8px;background:var(--accent);border-radius:50%;animation:logoPulse 2s ease-in-out infinite;box-shadow:0 0 10px rgba(212,175,55,0.6)}
@keyframes logoPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.7)}}
.nav-center{display:flex;gap:35px}
.nav-link{font-size:13px;font-weight:500;letter-spacing:1.5px;text-transform:uppercase;color:var(--text-secondary);position:relative;padding:5px 0;transition:color .3s}
.nav-link::after{content:'';position:absolute;bottom:-4px;left:0;width:0;height:2px;background:var(--gradient-main);transition:width .4s var(--ease-out);border-radius:2px}
.nav-link:hover,.nav-link.active{color:var(--text-primary)}
.nav-link:hover::after,.nav-link.active::after{width:100%}
.nav-right{display:flex;align-items:center;gap:12px}
.nav-icon-btn{width:42px;height:42px;border:1px solid var(--glass-border);border-radius:50%;background:var(--glass-bg);color:var(--text-secondary);display:flex;align-items:center;justify-content:center;font-size:14px;transition:all .3s;position:relative}
.nav-icon-btn:hover{background:var(--glass-bg-strong);border-color:var(--accent);color:var(--accent);box-shadow:0 0 20px rgba(212,175,55,0.15)}
.cart-badge{position:absolute;top:-4px;right:-4px;width:18px;height:18px;background:var(--accent);border-radius:50%;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 0 10px rgba(212,175,55,0.5)}
.nav-hamburger{width:42px;height:42px;display:none;flex-direction:column;align-items:center;justify-content:center;gap:5px;border:1px solid var(--glass-border);border-radius:50%;background:var(--glass-bg)}
.nav-hamburger span{width:18px;height:1.5px;background:var(--text-primary);transition:all .3s;transform-origin:center}
.nav-hamburger.active span:nth-child(1){transform:rotate(45deg) translate(4px,4px)}
.nav-hamburger.active span:nth-child(2){opacity:0}
.nav-hamburger.active span:nth-child(3){transform:rotate(-45deg) translate(4px,-4px)}

/* ─── MOBILE MENU ─── */
.mobile-menu{position:fixed;inset:0;z-index:999;pointer-events:none;opacity:0;transition:opacity .5s var(--ease-out)}
.mobile-menu.active{pointer-events:all;opacity:1}
.mobile-menu-inner{position:absolute;inset:0;background:rgba(10,10,10,0.96);-webkit-backdrop-filter:blur(40px);backdrop-filter:blur(40px);display:flex;align-items:center;justify-content:center}
.mm-links{display:flex;flex-direction:column;gap:10px}
.mm-link{font-family:var(--font-display);font-size:clamp(2rem,8vw,4rem);font-weight:800;color:var(--text-primary);display:block;transform:translateY(60px);opacity:0;transition:all .5s var(--ease-out)}
.mobile-menu.active .mm-link{transform:translateY(0);opacity:1}
.mobile-menu.active .mm-link:nth-child(2){transition-delay:.05s}
.mobile-menu.active .mm-link:nth-child(3){transition-delay:.1s}
.mobile-menu.active .mm-link:nth-child(4){transition-delay:.15s}
.mobile-menu.active .mm-link:nth-child(5){transition-delay:.2s}
.mm-link::before{content:attr(data-index);font-size:12px;color:var(--accent);margin-right:15px;font-weight:400;letter-spacing:2px}
.mm-link:hover{color:var(--accent)}
.mm-footer{position:absolute;bottom:40px;left:50%;transform:translateX(-50%)}
.mm-socials{display:flex;gap:20px}
.mm-socials a{width:45px;height:45px;border:1px solid var(--glass-border);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--text-secondary);transition:all .3s}
.mm-socials a:hover{border-color:var(--accent);color:var(--accent);box-shadow:0 0 20px rgba(212,175,55,0.2)}

/* ─── SEARCH OVERLAY ─── */
.search-overlay{position:fixed;inset:0;background:rgba(10,10,10,0.92);-webkit-backdrop-filter:blur(30px);backdrop-filter:blur(30px);z-index:1001;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:all .4s var(--ease-out)}
.search-overlay.active{opacity:1;pointer-events:all}
.search-box{width:90%;max-width:550px;text-align:center;position:relative}
.search-close-btn{position:absolute;top:-60px;right:0;width:42px;height:42px;border:1px solid var(--glass-border);border-radius:50%;color:var(--text-primary);display:flex;align-items:center;justify-content:center;transition:all .3s}
.search-close-btn:hover{background:var(--accent);border-color:var(--accent)}
.search-box h2{font-family:var(--font-display);font-size:1.4rem;margin-bottom:30px;font-weight:700}
.search-field{position:relative;margin-bottom:20px}
.search-field input{width:100%;padding:18px 25px 18px 25px;font-size:1.1rem;background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--radius-full);color:var(--text-primary);outline:none;transition:border-color .3s,box-shadow .3s}
.search-field input:focus{border-color:var(--accent);box-shadow:0 0 30px rgba(212,175,55,0.1)}
.search-field input::placeholder{color:var(--text-muted)}
.search-field i{position:absolute;right:20px;top:50%;transform:translateY(-50%);color:var(--text-muted)}
.search-popular{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.search-popular span{font-size:13px;color:var(--text-muted);margin-right:5px}
.search-chip{padding:8px 16px;border:1px solid var(--glass-border);border-radius:var(--radius-full);font-size:13px;color:var(--text-secondary);transition:all .3s}
.search-chip:hover{background:var(--accent);border-color:var(--accent);color:#fff}

/* ═══════════════════════════════════════════════════════════
   GLASS UTILITIES
   ═══════════════════════════════════════════════════════════ */
.glass-card{background:var(--glass-bg);-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);border:1px solid var(--glass-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-glass);position:relative;overflow:hidden;transition:border-color .4s,box-shadow .4s,transform .4s var(--ease-out)}
.glass-card::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.15),transparent);z-index:1}
.glass-card:hover{border-color:var(--glass-border-strong);box-shadow:0 12px 40px rgba(0,0,0,0.5)}
.glass-panel{background:rgba(10,10,10,0.92);-webkit-backdrop-filter:blur(40px) saturate(200%);backdrop-filter:blur(40px) saturate(200%);border:1px solid var(--glass-border-strong)}
.glass-pill{background:var(--glass-bg);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--glass-border);border-radius:var(--radius-full);padding:10px 22px;font-size:13px;font-weight:500;letter-spacing:1px;display:inline-flex;align-items:center;gap:10px}
.pill-dot{width:6px;height:6px;background:#D4AF37;border-radius:50%;box-shadow:0 0 8px rgba(212,175,55,0.6);animation:pilldot 2s ease-in-out infinite}
@keyframes pilldot{0%,100%{opacity:1}50%{opacity:.4}}

/* ─── TEXT UTILITIES ─── */
.label{font-size:11px;letter-spacing:4px;text-transform:uppercase;color:var(--accent);font-weight:600;display:block;margin-bottom:16px}
.label.light{color:rgba(255,255,255,0.45)}
.title-lg{font-family:var(--font-display);font-size:clamp(2rem,5vw,3.8rem);font-weight:800;line-height:1.1;margin-bottom:20px}
.title-lg em{font-family:var(--font-serif);font-style:italic;font-weight:400}
.title-xl{font-family:var(--font-display);font-size:clamp(2.2rem,5.5vw,4.5rem);font-weight:800;line-height:1.1;margin-bottom:20px}
.title-xl em{font-family:var(--font-serif);font-style:italic;font-weight:400}
.gradient-text{background:var(--gradient-text);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.text-body{font-size:1.05rem;color:var(--text-secondary);line-height:1.8;margin-bottom:16px}
.text-body.light{color:rgba(255,255,255,0.55)}
.text-body strong{color:var(--text-primary);font-weight:600}
.section-header{margin-bottom:60px}
.section-header.center{text-align:center}
.section-header-row{display:flex;align-items:flex-end;justify-content:space-between;gap:20px}

/* ─── BUTTONS ─── */
.btn{display:inline-flex;align-items:center;gap:10px;border:none;border-radius:var(--radius-full);font-family:var(--font-primary);font-weight:600;cursor:pointer;transition:all .4s var(--ease-out);position:relative;overflow:hidden}
.btn-primary{padding:16px 34px;background:var(--accent);color:#fff;font-size:15px;box-shadow:0 4px 15px rgba(212,175,55,0.3)}
.btn-primary::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.2),transparent);transition:left .6s var(--ease-out)}
.btn-primary:hover{transform:translateY(-3px);box-shadow:var(--shadow-glow-strong)}
.btn-primary:hover::before{left:100%}
.btn-outline{padding:14px 30px;background:transparent;color:var(--text-primary);font-size:14px;border:1px solid var(--glass-border-strong)}
.btn-outline:hover{border-color:var(--accent);color:var(--accent);box-shadow:0 0 30px rgba(212,175,55,0.1);transform:translateY(-2px)}
.btn-sm{padding:10px 22px;font-size:13px}
.btn-lg{padding:18px 40px;font-size:16px}
.btn-block{width:100%;justify-content:center}
.btn-text{position:relative;z-index:1}
.btn-icon{position:relative;z-index:1;display:flex;align-items:center;transition:transform .3s}
.btn:hover .btn-icon{transform:translateX(4px)}
.magnetic{transition:transform .3s var(--ease-out)}

/* ═══════════════════════════════════════════════════════════
   HERO SECTION
   ═══════════════════════════════════════════════════════════ */
.hero{height:100vh;min-height:750px;position:relative;display:flex;align-items:center;overflow:hidden}
.hero::after{content:'';position:absolute;bottom:0;left:0;right:0;height:200px;background:linear-gradient(to bottom,transparent 0%,var(--bg-primary) 100%);z-index:6;pointer-events:none}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg-image{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.1);animation:heroBgZoom 20s ease-in-out infinite alternate}
@keyframes heroBgZoom{0%{transform:scale(1.05) translate(0,0)}25%{transform:scale(1.12) translate(-1%,-0.5%)}50%{transform:scale(1.08) translate(0.5%,-1%)}75%{transform:scale(1.15) translate(-0.5%,0.5%)}100%{transform:scale(1.05) translate(0,0)}}
.hero-bg-overlay{position:absolute;inset:0;background:linear-gradient(135deg,rgba(10,10,10,0.92) 0%,rgba(10,10,10,0.7) 40%,rgba(10,10,10,0.85) 100%)}
.hero-bg-grain{position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E");opacity:.03;pointer-events:none}
.hero-orbs{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none}
.orb{position:absolute;border-radius:50%;filter:blur(80px)}
.orb-1{width:600px;height:600px;background:var(--accent);opacity:.15;top:-200px;right:-100px;animation:orbFloat1 20s ease-in-out infinite}
.orb-2{width:400px;height:400px;background:var(--accent-blue);opacity:.1;bottom:-150px;left:-100px;animation:orbFloat2 25s ease-in-out infinite}
.orb-3{width:250px;height:250px;background:var(--accent-orange);opacity:.08;top:50%;left:40%;animation:orbFloat3 15s ease-in-out infinite}
@keyframes orbFloat1{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(-60px,40px) scale(1.15)}66%{transform:translate(40px,-30px) scale(0.9)}}
@keyframes orbFloat2{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(50px,-40px) scale(1.1)}66%{transform:translate(-30px,30px) scale(0.95)}}
@keyframes orbFloat3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(80px,-50px) scale(1.3)}}
.hero-content{position:relative;z-index:5;display:flex;align-items:center;gap:60px;width:100%}
.hero-content-center{flex-direction:column;align-items:center;text-align:center;gap:0}
.hero-left{flex:1;max-width:650px}

/* ─── Welcome Badge ─── */
.hero-welcome-badge{display:inline-flex;align-items:center;gap:12px;padding:10px 28px;border-radius:var(--radius-full);background:rgba(212,175,55,0.06);border:1px solid rgba(212,175,55,0.15);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);margin-bottom:32px;opacity:0;animation:badgeDrop .8s var(--ease-out) forwards .5s}
.hwb-dot{width:6px;height:6px;border-radius:50%;background:var(--accent);animation:hwbPulse 2s ease-in-out infinite}
.hwb-text{font-size:.8rem;font-weight:600;letter-spacing:3px;text-transform:uppercase;color:var(--accent-light)}
@keyframes badgeDrop{0%{opacity:0;transform:translateY(-20px) scale(.9)}100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes hwbPulse{0%,100%{opacity:.4;transform:scale(1)}50%{opacity:1;transform:scale(1.5)}}

/* ─── Hero Kicker ─── */
.hero-kicker{display:block;font-size:.7rem;font-weight:500;letter-spacing:6px;text-transform:uppercase;color:var(--text-muted);margin-bottom:20px;opacity:0;animation:fadeUp .8s var(--ease-out) forwards .7s}

/* ─── Mega Title ─── */
.hero-title-block{margin-bottom:28px}
.hero-title-mega{font-family:var(--font-display);font-weight:900;line-height:.85;margin:0;position:relative}
.htm-line{display:block;overflow:hidden}
.htm-word{display:inline-block;opacity:0;transform:translateY(110%);will-change:transform,opacity}
.htm-stroke{font-size:clamp(4rem,14vw,12rem);letter-spacing:clamp(4px,1.5vw,20px);-webkit-text-stroke:2px var(--text-secondary);-webkit-text-fill-color:transparent;animation:htmRevealStroke 1s var(--ease-out) forwards .8s}
.htm-gold{font-size:clamp(4rem,14vw,12rem);letter-spacing:clamp(4px,1.5vw,20px);background:linear-gradient(135deg,#F5D76E 0%,#D4AF37 40%,#b8961f 70%,#F5D76E 100%);background-size:300% auto;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:htmRevealGold 1s var(--ease-out) forwards .95s,heroGoldShimmer 5s ease-in-out infinite 2s;position:relative;filter:drop-shadow(0 0 40px rgba(212,175,55,0.2))}
@keyframes htmRevealStroke{0%{opacity:0;transform:translateY(110%)}100%{opacity:1;transform:translateY(0)}}
@keyframes htmRevealGold{0%{opacity:0;transform:translateY(110%)}100%{opacity:1;transform:translateY(0)}}
@keyframes heroGoldShimmer{0%,100%{background-position:0% center;filter:drop-shadow(0 0 40px rgba(212,175,55,0.2))}50%{background-position:100% center;filter:drop-shadow(0 0 60px rgba(212,175,55,0.35))}}

/* ─── Tagline with lines ─── */
.hero-tagline{display:flex;align-items:center;gap:20px;justify-content:center;margin-top:20px;opacity:0;animation:fadeUp .8s var(--ease-out) forwards 1.3s}
.hero-tagline span{font-family:var(--font-serif);font-size:clamp(.9rem,2vw,1.2rem);font-style:italic;color:var(--text-secondary);letter-spacing:3px;white-space:nowrap}
.hero-tagline-line{width:60px;height:1px;background:linear-gradient(90deg,transparent,var(--accent),transparent);animation:taglineExpand 1.5s var(--ease-out) forwards 1.5s}
@keyframes taglineExpand{0%{width:0;opacity:0}100%{width:60px;opacity:1}}

/* ─── Centered desc & buttons ─── */
.hero-desc-center{text-align:center;max-width:620px;margin:0 auto 35px;opacity:0;animation:fadeUp .8s var(--ease-out) forwards 1.6s}
.hero-btns-center{justify-content:center;opacity:0;animation:fadeUp .8s var(--ease-out) forwards 1.8s}

/* ─── Stats Ribbon ─── */
.hero-stats-ribbon{display:flex;align-items:center;gap:24px;margin-top:50px;padding:18px 40px;border-radius:var(--radius-full);background:rgba(255,255,255,0.02);border:1px solid rgba(212,175,55,0.08);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);opacity:0;animation:fadeUp .8s var(--ease-out) forwards 2s}
.hsr-item{display:flex;flex-direction:column;align-items:center;gap:2px}
.hsr-num{font-family:var(--font-display);font-size:1.3rem;font-weight:800;color:var(--accent)}
.hsr-label{font-size:.65rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:1.5px}
.hsr-sep{color:rgba(212,175,55,0.25);font-size:.8rem}
.hero-title{font-family:var(--font-display);font-weight:900;line-height:1;margin-bottom:28px}
.ht-line{display:block;overflow:hidden}
.ht-word{display:inline-block;opacity:0;transform:translateY(100%);animation:htReveal .8s var(--ease-out) forwards}
.ht-line:nth-child(1) .ht-word{font-size:clamp(1.8rem,4vw,3.5rem);letter-spacing:12px;color:var(--text-secondary);animation-delay:.8s}
.ht-line:nth-child(2) .ht-word{font-size:clamp(3.5rem,9vw,8rem);letter-spacing:-2px;animation-delay:1s}
.ht-line:nth-child(3) .ht-word{font-size:clamp(1.5rem,3.5vw,2.8rem);animation-delay:1.2s}
.ht-gradient{background:var(--gradient-main);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;background-size:200% auto;animation:htReveal .8s var(--ease-out) forwards 1s,gradientShift 4s ease-in-out infinite 2s}
@keyframes htReveal{to{opacity:1;transform:translateY(0)}}
@keyframes gradientShift{0%,100%{background-position:0% center}50%{background-position:100% center}}
.ht-outline{-webkit-text-stroke:1.5px var(--text-secondary);-webkit-text-fill-color:transparent;letter-spacing:8px}
.hero-desc{font-size:1.05rem;color:var(--text-secondary);line-height:1.7;margin-bottom:35px;max-width:500px;opacity:0;transform:translateY(30px);animation:fadeUp .8s var(--ease-out) forwards 1.4s}
.hero-btns{display:flex;gap:16px;margin-bottom:50px;opacity:0;transform:translateY(30px);animation:fadeUp .8s var(--ease-out) forwards 1.6s}
.hero-stats{display:flex;gap:0;opacity:0;transform:translateY(30px);animation:fadeUp .8s var(--ease-out) forwards 1.8s}
.hero-stat{display:flex;flex-direction:column;padding:0 25px}
.hero-stat:first-child{padding-left:0}
.hero-stat-num{font-family:var(--font-display);font-size:1.6rem;font-weight:800;color:var(--accent)}
.hero-stat-label{font-size:11px;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px;margin-top:4px}
.hero-stat-divider{width:1px;background:var(--glass-border);align-self:stretch;margin:4px 0}
@keyframes fadeUp{to{opacity:1;transform:translateY(0)}}
.hero-shoe-wrap{position:relative;width:420px;height:420px}
.hero-shoe-glow{position:absolute;inset:-30px;background:var(--gradient-glow);border-radius:50%;filter:blur(40px);animation:shoeGlow 4s ease-in-out infinite}
@keyframes shoeGlow{0%,100%{opacity:.4;transform:scale(1)}50%{opacity:.7;transform:scale(1.1)}}
.hero-shoe-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:var(--radius-xl);box-shadow:0 20px 60px rgba(0,0,0,0.5);animation:shoeFloat 6s ease-in-out infinite}
@keyframes shoeFloat{0%,100%{transform:translateY(0) rotate(0deg)}25%{transform:translateY(-12px) rotate(1deg)}75%{transform:translateY(8px) rotate(-1deg)}}
.hero-scroll{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;opacity:0;animation:fadeUp 1s var(--ease-out) forwards 2.5s}
.hero-scroll span{font-size:10px;letter-spacing:3px;text-transform:uppercase;color:var(--text-muted)}
.hero-scroll-line{width:1px;height:40px;background:linear-gradient(to bottom,var(--accent),transparent);animation:scrollLine 2s ease-in-out infinite}
@keyframes scrollLine{0%{opacity:1;transform:scaleY(1)}50%{opacity:.3;transform:scaleY(.5)}100%{opacity:1;transform:scaleY(1)}}

/* ═══════════════════════════════════════════════════════════
   MARQUEE
   ═══════════════════════════════════════════════════════════ */
.marquee{padding:25px 0;border-top:1px solid var(--glass-border);border-bottom:1px solid var(--glass-border);overflow:hidden;position:relative;background:rgba(255,255,255,0.01)}
.marquee-track{display:flex;gap:40px;animation:marqueeScroll 25s linear infinite;width:max-content}
.marquee-track span{font-family:var(--font-display);font-size:clamp(1.2rem,2.5vw,1.8rem);font-weight:800;letter-spacing:5px;white-space:nowrap;color:rgba(255,255,255,0.07);text-transform:uppercase;transition:color .3s}
.marquee-track span:hover{color:var(--accent)}
.marquee-sep{color:var(--accent);opacity:.3;font-size:1rem}
@keyframes marqueeScroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* ═══════════════════════════════════════════════════════════
   HERO → INTRO TRANSITION
   ═══════════════════════════════════════════════════════════ */
.hero-intro-transition{position:relative;height:80px;overflow:visible;z-index:7;margin-top:-60px}
.hit-fade{display:none}

/* Floating sparkle particles */
.hit-particles{position:absolute;inset:0;z-index:3;pointer-events:none}
.hit-particles span{position:absolute;width:3px;height:3px;border-radius:50%;background:var(--accent);opacity:0;animation:hitSparkle 3s ease-in-out infinite}
.hit-particles span:nth-child(1){left:10%;top:30%;animation-delay:0s}
.hit-particles span:nth-child(2){left:25%;top:60%;animation-delay:.3s}
.hit-particles span:nth-child(3){left:40%;top:20%;animation-delay:.6s}
.hit-particles span:nth-child(4){left:55%;top:70%;animation-delay:.9s}
.hit-particles span:nth-child(5){left:70%;top:40%;animation-delay:1.2s}
.hit-particles span:nth-child(6){left:85%;top:55%;animation-delay:1.5s}
.hit-particles span:nth-child(7){left:15%;top:75%;animation-delay:1.8s}
.hit-particles span:nth-child(8){left:60%;top:35%;animation-delay:2.1s}
.hit-particles span:nth-child(9){left:90%;top:25%;animation-delay:2.4s}
.hit-particles span:nth-child(10){left:45%;top:80%;animation-delay:2.7s}
@keyframes hitSparkle{0%,100%{opacity:0;transform:scale(0) translateY(0)}30%{opacity:.8;transform:scale(1.5) translateY(-8px)}60%{opacity:.4;transform:scale(1) translateY(-16px)}100%{opacity:0;transform:scale(0) translateY(-25px)}}

/* Center line reveal with diamond */
.hit-line-reveal{position:absolute;bottom:50%;left:0;right:0;display:flex;align-items:center;justify-content:center;z-index:4;gap:0}
.hit-line-left,.hit-line-right{height:1px;flex:1;transform-origin:center;opacity:0}
.hit-line-left{background:linear-gradient(90deg,transparent 0%,rgba(212,175,55,0.4) 100%);transform:scaleX(0);opacity:0;transition:transform 1.5s var(--ease-out),opacity 1s}
.hit-line-right{background:linear-gradient(90deg,rgba(212,175,55,0.4) 0%,transparent 100%);transform:scaleX(0);opacity:0;transition:transform 1.5s var(--ease-out),opacity 1s}
.hit-diamond{width:32px;height:32px;display:flex;align-items:center;justify-content:center;color:var(--accent);font-size:.6rem;opacity:0;transform:scale(0) rotate(-90deg);transition:all .8s var(--ease-bounce) .6s;position:relative}
.hit-diamond::before{content:'';position:absolute;inset:-4px;border:1px solid rgba(212,175,55,0.15);border-radius:50%;opacity:0}

/* Animate on scroll */
.hit-line-reveal.animate .hit-line-left,.hit-line-reveal.animate .hit-line-right{transform:scaleX(1);opacity:1}
.hit-line-reveal.animate .hit-diamond{opacity:1;transform:scale(1) rotate(0deg)}
.hit-line-reveal.animate .hit-diamond::before{animation:hitDiamondRing 3s ease-in-out infinite .8s}
@keyframes hitLineLeft{0%{opacity:0;transform:scaleX(0)}100%{opacity:1;transform:scaleX(1)}}
@keyframes hitLineRight{0%{opacity:0;transform:scaleX(0)}100%{opacity:1;transform:scaleX(1)}}
@keyframes hitDiamondPop{0%{opacity:0;transform:scale(0) rotate(-90deg)}100%{opacity:1;transform:scale(1) rotate(0deg)}}
@keyframes hitDiamondRing{0%,100%{transform:scale(1);opacity:.4}50%{transform:scale(1.6);opacity:0}}

/* ═══════════════════════════════════════════════════════════
   INTRO CARD REVEAL EFFECT
   ═══════════════════════════════════════════════════════════ */
.intro-card-reveal{opacity:0;transform:translateY(60px) scale(.95);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out),box-shadow .5s}
.intro-card-reveal.visible{opacity:1;transform:translateY(0) scale(1)}
.intro-card-reveal:nth-child(1){transition-delay:.1s}
.intro-card-reveal:nth-child(2){transition-delay:.25s}
.intro-card-reveal:nth-child(3){transition-delay:.4s}

/* Card inner glow on appear */
.intro-card-reveal.visible::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 0%,rgba(212,175,55,0.06) 0%,transparent 60%);border-radius:inherit;z-index:0;opacity:0;animation:cardInnerGlow 2s ease-out forwards .5s}
@keyframes cardInnerGlow{0%{opacity:0}50%{opacity:1}100%{opacity:0}}

/* ═══════════════════════════════════════════════════════════
   INTRO SECTION
   ═══════════════════════════════════════════════════════════ */
.intro-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;margin-bottom:80px}
.intro-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.intro-card{border-radius:var(--radius-lg);overflow:hidden;transition:transform .5s var(--ease-out),box-shadow .5s}
.intro-card:hover{transform:translateY(-8px);box-shadow:0 20px 50px rgba(0,0,0,0.4)}
.intro-card-img-wrap{height:200px;overflow:hidden}
.intro-card-img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease-out)}
.intro-card:hover .intro-card-img{transform:scale(1.1)}
.intro-card-body{padding:28px;position:relative}
.intro-card-num{font-family:var(--font-display);font-size:2.5rem;font-weight:900;color:rgba(255,255,255,0.04);position:absolute;top:10px;right:20px}
.intro-card-body h3{font-family:var(--font-display);font-size:1.2rem;font-weight:700;margin-bottom:10px}
.intro-card-body p{font-size:.9rem;color:var(--text-secondary);line-height:1.6}

/* ═══════════════════════════════════════════════════════════
   FEATURED PRODUCTS
   ═══════════════════════════════════════════════════════════ */
.featured-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.featured-card{background:var(--bg-card);border:1px solid var(--glass-border);border-radius:var(--radius-lg);overflow:hidden;transition:all .4s var(--ease-out);position:relative}
.featured-card::before{content:'';position:absolute;inset:0;background:var(--gradient-glow);opacity:0;transition:opacity .4s;pointer-events:none;z-index:1}
.featured-card:hover{transform:translateY(-8px);border-color:rgba(212,175,55,0.2);box-shadow:0 20px 50px rgba(0,0,0,0.5)}
.featured-card:hover::before{opacity:1}
.featured-card-img{height:240px;overflow:hidden;position:relative}
.featured-card-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease-out)}
.featured-card:hover .featured-card-img img{transform:scale(1.08)}
.featured-card-badge{position:absolute;top:14px;left:14px;padding:5px 14px;border-radius:var(--radius-full);font-size:11px;font-weight:600;letter-spacing:1px;text-transform:uppercase;z-index:2}
.featured-card-badge.new{background:var(--accent-blue);color:#fff}
.featured-card-badge.limited{background:var(--accent);color:#fff}
.featured-card-badge.sale{background:var(--accent-gold);color:#000}
.featured-card-body{padding:20px}
.featured-card-brand{font-size:11px;color:var(--text-muted);text-transform:uppercase;letter-spacing:2px;margin-bottom:6px;display:block}
.featured-card-name{font-family:var(--font-display);font-size:1rem;font-weight:700;margin-bottom:12px;line-height:1.3}
.featured-card-price{font-size:1.1rem;font-weight:700;color:var(--accent)}
.featured-card-old-price{font-size:.85rem;color:var(--text-muted);text-decoration:line-through;margin-left:8px}

/* ═══════════════════════════════════════════════════════════
   PARALLAX BANNER
   ═══════════════════════════════════════════════════════════ */
.parallax-banner{position:relative;height:70vh;min-height:500px;display:flex;align-items:center;overflow:hidden}
.parallax-banner-bg{position:absolute;inset:-50px;z-index:0}
.parallax-img{width:100%;height:100%;object-fit:cover}
.parallax-banner-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,10,0.7) 0%,rgba(10,10,10,0.5) 50%,rgba(10,10,10,0.8) 100%);z-index:1}
.parallax-banner-content{position:relative;z-index:2;text-align:center;max-width:800px;margin:0 auto}
.parallax-author{font-family:var(--font-serif);font-style:italic;font-size:1.1rem;color:var(--text-secondary);display:block;margin:20px 0 30px}

/* ═══════════════════════════════════════════════════════════
   GALLERY MASONRY
   ═══════════════════════════════════════════════════════════ */
.gallery-masonry{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:320px;gap:16px;padding:0 40px;max-width:1400px;margin:0 auto}
.gallery-item{position:relative;border-radius:var(--radius-md);overflow:hidden;cursor:pointer;aspect-ratio:4/3}
.gallery-item img{width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .8s var(--ease-out);image-rendering:auto}
.gallery-item:hover img{transform:scale(1.1)}
.gallery-item-overlay{position:absolute;inset:0;background:linear-gradient(0deg,rgba(10,10,10,0.8) 0%,transparent 50%);display:flex;flex-direction:column;justify-content:flex-end;padding:24px;opacity:0;transition:opacity .4s}
.gallery-item:hover .gallery-item-overlay{opacity:1}
.gallery-item-tag{font-size:10px;letter-spacing:3px;text-transform:uppercase;color:var(--accent);margin-bottom:6px}
.gallery-item-overlay h3{font-family:var(--font-display);font-size:1.3rem;font-weight:700}
.gi-tall{grid-row:span 2}
.gi-wide{grid-column:span 2}

/* ═══════════════════════════════════════════════════════════
   TIMELINE (HORIZONTAL)
   ═══════════════════════════════════════════════════════════ */
.timeline-scroll{overflow-x:auto;padding:0 40px 30px}
.timeline-scroll::-webkit-scrollbar{height:4px}
.timeline-scroll::-webkit-scrollbar-thumb{background:var(--accent);border-radius:4px}
.timeline-track{display:flex;gap:24px;width:max-content;padding-bottom:10px}
.timeline-item{width:320px;flex-shrink:0;padding:0;border-radius:var(--radius-lg);overflow:hidden;transition:transform .4s var(--ease-out)}
.timeline-item:hover{transform:translateY(-6px)}
.ti-img-wrap{height:180px;overflow:hidden}
.ti-img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease-out)}
.timeline-item:hover .ti-img{transform:scale(1.08)}
.ti-year{display:inline-block;padding:8px 16px;background:var(--accent);color:#fff;font-family:var(--font-display);font-size:13px;font-weight:700;letter-spacing:2px;margin:16px 20px 10px;border-radius:var(--radius-full)}
.ti-title{font-family:var(--font-display);font-size:1.1rem;font-weight:700;padding:0 20px;margin-bottom:8px}
.ti-desc{font-size:.85rem;color:var(--text-secondary);line-height:1.6;padding:0 20px 24px}

/* ═══════════════════════════════════════════════════════════
   DUAL SECTION
   ═══════════════════════════════════════════════════════════ */
.dual-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.dual-col-img{position:relative}
.dual-img-wrap{border-radius:var(--radius-xl);overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,0.4)}
.dual-img{width:100%;display:block;transition:transform .8s var(--ease-out)}
.dual-img-wrap:hover .dual-img{transform:scale(1.05)}
.dual-img-2{position:absolute;bottom:-30px;right:-30px;width:55%;border-radius:var(--radius-lg);border:3px solid var(--bg-primary);box-shadow:0 15px 40px rgba(0,0,0,0.5)}
.dual-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:30px 0}
.dual-stat{text-align:center;padding:20px 0}
.dual-stat-num{font-family:var(--font-display);font-size:1.6rem;font-weight:800;color:var(--accent);display:block}
.dual-stat-label{font-size:11px;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px;margin-top:6px;display:block}

/* ═══════════════════════════════════════════════════════════
   TESTIMONIALS
   ═══════════════════════════════════════════════════════════ */
.testimonials-slider{position:relative;max-width:700px;margin:0 auto}
.testimonial-card{padding:40px;text-align:center;display:none}
.testimonial-card.active{display:block;animation:fadeIn .5s var(--ease-out)}
@keyframes fadeIn{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}
.testimonial-stars{color:var(--accent-gold);font-size:1rem;margin-bottom:20px;letter-spacing:4px}
.testimonial-text{font-size:1.15rem;line-height:1.8;color:var(--text-secondary);margin-bottom:30px;font-style:italic}
.testimonial-author{display:flex;align-items:center;gap:14px;justify-content:center}
.testimonial-avatar{width:50px;height:50px;border-radius:50%;object-fit:cover;border:2px solid var(--accent)}
.testimonial-author strong{display:block;font-size:.95rem}
.testimonial-author span{font-size:.8rem;color:var(--text-muted)}
.testimonial-dots{display:flex;gap:10px;justify-content:center;margin-top:30px}
.tdot{width:10px;height:10px;border-radius:50%;border:1.5px solid var(--glass-border-strong);background:transparent;transition:all .3s}
.tdot.active{background:var(--accent);border-color:var(--accent);box-shadow:0 0 10px rgba(212,175,55,0.5)}

/* ═══════════════════════════════════════════════════════════
   BRANDS STRIP
   ═══════════════════════════════════════════════════════════ */
.brands-strip{padding:30px 0;overflow:hidden;border-top:1px solid var(--glass-border);border-bottom:1px solid var(--glass-border);background:rgba(255,255,255,0.01)}
.brands-track{display:flex;gap:80px;animation:brandsScroll 20s linear infinite;width:max-content}
.brand-logo{font-family:var(--font-display);font-size:1.3rem;font-weight:700;letter-spacing:6px;color:rgba(255,255,255,0.1);white-space:nowrap;display:flex;align-items:center;gap:10px}
@keyframes brandsScroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* ═══════════════════════════════════════════════════════════
   NEWSLETTER
   ═══════════════════════════════════════════════════════════ */
.newsletter-wrap{padding:80px;position:relative;overflow:hidden;border-radius:var(--radius-xl)}
.newsletter-bg-img{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.15}
.newsletter-overlay{position:absolute;inset:0;background:linear-gradient(135deg,rgba(10,10,10,0.95),rgba(10,10,10,0.8))}
.newsletter-inner{position:relative;z-index:2;text-align:center;max-width:550px;margin:0 auto}
.newsletter-form{display:flex;gap:12px;margin-top:25px}
.newsletter-form input{flex:1;padding:16px 24px;background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--radius-full);color:var(--text-primary);font-size:.95rem;outline:none;transition:border-color .3s,box-shadow .3s}
.newsletter-form input:focus{border-color:var(--accent);box-shadow:0 0 25px rgba(212,175,55,0.1)}
.newsletter-form input::placeholder{color:var(--text-muted)}
.newsletter-socials{display:flex;gap:14px;justify-content:center;margin-top:25px}
.ns-link{width:42px;height:42px;border:1px solid var(--glass-border);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--text-secondary);transition:all .3s}
.ns-link:hover{border-color:var(--accent);color:var(--accent);box-shadow:0 0 15px rgba(212,175,55,0.2);transform:translateY(-3px)}

/* ═══════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════ */
.footer{padding:80px 0 30px;position:relative;background:var(--bg-secondary);border-top:1px solid var(--glass-border)}
.footer-glow{position:absolute;top:-100px;left:50%;transform:translateX(-50%);width:600px;height:200px;background:radial-gradient(ellipse,rgba(212,175,55,0.08),transparent 70%);pointer-events:none}
.footer-top{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;margin-bottom:60px}
.footer-brand{max-width:300px}
.footer-logo{font-family:var(--font-display);font-size:1.8rem;font-weight:900;letter-spacing:6px;background:var(--gradient-main);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;display:block;margin-bottom:16px}
.footer-brand p{font-size:.9rem;color:var(--text-secondary);line-height:1.7;margin-bottom:20px}
.footer-social{display:flex;gap:12px}
.footer-social a{width:38px;height:38px;border:1px solid var(--glass-border);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--text-secondary);transition:all .3s;font-size:14px}
.footer-social a:hover{border-color:var(--accent);color:var(--accent);box-shadow:0 0 15px rgba(212,175,55,0.2)}
.footer-col h4{font-family:var(--font-display);font-size:.85rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;margin-bottom:20px;color:var(--text-primary)}
.footer-col a{display:block;font-size:.9rem;color:var(--text-secondary);padding:6px 0;transition:color .3s,transform .3s}
.footer-col a:hover{color:var(--accent);transform:translateX(5px)}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:30px;border-top:1px solid var(--glass-border);font-size:.8rem;color:var(--text-muted)}
.footer-pay{display:flex;gap:12px;font-size:1.5rem;color:var(--text-muted)}

/* ═══════════════════════════════════════════════════════════
   TOAST
   ═══════════════════════════════════════════════════════════ */
.toast{position:fixed;bottom:30px;left:50%;transform:translateX(-50%) translateY(100px);z-index:99999;transition:transform .5s var(--ease-out);pointer-events:none}
.toast.show{transform:translateX(-50%) translateY(0)}
.toast-inner{display:flex;align-items:center;gap:10px;padding:16px 28px;background:rgba(10,10,10,0.95);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid var(--glass-border-strong);border-radius:var(--radius-full);font-size:.9rem;color:var(--text-primary);box-shadow:0 10px 40px rgba(0,0,0,0.5)}
.toast-inner i{color:var(--accent)}

/* ═══════════════════════════════════════════════════════════
   JORDAN PAGE — HERO
   ═══════════════════════════════════════════════════════════ */
.jordan-hero{height:100vh;min-height:700px;position:relative;display:flex;align-items:center;overflow:hidden}
.jordan-hero-bg{position:absolute;inset:0}
.jordan-hero-bg-img{width:100%;height:100%;object-fit:cover;animation:heroBgZoom 20s ease-in-out infinite alternate}
.jordan-hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,10,0.6) 0%,rgba(10,10,10,0.4) 40%,rgba(10,10,10,0.85) 100%)}
.jordan-hero-content{position:relative;z-index:2;text-align:center;max-width:900px;margin:0 auto}
.jordan-hero-title{font-family:var(--font-display);font-size:clamp(3rem,10vw,8rem);font-weight:900;line-height:1;margin-bottom:20px}
.jordan-hero-title span{display:block}
.jordan-hero-title span:first-child{letter-spacing:10px;opacity:0;transform:translateY(40px);animation:fadeUp .8s var(--ease-out) forwards .5s}
.jordan-hero-title .gradient-text{letter-spacing:-2px;opacity:0;transform:translateY(40px);animation:fadeUp .8s var(--ease-out) forwards .7s}
.jordan-hero-sub{font-size:1.1rem;color:var(--text-secondary);line-height:1.7;max-width:600px;margin:0 auto 40px;opacity:0;transform:translateY(30px);animation:fadeUp .8s var(--ease-out) forwards .9s}
.jordan-hero-stats{display:flex;justify-content:center;gap:40px;flex-wrap:wrap}
.jh-stat{text-align:center}
.jh-stat-num{font-family:var(--font-display);font-size:2.5rem;font-weight:900;color:var(--accent);display:block}
.jh-stat-label{font-size:11px;color:var(--text-muted);text-transform:uppercase;letter-spacing:2px;margin-top:6px;display:block}
.jordan-hero-scroll{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;opacity:0;animation:fadeUp 1s var(--ease-out) forwards 2s}
.jordan-hero-scroll span{font-size:10px;letter-spacing:3px;text-transform:uppercase;color:var(--text-muted)}

/* ─── BIO SECTION ─── */
.bio-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.bio-img-wrap{border-radius:var(--radius-xl);overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,0.4);position:relative}
.bio-img{width:100%;display:block}
.bio-img-badge{position:absolute;bottom:20px;left:20px;padding:14px 20px;display:flex;align-items:center;gap:10px;border-radius:var(--radius-md)}
.bio-badge-num{font-family:var(--font-display);font-size:1.8rem;font-weight:900;color:var(--accent)}
.bio-badge-text{font-size:.8rem;color:var(--text-secondary);text-transform:uppercase;letter-spacing:2px}
.bio-quote{padding:20px 24px;margin-top:25px;display:flex;gap:14px;align-items:flex-start}
.bio-quote i{color:var(--accent);font-size:1.2rem;margin-top:3px;flex-shrink:0}
.bio-quote p{font-family:var(--font-serif);font-style:italic;font-size:1rem;color:var(--text-secondary);line-height:1.7}

/* ─── JORDAN TIMELINE (VERTICAL) ─── */
.jordan-timeline{position:relative;max-width:900px;margin:0 auto}
.jt-line{position:absolute;left:50%;top:0;bottom:0;width:2px;background:linear-gradient(to bottom,var(--accent),var(--glass-border),var(--accent));transform:translateX(-50%)}
.jt-item{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-bottom:60px;position:relative;align-items:center}
.jt-item.jt-item-right{direction:rtl}
.jt-item.jt-item-right > *{direction:ltr}
.jt-dot{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:16px;height:16px;background:var(--accent);border-radius:50%;z-index:2;box-shadow:0 0 20px rgba(212,175,55,0.4)}
.jt-dot::before{content:'';position:absolute;inset:-6px;border:2px solid rgba(212,175,55,0.3);border-radius:50%;animation:dotPulse 2s ease-in-out infinite}
@keyframes dotPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.5);opacity:0}}
.jt-content{padding:28px;border-radius:var(--radius-lg)}
.jt-year{display:inline-block;padding:5px 14px;background:var(--accent);color:#fff;font-family:var(--font-display);font-size:12px;font-weight:700;letter-spacing:2px;border-radius:var(--radius-full);margin-bottom:12px}
.jt-content h3{font-family:var(--font-display);font-size:1.2rem;font-weight:700;margin-bottom:10px}
.jt-content p{font-size:.9rem;color:var(--text-secondary);line-height:1.7}
.jt-img-wrap{border-radius:var(--radius-lg);overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,0.3)}
.jt-img{width:100%;height:220px;object-fit:cover;transition:transform .6s var(--ease-out)}
.jt-item:hover .jt-img{transform:scale(1.05)}

/* ─── SHOE EVOLUTION ─── */
.shoe-evolution-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.shoe-evo-card{overflow:hidden;transition:transform .5s var(--ease-out)}
.shoe-evo-card:hover{transform:translateY(-8px)}
.shoe-evo-img-wrap{height:220px;overflow:hidden}
.shoe-evo-img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease-out)}
.shoe-evo-card:hover .shoe-evo-img{transform:scale(1.08)}
.shoe-evo-info{padding:24px}
.shoe-evo-year{display:inline-block;padding:4px 12px;background:rgba(212,175,55,0.15);color:var(--accent);font-size:12px;font-weight:700;letter-spacing:2px;border-radius:var(--radius-full);margin-bottom:10px}
.shoe-evo-info h3{font-family:var(--font-display);font-size:1.05rem;font-weight:700;margin-bottom:8px}
.shoe-evo-info p{font-size:.85rem;color:var(--text-secondary);line-height:1.6}

/* ─── IMPACT SECTION ─── */
.jordan-impact .parallax-banner{height:auto;min-height:0;padding:120px 0}
.impact-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:50px}
.impact-stat{padding:30px 20px;text-align:center}
.impact-stat i{font-size:1.5rem;color:var(--accent);margin-bottom:14px}
.impact-num{font-family:var(--font-display);font-size:2rem;font-weight:800;display:block;margin-bottom:6px}
.impact-label{font-size:.8rem;color:var(--text-secondary);text-transform:uppercase;letter-spacing:1px}

/* ─── JORDAN CTA ─── */
.jordan-cta-inner{padding:80px;position:relative;overflow:hidden;text-align:center}
.jordan-cta-bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.12}
.jordan-cta-overlay{position:absolute;inset:0;background:linear-gradient(135deg,rgba(10,10,10,0.95),rgba(10,10,10,0.85))}
.jordan-cta-content{position:relative;z-index:2}
.jordan-cta-content p{max-width:400px;margin:0 auto 30px}

/* ═══════════════════════════════════════════════════════════
   SHOP PAGE
   ═══════════════════════════════════════════════════════════ */
.shop-hero{height:50vh;min-height:350px;position:relative;display:flex;align-items:center;overflow:hidden}
.shop-hero-bg{position:absolute;inset:0}
.shop-hero-bg-img{width:100%;height:100%;object-fit:cover;aspect-ratio:16/9}
.shop-hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,10,0.7) 0%,rgba(10,10,10,0.5) 40%,rgba(10,10,10,0.9) 100%)}
.shop-hero-content{position:relative;z-index:2}
.shop-hero-title{font-family:var(--font-display);font-size:clamp(2.5rem,6vw,5rem);font-weight:900;margin-bottom:10px;opacity:0;transform:translateY(40px);animation:fadeUp .8s var(--ease-out) forwards .3s}
.shop-hero-sub{font-size:1.05rem;color:var(--text-secondary);opacity:0;transform:translateY(30px);animation:fadeUp .8s var(--ease-out) forwards .5s}
.shop-hero-stats{display:flex;gap:40px;margin-top:30px;opacity:0;animation:fadeUp .8s var(--ease-out) forwards .7s}
.shop-hero-stat{text-align:center}
.shop-hero-stat-num{display:block;font-family:var(--font-display);font-size:1.8rem;font-weight:800;background:var(--gradient-text);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.shop-hero-stat-label{font-size:11px;color:var(--text-muted);text-transform:uppercase;letter-spacing:2px}
.shop-hero-scroll{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;z-index:2;opacity:0;animation:fadeUp .8s var(--ease-out) forwards .9s}
.shop-hero-scroll span{font-size:10px;color:var(--text-muted);text-transform:uppercase;letter-spacing:3px}
.shop-hero-scroll-line{width:1px;height:30px;background:var(--accent);animation:scrollPulse 2s ease-in-out infinite}
@keyframes scrollPulse{0%,100%{height:30px;opacity:1}50%{height:15px;opacity:0.4}}

/* ─── SHOP TOOLBAR ─── */
.shop-toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px;flex-wrap:wrap;gap:16px}
.shop-filters{display:flex;gap:8px;flex-wrap:wrap}
.filter-btn{padding:10px 22px;border:1px solid var(--glass-border);border-radius:var(--radius-full);font-size:13px;font-weight:500;color:var(--text-secondary);transition:all .3s var(--ease-bounce);position:relative;overflow:hidden}
.filter-btn::before{content:'';position:absolute;inset:0;background:var(--gradient-main);opacity:0;transition:opacity .3s;border-radius:inherit}
.filter-btn:hover{border-color:var(--accent);color:var(--text-primary);transform:translateY(-2px)}
.filter-btn.active{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 4px 20px rgba(212,175,55,0.4);transform:translateY(-2px)}
.filter-btn.active::before{opacity:1}
.filter-btn .filter-btn-text{position:relative;z-index:1}
.shop-sort select{padding:10px 18px;background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--radius-full);color:var(--text-primary);font-size:13px;outline:none;cursor:pointer;transition:all .3s}
.shop-sort select:hover{border-color:var(--accent)}
.shop-sort select:focus{border-color:var(--accent);box-shadow:0 0 20px rgba(212,175,55,0.15)}
.shop-sort select option{background:var(--bg-primary);color:var(--text-primary)}
.shop-result-count{font-size:.85rem;color:var(--text-muted);margin-bottom:20px;transition:opacity .3s}

/* ─── PRODUCT GRID ─── */
.products-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.product-card{background:var(--bg-card);border:1px solid var(--glass-border);border-radius:var(--radius-lg);overflow:hidden;transition:all .4s var(--ease-out);position:relative;cursor:pointer;opacity:0;transform:translateY(40px) scale(0.95);animation:none}
.product-card.card-visible{animation:cardReveal .6s var(--ease-out) forwards;animation-delay:inherit}
@keyframes cardReveal{0%{opacity:0;transform:translateY(40px) scale(0.95)}100%{opacity:1;transform:translateY(0) scale(1)}}
.product-card::before{content:'';position:absolute;inset:-1px;border-radius:var(--radius-lg);background:linear-gradient(135deg,transparent 40%,rgba(212,175,55,0.3) 50%,transparent 60%);background-size:300% 300%;opacity:0;transition:opacity .4s;z-index:1;pointer-events:none}
.product-card:hover::before{opacity:1;animation:shimmer 2s linear infinite}
@keyframes shimmer{0%{background-position:100% 100%}100%{background-position:0% 0%}}
.product-card::after{content:'';position:absolute;inset:0;background:var(--gradient-glow);opacity:0;transition:opacity .4s;pointer-events:none;z-index:0}
.product-card:hover{transform:translateY(-10px);border-color:rgba(212,175,55,0.2);box-shadow:0 25px 60px rgba(0,0,0,0.5),0 0 40px rgba(212,175,55,0.08)}
.product-card:hover::after{opacity:1}
.product-badge{position:absolute;top:14px;left:14px;padding:5px 14px;border-radius:var(--radius-full);font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;z-index:3}
.product-badge.new{background:var(--accent-blue);color:#fff;box-shadow:0 4px 15px rgba(30,136,229,0.4)}
.product-badge.limited{background:var(--accent);color:#fff;box-shadow:0 4px 15px rgba(212,175,55,0.4);animation:badgePulse 2s ease-in-out infinite}
.product-badge.sale{background:var(--accent-gold);color:#000;box-shadow:0 4px 15px rgba(255,215,64,0.4)}
@keyframes badgePulse{0%,100%{box-shadow:0 4px 15px rgba(212,175,55,0.4)}50%{box-shadow:0 4px 25px rgba(212,175,55,0.7)}}
.product-wishlist{position:absolute;top:14px;right:14px;width:36px;height:36px;border-radius:50%;background:rgba(0,0,0,0.5);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--glass-border);color:var(--text-secondary);display:flex;align-items:center;justify-content:center;z-index:3;transition:all .3s var(--ease-bounce);font-size:14px;opacity:0;transform:scale(0.5)}
.product-card:hover .product-wishlist{opacity:1;transform:scale(1)}
.product-wishlist.active,.product-wishlist:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.product-image{height:300px;overflow:hidden;position:relative}
.product-image-bg{position:absolute;inset:0;transition:transform .6s var(--ease-out)}
.product-card:hover .product-image-bg{transform:scale(1.05)}
.product-shoe-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center;transition:transform .6s var(--ease-out);z-index:1}
.product-card:hover .product-shoe-img{transform:scale(1.08)}
.product-shoe-visual{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:5rem;transition:transform .6s var(--ease-out)}
.product-card:hover .product-shoe-visual{transform:scale(1.1) rotate(5deg)}
.product-info{padding:20px;position:relative;z-index:2}
.product-brand{font-size:10px;color:var(--text-muted);text-transform:uppercase;letter-spacing:2px;margin-bottom:5px;display:block}
.product-name{font-family:var(--font-display);font-size:.95rem;font-weight:600;margin-bottom:8px;line-height:1.3;transition:color .3s}
.product-card:hover .product-name{color:var(--accent-light)}
.product-rating-mini{font-size:11px;color:var(--accent-gold);margin-bottom:8px;display:flex;align-items:center;gap:4px}
.product-rating-mini span{color:var(--text-muted);font-size:10px}
.product-colors{display:flex;gap:5px;margin-bottom:12px}
.color-dot{width:14px;height:14px;border-radius:50%;border:2px solid var(--bg-primary);box-shadow:0 0 0 1px var(--glass-border);transition:transform .3s var(--ease-bounce)}
.color-dot:hover{transform:scale(1.3)}
.product-price-row{display:flex;justify-content:space-between;align-items:center}
.product-price{font-size:1.1rem;font-weight:700;color:var(--accent)}
.product-old-price{font-size:.8rem;color:var(--text-muted);text-decoration:line-through;margin-left:8px}
.product-quick-add{width:38px;height:38px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;transition:all .3s var(--ease-bounce);box-shadow:0 4px 12px rgba(212,175,55,0.3);opacity:0;transform:translateY(10px)}
.product-card:hover .product-quick-add{opacity:1;transform:translateY(0)}
.product-quick-add:hover{transform:scale(1.2) translateY(0) !important;box-shadow:0 6px 20px rgba(212,175,55,0.5);background:var(--accent-light)}
.product-image-bg{background:transparent !important;display:none}

/* ─── PRODUCT MODAL ─── */
.product-modal{position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .4s}
.product-modal.active{opacity:1;pointer-events:all}
.product-modal-overlay{position:absolute;inset:0;background:rgba(0,0,0,0.8);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.product-modal-inner{position:relative;width:90%;max-width:950px;max-height:90vh;overflow-y:auto;border-radius:var(--radius-xl);padding:40px;z-index:1;transform:translateY(30px) scale(0.95);transition:transform .5s var(--ease-out)}
.product-modal.active .product-modal-inner{transform:translateY(0) scale(1)}
.product-modal-close{position:absolute;top:20px;right:20px;width:40px;height:40px;border:1px solid var(--glass-border);border-radius:50%;color:var(--text-primary);display:flex;align-items:center;justify-content:center;z-index:2;transition:all .3s var(--ease-bounce)}
.product-modal-close:hover{background:var(--accent);border-color:var(--accent);transform:rotate(90deg)}
.pm-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.pm-main-img{border-radius:var(--radius-lg);overflow:hidden;height:400px;display:flex;align-items:center;justify-content:center;background:var(--glass-bg);position:relative}
.pm-main-img::after{content:'';position:absolute;inset:0;background:radial-gradient(circle at center,transparent 50%,rgba(0,0,0,0.2));pointer-events:none}
.pm-main-img img{max-width:85%;max-height:85%;object-fit:contain;transition:transform .4s var(--ease-out);filter:drop-shadow(0 10px 30px rgba(0,0,0,0.3))}
.pm-main-img:hover img{transform:scale(1.08)}
.pm-brand{font-size:11px;color:var(--text-muted);text-transform:uppercase;letter-spacing:2px;margin-bottom:6px;display:block}
.pm-title{font-family:var(--font-display);font-size:1.5rem;font-weight:700;margin-bottom:12px}
.pm-rating{display:flex;align-items:center;gap:8px;margin-bottom:14px}
.pm-stars{color:var(--accent-gold);letter-spacing:2px}
.pm-reviews{font-size:.85rem;color:var(--text-muted)}
.pm-desc{font-size:.95rem;color:var(--text-secondary);line-height:1.7;margin-bottom:20px}
.pm-price-row{margin-bottom:24px}
.pm-price{font-family:var(--font-display);font-size:1.8rem;font-weight:800;color:var(--accent)}
.pm-old-price{font-size:1rem;color:var(--text-muted);text-decoration:line-through;margin-left:10px}
.pm-sizes-label{font-size:.85rem;color:var(--text-secondary);display:block;margin-bottom:12px}
.pm-sizes-grid{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.size-btn{width:48px;height:42px;border:1px solid var(--glass-border);border-radius:var(--radius-sm);color:var(--text-secondary);font-size:13px;font-weight:500;display:flex;align-items:center;justify-content:center;transition:all .3s var(--ease-bounce)}
.size-btn:hover{border-color:var(--accent);color:var(--text-primary);transform:translateY(-3px);box-shadow:0 4px 12px rgba(212,175,55,0.15)}
.size-btn.active{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 4px 15px rgba(212,175,55,0.4);transform:scale(1.05)}
.pm-features{display:flex;flex-direction:column;gap:10px;margin-top:20px;padding-top:20px;border-top:1px solid var(--glass-border)}
.pm-feature{font-size:.85rem;color:var(--text-secondary);display:flex;align-items:center;gap:8px}
.pm-feature i{color:var(--accent);font-size:.75rem}

/* ─── CART SIDEBAR ─── */
.cart-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.6);z-index:1001;opacity:0;pointer-events:none;transition:opacity .4s}
.cart-overlay.active{opacity:1;pointer-events:all}
.cart-sidebar{position:fixed;top:0;right:-420px;width:400px;max-width:90vw;height:100%;z-index:1002;border-radius:var(--radius-lg) 0 0 var(--radius-lg);display:flex;flex-direction:column;transition:right .5s var(--ease-out)}
.cart-sidebar.active{right:0}
.cart-header{padding:24px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--glass-border)}
.cart-header h3{font-family:var(--font-display);font-size:1rem;font-weight:700;display:flex;align-items:center;gap:10px}
.cart-close-btn{width:36px;height:36px;border:1px solid var(--glass-border);border-radius:50%;color:var(--text-primary);display:flex;align-items:center;justify-content:center;transition:all .3s}
.cart-close-btn:hover{background:var(--accent);border-color:var(--accent)}
.cart-items{flex:1;overflow-y:auto;padding:20px 24px}
.cart-empty{text-align:center;padding:60px 0;color:var(--text-muted)}
.cart-empty i{font-size:3rem;margin-bottom:16px;opacity:.2;display:block}
.cart-empty p{font-size:1rem;color:var(--text-secondary);margin-bottom:6px}
.cart-empty span{font-size:.85rem}
.cart-item{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid var(--glass-border);animation:slideInRight .3s var(--ease-out)}
@keyframes slideInRight{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}
.cart-item-image{width:70px;height:70px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;font-size:1.8rem;flex-shrink:0;overflow:hidden}
.cart-item-details{flex:1}
.cart-item-name{font-size:13px;font-weight:600;margin-bottom:4px}
.cart-item-meta{font-size:11px;color:var(--text-muted);margin-bottom:8px}
.cart-item-bottom{display:flex;align-items:center;justify-content:space-between}
.cart-item-price{font-size:14px;font-weight:700;color:var(--accent)}
.cart-item-qty{display:flex;align-items:center;gap:6px}
.qty-btn{width:24px;height:24px;border:1px solid var(--glass-border);border-radius:50%;color:var(--text-primary);display:flex;align-items:center;justify-content:center;font-size:11px;transition:all .3s}
.qty-btn:hover{background:var(--accent);border-color:var(--accent)}
.cart-item-remove{color:var(--text-muted);font-size:12px;padding:4px;transition:color .3s}
.cart-item-remove:hover{color:var(--accent)}
.cart-footer{padding:20px 24px;border-top:1px solid var(--glass-border)}
.cart-total-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;font-weight:600}
.cart-total-price{font-size:1.3rem;color:var(--accent);font-weight:800}
.cart-shipping-note{text-align:center;font-size:11px;color:var(--text-muted);margin-top:10px}
.cart-shipping-note i{color:var(--accent);margin-right:5px}

/* ─── CHECKOUT MODAL ─── */
.checkout-modal{position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.8);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:0;pointer-events:none;transition:opacity .4s}
.checkout-modal.active{opacity:1;pointer-events:all}
.checkout-modal-inner{width:90%;max-width:500px;padding:40px;border-radius:var(--radius-xl);max-height:90vh;overflow-y:auto;position:relative}
.checkout-close{position:absolute;top:16px;right:16px;width:36px;height:36px;border:1px solid var(--glass-border);border-radius:50%;color:var(--text-primary);display:flex;align-items:center;justify-content:center;transition:all .3s}
.checkout-close:hover{background:var(--accent);border-color:var(--accent)}
.checkout-modal-inner h2{font-family:var(--font-display);font-size:1.4rem;font-weight:700;margin-bottom:24px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-row:has(.form-group-sm){grid-template-columns:2fr 1fr 1fr}
.form-group{margin-bottom:16px}
.form-group label{display:block;font-size:.8rem;color:var(--text-secondary);margin-bottom:6px;letter-spacing:1px}
.form-group input{width:100%;padding:14px 16px;background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--radius-md);color:var(--text-primary);font-size:.9rem;outline:none;transition:border-color .3s}
.form-group input:focus{border-color:var(--accent)}
.form-group input::placeholder{color:var(--text-muted)}
.checkout-total{display:flex;justify-content:space-between;align-items:center;padding:16px 0;border-top:1px solid var(--glass-border);margin:10px 0 20px;font-weight:600}
.checkout-total-price{font-size:1.3rem;color:var(--accent);font-weight:800}

/* ─── SHOP FEATURES ─── */
.features-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.feature-card{padding:36px 28px;text-align:center;transition:all .4s var(--ease-out);border:1px solid transparent}
.feature-card:hover{transform:translateY(-8px);border-color:var(--glass-border-strong);box-shadow:0 20px 40px rgba(0,0,0,0.3)}
.feature-icon{width:64px;height:64px;margin:0 auto 18px;border-radius:50%;background:rgba(212,175,55,0.08);display:flex;align-items:center;justify-content:center;font-size:1.4rem;color:var(--accent);transition:all .4s var(--ease-bounce)}
.feature-card:hover .feature-icon{transform:scale(1.15) rotate(5deg);background:rgba(212,175,55,0.15);box-shadow:0 0 30px rgba(212,175,55,0.2)}
.feature-card h3{font-family:var(--font-display);font-size:1rem;font-weight:700;margin-bottom:10px}
.feature-card p{font-size:.85rem;color:var(--text-secondary);line-height:1.6}

/* Newsletter */
.shop-newsletter{padding:40px 0}
.newsletter-card{display:flex;align-items:center;justify-content:space-between;gap:40px;padding:40px 48px;background:var(--bg-card);border:1px solid var(--glass-border);overflow:hidden;position:relative}
.newsletter-card::before{content:'';position:absolute;top:-50%;left:-20%;width:300px;height:300px;background:radial-gradient(circle,rgba(212,175,55,0.08) 0%,transparent 70%);border-radius:50%;pointer-events:none}
.newsletter-content h3{font-family:var(--font-display);font-size:1.3rem;font-weight:700;margin-bottom:8px}
.newsletter-content h3 i{color:var(--accent);margin-right:8px}
.newsletter-content p{font-size:.9rem;color:var(--text-secondary);max-width:380px}
.newsletter-form{flex-shrink:0}
.newsletter-input-wrap{display:flex;gap:8px}
.newsletter-input-wrap input{padding:12px 20px;border:1px solid var(--glass-border);border-radius:var(--radius-full);background:var(--bg-primary);color:var(--text-primary);font-size:.9rem;width:260px;transition:border-color .3s}
.newsletter-input-wrap input:focus{outline:none;border-color:var(--accent)}
.newsletter-note{display:block;margin-top:10px;font-size:.75rem;color:var(--text-muted);text-align:right}
.newsletter-note i{margin-right:4px}
@media(max-width:768px){
    .newsletter-card{flex-direction:column;gap:20px;padding:28px 24px;text-align:center}
    .newsletter-content p{max-width:100%}
    .newsletter-input-wrap{flex-direction:column}
    .newsletter-input-wrap input{width:100%}
    .newsletter-note{text-align:center}
}

/* Content-visibility optimize for below-fold sections */
.shop-features,.shop-newsletter{content-visibility:auto;contain-intrinsic-size:auto 400px}

/* ═══════════════════════════════════════════════════════════
   SCROLL ANIMATIONS
   ═══════════════════════════════════════════════════════════ */
[data-animate]{opacity:0;transform:translateY(40px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
[data-animate].visible{opacity:1;transform:translateY(0)}
[data-animate][data-delay="0.1"]{transition-delay:.1s}
[data-animate][data-delay="0.15"]{transition-delay:.15s}
[data-animate][data-delay="0.2"]{transition-delay:.2s}
[data-animate][data-delay="0.25"]{transition-delay:.25s}
[data-animate][data-delay="0.3"]{transition-delay:.3s}
[data-animate][data-delay="0.35"]{transition-delay:.35s}
[data-animate][data-delay="0.4"]{transition-delay:.4s}
[data-animate][data-delay="0.5"]{transition-delay:.5s}
[data-animate][data-delay="0.6"]{transition-delay:.6s}
[data-animate][data-delay="0.7"]{transition-delay:.7s}
[data-animate][data-delay="0.8"]{transition-delay:.8s}

/* ═══════════════════════════════════════════════════════════
   SCROLL PROGRESS BAR
   ═══════════════════════════════════════════════════════════ */
.scroll-progress{position:fixed;top:0;left:0;width:0%;height:3px;background:var(--gradient-main);z-index:99999;transition:width .1s linear;box-shadow:0 0 10px rgba(212,175,55,0.6)}

/* ═══════════════════════════════════════════════════════════
   LIQUID GLASS EFFECT
   ═══════════════════════════════════════════════════════════ */
.liquid-glass{background:rgba(255,255,255,0.04);-webkit-backdrop-filter:blur(40px) saturate(200%) brightness(110%);backdrop-filter:blur(40px) saturate(200%) brightness(110%);border:1px solid rgba(255,255,255,0.1);border-radius:var(--radius-xl);position:relative;overflow:hidden;transition:all .5s var(--ease-out)}
.liquid-glass::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,0.12) 0%,rgba(255,255,255,0.03) 30%,rgba(212,175,55,0.06) 50%,rgba(245,215,110,0.04) 70%,rgba(255,255,255,0.08) 100%);animation:liquidShift 10s ease-in-out infinite;pointer-events:none;z-index:0}
.liquid-glass::after{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:conic-gradient(from 0deg,transparent 0deg,rgba(255,255,255,0.03) 60deg,transparent 120deg,rgba(212,175,55,0.04) 180deg,transparent 240deg,rgba(255,255,255,0.03) 300deg,transparent 360deg);animation:prismRotate 15s linear infinite;pointer-events:none;z-index:0}
@keyframes liquidShift{0%,100%{opacity:1;transform:scale(1) translateX(0)}25%{opacity:.85;transform:scale(1.02) translateX(5px)}50%{opacity:1;transform:scale(1) translateX(-5px)}75%{opacity:.9;transform:scale(1.01) translateX(3px)}}
@keyframes prismRotate{to{transform:rotate(360deg)}}

/* ─── GLASS CARD ENHANCED ─── */
.glass-card.liquid{background:rgba(255,255,255,0.05);-webkit-backdrop-filter:blur(30px) saturate(180%) brightness(108%);backdrop-filter:blur(30px) saturate(180%) brightness(108%);border:1px solid rgba(255,255,255,0.12);box-shadow:0 8px 32px rgba(0,0,0,0.4),inset 0 1px 0 rgba(255,255,255,0.15),inset 0 -1px 0 rgba(0,0,0,0.1)}
.glass-card.liquid:hover{border-color:rgba(255,255,255,0.2);box-shadow:0 20px 60px rgba(0,0,0,0.5),inset 0 1px 0 rgba(255,255,255,0.2),0 0 40px rgba(212,175,55,0.1)}

/* ─── IRIDESCENT BORDER ─── */
.iridescent-border{position:relative}
.iridescent-border::before{content:'';position:absolute;inset:-1px;border-radius:inherit;background:linear-gradient(var(--angle,135deg),rgba(212,175,55,0.8),rgba(245,215,110,0.6),rgba(255,255,255,0.4),rgba(212,175,55,0.6));-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;padding:1px;animation:borderRotate 4s linear infinite;z-index:0}
@keyframes borderRotate{to{--angle:495deg}}

/* ═══════════════════════════════════════════════════════════
   AURORA BACKGROUND
   ═══════════════════════════════════════════════════════════ */
.aurora{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.aurora-orb{position:absolute;border-radius:50%;filter:blur(80px);animation:auroraFloat 12s ease-in-out infinite;opacity:.22}
.aurora-orb-1{width:600px;height:600px;background:radial-gradient(circle,rgba(212,175,55,0.8),transparent);top:-200px;left:-100px;animation-duration:14s}
.aurora-orb-2{width:500px;height:500px;background:radial-gradient(circle,rgba(245,215,110,0.6),transparent);top:-100px;right:-100px;animation-duration:18s;animation-delay:-5s}
.aurora-orb-3{width:400px;height:400px;background:radial-gradient(circle,rgba(28,61,102,0.5),transparent);bottom:-100px;left:30%;animation-duration:22s;animation-delay:-10s}
@keyframes auroraFloat{0%,100%{transform:translate(0,0) scale(1)}20%{transform:translate(80px,40px) scale(1.15)}40%{transform:translate(-60px,80px) scale(.9)}60%{transform:translate(40px,-60px) scale(1.1)}80%{transform:translate(-80px,20px) scale(1.05)}}

/* ═══════════════════════════════════════════════════════════
   FLOATING PARTICLES
   ═══════════════════════════════════════════════════════════ */
.particles-container{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.particle{position:absolute;width:2px;height:2px;background:rgba(212,175,55,.6);border-radius:50%;animation:particleFloat linear infinite}
@keyframes particleFloat{0%{transform:translateY(100vh) translateX(0) scale(0);opacity:0}10%{opacity:1}90%{opacity:.5}100%{transform:translateY(-20px) translateX(var(--drift,0px)) scale(1);opacity:0}}

/* ═══════════════════════════════════════════════════════════
   SHIMMER TEXT
   ═══════════════════════════════════════════════════════════ */
.shimmer-text{background:linear-gradient(90deg,var(--text-primary) 0%,rgba(255,255,255,.5) 40%,var(--text-primary) 50%,rgba(255,255,255,.5) 60%,var(--text-primary) 100%);background-size:200% auto;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:textShimmer 4s linear infinite}
@keyframes textShimmer{to{background-position:200% center}}

/* ═══════════════════════════════════════════════════════════
   3D TILT CARD
   ═══════════════════════════════════════════════════════════ */
.tilt-card{transform-style:preserve-3d;transform:perspective(1000px)}
.tilt-card .tilt-inner{transform:translateZ(20px)}

/* ═══════════════════════════════════════════════════════════
   RIPPLE BUTTON
   ═══════════════════════════════════════════════════════════ */
.ripple-effect{position:absolute;border-radius:50%;background:rgba(255,255,255,0.3);transform:scale(0);animation:ripple .6s linear;pointer-events:none}
@keyframes ripple{to{transform:scale(4);opacity:0}}

/* ═══════════════════════════════════════════════════════════
   GLOW PULSE ELEMENTS
   ═══════════════════════════════════════════════════════════ */
.glow-pulse{animation:glowPulseAnim 3s ease-in-out infinite}
@keyframes glowPulseAnim{0%,100%{box-shadow:0 0 20px rgba(212,175,55,.3),0 0 40px rgba(212,175,55,.1)}50%{box-shadow:0 0 40px rgba(212,175,55,.6),0 0 80px rgba(212,175,55,.3),0 0 120px rgba(212,175,55,.1)}}

/* ═══════════════════════════════════════════════════════════
   ENHANCED HERO (extras)
   ═══════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════
   STORIA ENHANCED SECTION
   ═══════════════════════════════════════════════════════════ */
.section-storia{background:linear-gradient(180deg,var(--bg-primary) 0%,rgba(212,175,55,.03) 50%,var(--bg-primary) 100%);position:relative;overflow:hidden}
.storia-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;margin-bottom:80px}
.storia-grid.reverse{direction:rtl}
.storia-grid.reverse > *{direction:ltr}
.storia-img-wrap{border-radius:var(--radius-xl);overflow:hidden;position:relative;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.storia-img-wrap img{width:100%;height:420px;object-fit:cover;transition:transform 1s var(--ease-out)}
.storia-img-wrap:hover img{transform:scale(1.05)}
.storia-img-overlay{position:absolute;inset:0;background:linear-gradient(135deg,rgba(212,175,55,.15),transparent);pointer-events:none}
.storia-badge{position:absolute;bottom:20px;right:20px;padding:10px 20px;border-radius:var(--radius-full);font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase}
.storia-quote{background:linear-gradient(135deg,rgba(212,175,55,.08),rgba(245,215,110,.05));border-left:3px solid var(--accent);padding:24px 28px;border-radius:0 var(--radius-md) var(--radius-md) 0;margin:24px 0;position:relative}
.storia-quote::before{content:'\201C';font-family:var(--font-serif);font-size:5rem;color:rgba(212,175,55,.15);position:absolute;top:-20px;left:10px;line-height:1}
.storia-quote p{font-family:var(--font-serif);font-style:italic;font-size:1.05rem;color:var(--text-secondary);line-height:1.8;position:relative}
.storia-facts{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:24px}
.storia-fact{background:rgba(255,255,255,.03);border:1px solid var(--glass-border);border-radius:var(--radius-md);padding:16px 20px;transition:all .3s var(--ease-out)}
.storia-fact:hover{border-color:rgba(212,175,55,.3);background:rgba(212,175,55,.05);transform:translateY(-3px)}
.storia-fact-icon{color:var(--accent);font-size:1.2rem;margin-bottom:8px}
.storia-fact h4{font-family:var(--font-display);font-size:.85rem;font-weight:700;margin-bottom:4px}
.storia-fact p{font-size:.8rem;color:var(--text-muted);line-height:1.5}

/* ═══════════════════════════════════════════════════════════
   EXTRA ANIMATION KEYFRAMES
   ═══════════════════════════════════════════════════════════ */
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-20px)}}
@keyframes blurReveal{from{filter:blur(20px);opacity:0}to{filter:blur(0);opacity:1}}
@keyframes slideInFromLeft{from{opacity:0;transform:translateX(-60px)}to{opacity:1;transform:translateX(0)}}
@keyframes slideInFromRight{from{opacity:0;transform:translateX(60px)}to{opacity:1;transform:translateX(0)}}
@keyframes scaleBreath{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}

/* ═══════════════════════════════════════════════════════════
   AUTO-PLAY ANIMATIONS (no mouse required)
   ═══════════════════════════════════════════════════════════ */

/* Auto-float for cards (activate after scroll-reveal) */
@keyframes cardFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.intro-card.visible{animation:cardFloat 4s ease-in-out infinite}
.intro-card:nth-child(2).visible{animation-delay:.7s}
.intro-card:nth-child(3).visible{animation-delay:1.4s}
.shoe-evo-card.visible{animation:cardFloat 6s ease-in-out infinite}
.shoe-evo-card:nth-child(2).visible{animation-delay:.8s}
.shoe-evo-card:nth-child(3).visible{animation-delay:1.6s}
.shoe-evo-card:nth-child(4).visible{animation-delay:2.4s}

/* Auto-tilt breathing (replaces mouse 3D tilt) */
@keyframes autoTilt{0%{transform:perspective(1000px) rotateX(0) rotateY(0)}25%{transform:perspective(1000px) rotateX(-2deg) rotateY(2deg)}50%{transform:perspective(1000px) rotateX(0) rotateY(0)}75%{transform:perspective(1000px) rotateX(2deg) rotateY(-2deg)}100%{transform:perspective(1000px) rotateX(0) rotateY(0)}}
.auto-tilt{animation:autoTilt 8s ease-in-out infinite}

/* Pulsing glow borders on cards */
@keyframes borderGlow{0%,100%{border-color:var(--glass-border);box-shadow:var(--shadow-glass)}50%{border-color:rgba(212,175,55,.25);box-shadow:var(--shadow-glass),0 0 30px rgba(212,175,55,.08)}}
.timeline-item{animation:borderGlow 4s ease-in-out infinite}
.timeline-item:nth-child(2){animation-delay:1s}
.timeline-item:nth-child(3){animation-delay:2s}
.timeline-item:nth-child(4){animation-delay:3s}
.timeline-item:nth-child(5){animation-delay:4s}
.storia-fact{animation:borderGlow 5s ease-in-out infinite}
.storia-fact:nth-child(2){animation-delay:1.2s}
.storia-fact:nth-child(3){animation-delay:2.4s}
.storia-fact:nth-child(4){animation-delay:3.6s}

/* Shimmer/shine sweep on images */
.intro-card-img-wrap,.storia-img-wrap,.shoe-evo-img-wrap{position:relative;overflow:hidden}
.intro-card-img-wrap::after,.storia-img-wrap::after,.shoe-evo-img-wrap::after{content:'';position:absolute;top:0;left:-100%;width:60%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent);animation:imageShine 6s ease-in-out infinite;pointer-events:none;z-index:2}
@keyframes imageShine{0%{left:-100%}30%{left:150%}100%{left:150%}}
.intro-card:nth-child(2) .intro-card-img-wrap::after{animation-delay:2s}
.intro-card:nth-child(3) .intro-card-img-wrap::after{animation-delay:4s}
.storia-grid.reverse .storia-img-wrap::after{animation-delay:3s}
.shoe-evo-card:nth-child(2) .shoe-evo-img-wrap::after{animation-delay:1.5s}
.shoe-evo-card:nth-child(3) .shoe-evo-img-wrap::after{animation-delay:3s}
.shoe-evo-card:nth-child(4) .shoe-evo-img-wrap::after{animation-delay:4.5s}

/* Breathing pulse on stat numbers */
@keyframes statPulse{0%,100%{opacity:1;text-shadow:0 0 0 transparent}50%{opacity:.85;text-shadow:0 0 20px rgba(212,175,55,.4)}}
.hero-stat-num,.jh-stat-num,.dual-stat-num,.impact-num{animation:statPulse 3s ease-in-out infinite}

/* Badge breathing */
@keyframes badgeBreath{0%,100%{transform:scale(1);box-shadow:none}50%{transform:scale(1.05);box-shadow:0 0 15px rgba(212,175,55,.3)}}
.storia-badge{animation:badgeBreath 3s ease-in-out infinite}

/* Gallery overlay auto-reveal (cycle through items) */
@keyframes galleryReveal{0%,15%{opacity:1}20%,100%{opacity:0}}
.gallery-item:nth-child(1) .gallery-item-overlay{animation:galleryReveal 18s ease-in-out infinite 0s}
.gallery-item:nth-child(2) .gallery-item-overlay{animation:galleryReveal 18s ease-in-out infinite 3s}
.gallery-item:nth-child(3) .gallery-item-overlay{animation:galleryReveal 18s ease-in-out infinite 6s}
.gallery-item:nth-child(4) .gallery-item-overlay{animation:galleryReveal 18s ease-in-out infinite 9s}
.gallery-item:nth-child(5) .gallery-item-overlay{animation:galleryReveal 18s ease-in-out infinite 12s}
.gallery-item:nth-child(6) .gallery-item-overlay{animation:galleryReveal 18s ease-in-out infinite 15s}

/* Animated gradient underline on section headers */
.section-header .title-lg::after,.section-header .title-xl::after{content:'';display:block;width:80px;height:3px;background:var(--gradient-main);background-size:200% auto;margin-top:16px;border-radius:3px;animation:gradientSlide 3s linear infinite}
.section-header.center .title-lg::after,.section-header.center .title-xl::after{margin-left:auto;margin-right:auto}
@keyframes gradientSlide{0%{background-position:0% center}100%{background-position:200% center}}

/* Hero shoe image transition */
.hero-shoe-img{transition:opacity .8s ease}

/* Typing cursor blink */
[data-typing]{white-space:nowrap;overflow:hidden}
@keyframes cursorBlink{0%,100%{border-color:var(--accent)}50%{border-color:transparent}}

/* Ken Burns on shop hero */
.shop-hero-bg-img{animation:none;aspect-ratio:16/9}

/* Ken Burns on jordan hero */
.jordan-hero-bg-img{animation:heroBgZoom 25s ease-in-out infinite}

/* ═══════════════════════════════════════════════════════════
   STORIA PAGE
   ═══════════════════════════════════════════════════════════ */
.storia-page-hero{height:60vh;min-height:400px;position:relative;display:flex;align-items:center;overflow:hidden}
.storia-page-hero-bg{position:absolute;inset:0}
.storia-page-hero-bg-img{width:100%;height:100%;object-fit:cover;animation:heroBgZoom 25s ease-in-out infinite}
.storia-page-hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,10,.7) 0%,rgba(10,10,10,.5) 40%,rgba(10,10,10,.9) 100%)}
.storia-page-hero-content{position:relative;z-index:2}
.storia-page-hero-title{font-family:var(--font-display);font-size:clamp(2.5rem,6vw,5rem);font-weight:900;letter-spacing:-1px;line-height:1.1;margin-bottom:16px}

/* ═══════════════════════════════════════════════════════════
   CONTATTI PAGE
   ═══════════════════════════════════════════════════════════ */
.contatti-hero{height:50vh;min-height:350px;position:relative;display:flex;align-items:center;overflow:hidden}
.contatti-hero-bg{position:absolute;inset:0}
.contatti-hero-bg-img{width:100%;height:100%;object-fit:cover;animation:heroBgZoom 25s ease-in-out infinite}
.contatti-hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,10,.7) 0%,rgba(10,10,10,.5) 40%,rgba(10,10,10,.9) 100%)}
.contatti-hero-content{position:relative;z-index:2}
.contatti-hero-title{font-family:var(--font-display);font-size:clamp(2.5rem,6vw,5rem);font-weight:900;letter-spacing:-1px;line-height:1.1;margin-bottom:16px}
.contatti-info-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-bottom:60px}
.contatti-card{padding:40px 28px;text-align:center;transition:transform .4s var(--ease-out)}
.contatti-card-icon{width:60px;height:60px;margin:0 auto 18px;border-radius:50%;background:rgba(212,175,55,.08);display:flex;align-items:center;justify-content:center;font-size:1.3rem;color:var(--accent)}
.contatti-card h3{font-family:var(--font-display);font-size:1.1rem;font-weight:700;margin-bottom:8px}
.contatti-card p{font-size:.9rem;color:var(--text-secondary);line-height:1.6}

/* ═══════════════════════════════════════════════════════════
   NEW FEATURES — Back-to-top, Skeleton, Search, Cursor Trail,
   Sticky Filters, Price Range, Recently Viewed, Comparison, etc.
   ═══════════════════════════════════════════════════════════ */

/* ─── BACK TO TOP BUTTON ─── */
.back-to-top{position:fixed;bottom:30px;right:30px;width:48px;height:48px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-size:16px;z-index:999;opacity:0;visibility:hidden;transform:translateY(20px) scale(0.8);transition:all .4s var(--ease-elastic);box-shadow:0 6px 25px rgba(212,175,55,0.4);cursor:pointer;border:none}
.back-to-top.visible{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
.back-to-top:hover{transform:translateY(-4px) scale(1.1);box-shadow:0 10px 35px rgba(212,175,55,0.6)}
.back-to-top::after{content:'';position:absolute;inset:-3px;border-radius:50%;border:2px solid transparent;border-top-color:var(--accent-light);animation:none;transition:all .3s}
.back-to-top.visible::after{animation:topSpin 2s linear infinite}
@keyframes topSpin{to{transform:rotate(360deg)}}

/* ─── SKELETON / SHIMMER LOADER ─── */
.skeleton-card{background:var(--bg-card);border:1px solid var(--glass-border);border-radius:var(--radius-lg);overflow:hidden}
.skeleton-img{height:260px;background:linear-gradient(90deg,var(--bg-tertiary) 25%,rgba(255,255,255,0.05) 50%,var(--bg-tertiary) 75%);background-size:200% 100%;animation:skeletonShimmer 1.5s infinite}
.skeleton-text{margin:20px;display:flex;flex-direction:column;gap:10px}
.skeleton-line{height:12px;border-radius:6px;background:linear-gradient(90deg,var(--bg-tertiary) 25%,rgba(255,255,255,0.05) 50%,var(--bg-tertiary) 75%);background-size:200% 100%;animation:skeletonShimmer 1.5s infinite}
.skeleton-line.short{width:60%}
.skeleton-line.xs{width:35%;height:10px}
@keyframes skeletonShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ─── CURSOR TRAIL ─── */
.cursor-trail{position:fixed;width:6px;height:6px;border-radius:50%;background:var(--accent);pointer-events:none;z-index:99996;opacity:0.6;transition:opacity .6s;mix-blend-mode:screen}

/* ─── GRADIENT CURSOR FOLLOWER (Shop section) ─── */
.shop-cursor-glow{position:fixed;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(212,175,55,0.06) 0%,transparent 70%);pointer-events:none;z-index:0;transform:translate(-50%,-50%);transition:opacity .4s}

/* ─── STICKY FILTER BAR ─── */
.shop-toolbar.sticky{position:sticky;top:70px;z-index:100;background:rgba(10,10,10,0.92);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);padding:16px 0;margin:-16px -40px 30px;padding-left:40px;padding-right:40px;border-bottom:1px solid var(--glass-border);transition:all .3s}

/* ─── PRICE RANGE FILTER ─── */
.price-filter{display:flex;align-items:center;gap:14px;margin-bottom:20px;flex-wrap:wrap}
.price-filter-label{font-size:12px;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px}
.price-range-wrap{position:relative;width:200px;height:4px;background:var(--glass-bg-strong);border-radius:4px}
.price-range-fill{position:absolute;height:100%;background:var(--gradient-main);border-radius:4px;transition:width .2s}
.price-range-input{-webkit-appearance:none;appearance:none;width:200px;height:4px;background:transparent;position:absolute;top:0;left:0;cursor:pointer;z-index:2}
.price-range-input::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--accent);border:3px solid var(--bg-primary);box-shadow:0 0 10px rgba(212,175,55,0.5);cursor:pointer;transition:transform .2s}
.price-range-input::-webkit-slider-thumb:hover{transform:scale(1.3)}
.price-range-value{font-family:var(--font-display);font-size:13px;font-weight:600;color:var(--accent);min-width:60px}

/* ─── RECENTLY VIEWED ─── */
.recently-viewed{padding:60px 0;border-top:1px solid var(--glass-border)}
.recently-viewed-title{font-family:var(--font-display);font-size:1.1rem;font-weight:700;margin-bottom:24px;display:flex;align-items:center;gap:10px}
.recently-viewed-title i{color:var(--accent)}
.recently-viewed-scroll{display:flex;gap:16px;overflow-x:auto;padding-bottom:16px;scroll-snap-type:x mandatory}
.recently-viewed-scroll::-webkit-scrollbar{height:3px}
.recently-viewed-scroll::-webkit-scrollbar-thumb{background:var(--accent);border-radius:3px}
.rv-card{flex:0 0 180px;scroll-snap-align:start;background:var(--bg-card);border:1px solid var(--glass-border);border-radius:var(--radius-md);overflow:hidden;transition:all .3s var(--ease-out);cursor:pointer}
.rv-card:hover{transform:translateY(-4px);border-color:rgba(212,175,55,0.2);box-shadow:0 10px 30px rgba(0,0,0,0.4)}
.rv-card-img{height:120px;overflow:hidden}
.rv-card-img img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.rv-card:hover .rv-card-img img{transform:scale(1.1)}
.rv-card-info{padding:12px}
.rv-card-name{font-size:11px;font-weight:600;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rv-card-price{font-size:13px;font-weight:700;color:var(--accent)}

/* ─── PRODUCT COMPARISON ─── */
.compare-bar{position:fixed;bottom:-80px;left:50%;transform:translateX(-50%);z-index:998;background:rgba(10,10,10,0.95);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid var(--glass-border-strong);border-radius:var(--radius-xl);padding:14px 28px;display:flex;align-items:center;gap:20px;transition:bottom .5s var(--ease-elastic);box-shadow:0 -10px 40px rgba(0,0,0,0.5)}
.compare-bar.visible{bottom:30px}
.compare-bar-items{display:flex;gap:10px}
.compare-bar-item{width:50px;height:50px;border-radius:var(--radius-sm);overflow:hidden;border:2px solid var(--accent);position:relative}
.compare-bar-item img{width:100%;height:100%;object-fit:cover}
.compare-bar-item .remove-compare{position:absolute;inset:0;background:rgba(0,0,0,0.6);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s;font-size:12px;color:#fff;cursor:pointer}
.compare-bar-item:hover .remove-compare{opacity:1}
.compare-bar-text{font-size:13px;color:var(--text-secondary)}
.compare-bar-btn{padding:10px 22px;background:var(--accent);color:#fff;border-radius:var(--radius-full);font-size:13px;font-weight:600;transition:all .3s;cursor:pointer;border:none}
.compare-bar-btn:hover{background:var(--accent-light);box-shadow:0 4px 20px rgba(212,175,55,0.4)}

/* ─── CONFETTI ─── */
.confetti{position:fixed;width:8px;height:8px;z-index:99999;pointer-events:none;animation:confettiFall 3s linear forwards}
@keyframes confettiFall{0%{opacity:1;transform:translateY(0) rotate(0deg)}100%{opacity:0;transform:translateY(100vh) rotate(720deg)}}

/* ─── PRODUCT COMPARE BUTTON ON CARD ─── */
.product-compare-btn{position:absolute;top:52px;right:14px;width:36px;height:36px;border-radius:50%;background:rgba(0,0,0,0.5);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--glass-border);color:var(--text-secondary);display:flex;align-items:center;justify-content:center;z-index:3;transition:all .3s var(--ease-bounce);font-size:12px;opacity:0;transform:scale(0.5)}
.product-card:hover .product-compare-btn{opacity:1;transform:scale(1)}
.product-compare-btn.active,.product-compare-btn:hover{background:var(--accent-blue);border-color:var(--accent-blue);color:#fff}

/* ─── SEARCH RESULTS IN OVERLAY ─── */
.search-results{margin-top:20px;max-height:300px;overflow-y:auto}
.search-result-item{display:flex;align-items:center;gap:14px;padding:12px 16px;border-radius:var(--radius-md);transition:background .2s;cursor:pointer}
.search-result-item:hover{background:var(--glass-bg-strong)}
.search-result-img{width:50px;height:50px;border-radius:var(--radius-sm);overflow:hidden;flex-shrink:0}
.search-result-img img{width:100%;height:100%;object-fit:cover}
.search-result-info{flex:1}
.search-result-name{font-size:14px;font-weight:600}
.search-result-brand{font-size:11px;color:var(--text-muted)}
.search-result-price{font-size:14px;font-weight:700;color:var(--accent)}
.search-no-results{text-align:center;padding:30px;color:var(--text-muted);font-size:14px}

/* ─── CART BADGE BOUNCE ─── */
@keyframes cartBounce{0%{transform:scale(1)}30%{transform:scale(1.5)}50%{transform:scale(0.9)}70%{transform:scale(1.2)}100%{transform:scale(1)}}
.cart-badge.bounce{animation:cartBounce .5s var(--ease-elastic)}

/* ─── ENHANCED NAV ─── */
.nav{-webkit-backdrop-filter:blur(0px);backdrop-filter:blur(0px);transition:all .4s var(--ease-out)}
.nav.scrolled{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}

/* ─── PRODUCT CARD FLIP (double-click for details) ─── */
.product-card-inner{position:relative;transition:transform .6s var(--ease-out);transform-style:preserve-3d}
.product-card.flipped .product-card-inner{transform:rotateY(180deg)}
.product-card-back{position:absolute;inset:0;backface-visibility:hidden;transform:rotateY(180deg);background:var(--bg-card);border-radius:var(--radius-lg);padding:24px;display:flex;flex-direction:column;justify-content:center;gap:12px;z-index:5}
.product-card-back-title{font-family:var(--font-display);font-size:1rem;font-weight:700}
.product-card-back-desc{font-size:.85rem;color:var(--text-secondary);line-height:1.6}
.product-card-back-sizes{display:flex;flex-wrap:wrap;gap:6px}
.product-card-back-sizes span{padding:4px 10px;border:1px solid var(--glass-border);border-radius:var(--radius-sm);font-size:11px;color:var(--text-secondary)}
.product-card-back-btn{padding:10px;background:var(--accent);color:#fff;border:none;border-radius:var(--radius-md);font-size:13px;font-weight:600;cursor:pointer;transition:all .3s}
.product-card-back-btn:hover{background:var(--accent-light)}

/* ═══════════════════════════════════════════════════════════
   GLOBAL NEW FEATURES — Dark Mode, Grain, Section Indicator,
   FAB Menu, Tooltips, Image Reveal, Text Split, Greeting, etc.
   ═══════════════════════════════════════════════════════════ */

/* ─── NOISE / GRAIN OVERLAY ─── */
.grain-overlay{position:fixed;inset:0;z-index:99990;pointer-events:none;opacity:0.03;mix-blend-mode:overlay;background-image: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")}

/* ─── DARK MODE TOGGLE ─── */
.theme-toggle{position:fixed;top:50%;right:20px;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;background:var(--glass-bg-strong);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid var(--glass-border);color:var(--text-secondary);display:flex;align-items:center;justify-content:center;z-index:998;cursor:pointer;transition:all .3s var(--ease-bounce);font-size:16px}
.theme-toggle:hover{transform:translateY(-50%) scale(1.15);border-color:var(--accent);color:var(--accent);box-shadow:0 0 20px rgba(212,175,55,0.2)}
.theme-toggle i{transition:transform .5s var(--ease-elastic)}
.theme-toggle:hover i{transform:rotate(30deg)}

/* ─── SECTION INDICATOR ─── */
.section-indicator{position:fixed;right:20px;bottom:90px;display:flex;flex-direction:column;align-items:center;gap:8px;z-index:997}
.section-dot{width:8px;height:8px;border-radius:50%;background:var(--glass-border-strong);transition:all .3s var(--ease-bounce);cursor:pointer;border:none;padding:0}
.section-dot.active{background:var(--accent);box-shadow:0 0 10px rgba(212,175,55,0.5);transform:scale(1.4)}
.section-dot:hover{background:var(--accent-light);transform:scale(1.3)}
.section-name{position:absolute;right:24px;top:50%;transform:translateY(-50%);background:rgba(10,10,10,0.9);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:6px 14px;border-radius:var(--radius-full);font-size:11px;color:var(--text-secondary);white-space:nowrap;opacity:0;pointer-events:none;transition:all .3s;border:1px solid var(--glass-border)}
.section-indicator:hover .section-name{opacity:1}

/* ─── FLOATING ACTION BUTTON ─── */
.fab-container{position:fixed;bottom:30px;left:30px;z-index:998}
.fab-menu{display:flex;flex-direction:column-reverse;gap:10px;margin-bottom:10px;opacity:0;transform:translateY(20px);pointer-events:none;transition:all .3s var(--ease-elastic)}
.fab-container.open .fab-menu{opacity:1;transform:translateY(0);pointer-events:all}
.fab-btn{width:48px;height:48px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-size:18px;cursor:pointer;border:none;transition:all .3s var(--ease-bounce);box-shadow:0 6px 25px rgba(212,175,55,0.3)}
.fab-btn:hover{transform:scale(1.1);box-shadow:0 8px 30px rgba(212,175,55,0.5)}
.fab-btn i{transition:transform .3s var(--ease-elastic)}
.fab-container.open .fab-trigger i{transform:rotate(45deg)}
.fab-mini{width:40px;height:40px;border-radius:50%;background:var(--bg-card);border:1px solid var(--glass-border-strong);color:var(--text-secondary);display:flex;align-items:center;justify-content:center;font-size:14px;cursor:pointer;transition:all .3s var(--ease-bounce)}
.fab-mini:hover{background:var(--accent);border-color:var(--accent);color:#fff;transform:scale(1.1)}

/* ─── TOOLTIP ─── */
[data-tooltip]{position:relative}
[data-tooltip]::after{content:attr(data-tooltip);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(4px);background:rgba(10,10,10,0.95);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--text-primary);padding:6px 14px;border-radius:var(--radius-sm);font-size:11px;white-space:nowrap;opacity:0;pointer-events:none;transition:all .2s var(--ease-out);border:1px solid var(--glass-border);z-index:1000}
[data-tooltip]:hover::after{opacity:1;transform:translateX(-50%) translateY(0)}

/* ─── IMAGE REVEAL ON SCROLL ─── */
.img-reveal{clip-path:inset(100% 0 0 0);transition:clip-path .8s var(--ease-out)}
.img-reveal.revealed{clip-path:inset(0 0 0 0)}

/* ─── TEXT SPLIT ANIMATION ─── */
.text-split .char{display:inline-block;opacity:0;transform:translateY(30px) rotate(5deg);transition:all .4s var(--ease-out)}
.text-split.split-visible .char{opacity:1;transform:translateY(0) rotate(0)}

/* ─── GREETING BANNER ─── */
.greeting-banner{position:fixed;top:80px;left:50%;transform:translateX(-50%) translateY(-20px);z-index:997;background:rgba(10,10,10,0.92);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid var(--glass-border-strong);border-radius:var(--radius-xl);padding:16px 28px;display:flex;align-items:center;gap:14px;opacity:0;transition:all .6s var(--ease-elastic);pointer-events:none;box-shadow:0 10px 40px rgba(0,0,0,0.4)}
.greeting-banner.show{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:all}
.greeting-banner-text{font-size:14px;font-weight:500}
.greeting-banner-text span{color:var(--accent);font-weight:700}
.greeting-banner-close{width:28px;height:28px;border-radius:50%;border:1px solid var(--glass-border);background:none;color:var(--text-secondary);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:11px;transition:all .2s}
.greeting-banner-close:hover{background:var(--accent);border-color:var(--accent);color:#fff}

/* ─── SCROLL PROGRESS % ─── */
.scroll-percent{position:fixed;top:12px;right:70px;font-size:10px;font-weight:700;color:var(--text-muted);z-index:1000;opacity:0;transition:opacity .3s;letter-spacing:1px;font-family:var(--font-display)}
.scroll-percent.visible{opacity:1}

/* ─── EASTER EGG MODAL ─── */
.easter-egg{position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.9);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);opacity:0;pointer-events:none;transition:opacity .5s}
.easter-egg.active{opacity:1;pointer-events:all}
.easter-egg-content{text-align:center;animation:easterPop .6s var(--ease-elastic)}
.easter-egg-content h2{font-family:var(--font-display);font-size:3rem;font-weight:900;background:var(--gradient-aurora);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:16px;background-size:200% auto;animation:logoShine 3s linear infinite}
.easter-egg-content p{color:var(--text-secondary);font-size:1.1rem;margin-bottom:24px}
.easter-egg-content .btn{display:inline-block;padding:12px 30px;background:var(--accent);color:#fff;border-radius:var(--radius-full);font-size:14px;font-weight:600;cursor:pointer;border:none;transition:all .3s}
@keyframes easterPop{0%{transform:scale(0) rotate(-10deg)}100%{transform:scale(1) rotate(0)}}

/* ─── GLOW LINE DECORATIONS ─── */
.glow-line{position:absolute;width:200px;height:1px;background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:0.3;pointer-events:none;animation:glowLinePulse 3s ease-in-out infinite}
@keyframes glowLinePulse{0%,100%{opacity:0.15;width:200px}50%{opacity:0.4;width:300px}}

/* ─── ANIMATED GRADIENT BORDERS GLOBAL ─── */
@property --angle{syntax:'<angle>';initial-value:0deg;inherits:false}
.glass-card{position:relative}
.glass-card::before{content:'';position:absolute;inset:-1px;border-radius:inherit;background:conic-gradient(from var(--angle),transparent 70%,var(--accent) 80%,transparent 90%);z-index:-1;animation:borderSpin 4s linear infinite;opacity:0;transition:opacity .4s}
.glass-card:hover::before{opacity:0.5}
@keyframes borderSpin{to{--angle:360deg}}

/* ─── SECTION HEADER REVEAL ─── */
.section-header .title-lg,.section-header .title-xl{position:relative;overflow:hidden}
.section-header .title-lg::before,.section-header .title-xl::before{content:'';position:absolute;left:0;bottom:0;width:0;height:3px;background:var(--gradient-main);transition:width .8s var(--ease-out)}
.section-header .title-lg.visible::before,.section-header .title-xl.visible::before{width:100%}

/* ─── SHARE PANEL ─── */
.share-panel{position:fixed;left:-60px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:6px;z-index:997;transition:left .4s var(--ease-elastic)}
.share-panel.visible{left:16px}
.share-btn{width:40px;height:40px;border-radius:var(--radius-sm);background:var(--glass-bg-strong);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--glass-border);color:var(--text-secondary);display:flex;align-items:center;justify-content:center;font-size:14px;cursor:pointer;transition:all .3s}
.share-btn:hover{background:var(--accent);border-color:var(--accent);color:#fff;transform:translateX(4px)}

/* ─── NOTIFICATION CENTER ─── */
.notif-panel{position:fixed;top:80px;right:-380px;width:350px;max-height:400px;background:rgba(10,10,10,0.95);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid var(--glass-border-strong);border-radius:var(--radius-lg);z-index:1000;transition:right .4s var(--ease-elastic);overflow:hidden}
.notif-panel.open{right:20px}
.notif-header{padding:16px 20px;border-bottom:1px solid var(--glass-border);display:flex;justify-content:space-between;align-items:center}
.notif-header h4{font-family:var(--font-display);font-size:14px;font-weight:700}
.notif-list{max-height:300px;overflow-y:auto;padding:8px}
.notif-item{padding:12px;border-radius:var(--radius-md);transition:background .2s;cursor:pointer;display:flex;gap:12px;align-items:flex-start}
.notif-item:hover{background:var(--glass-bg-strong)}
.notif-item-icon{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0}
.notif-item-icon.promo{background:rgba(212,175,55,0.15);color:var(--accent)}
.notif-item-icon.info{background:rgba(77,141,255,0.15);color:var(--accent-blue)}
.notif-item-icon.success{background:rgba(0,230,118,0.15);color:var(--accent-emerald)}
.notif-item-text{flex:1}
.notif-item-title{font-size:13px;font-weight:600;margin-bottom:2px}
.notif-item-desc{font-size:11px;color:var(--text-muted)}
.notif-badge{position:absolute;top:-2px;right:-2px;width:16px;height:16px;background:var(--accent);border-radius:50%;font-size:9px;font-weight:700;display:flex;align-items:center;justify-content:center;color:#fff;animation:notifPulse 2s infinite}
@keyframes notifPulse{0%,100%{box-shadow:0 0 0 0 rgba(212,175,55,0.4)}50%{box-shadow:0 0 0 6px rgba(212,175,55,0)}}

/* ─── SMOOTH NAVBAR SECTION COLORS ─── */
.nav{transition:all .5s var(--ease-out)}
.nav[data-section="hero"]{--nav-accent:var(--accent)}
.nav[data-section="intro"]{--nav-accent:var(--accent-blue)}
.nav[data-section="gallery"]{--nav-accent:var(--accent-violet)}

/* ─── COOKIE CONSENT ─── */
.cookie-banner{position:fixed;bottom:-120px;left:50%;transform:translateX(-50%);z-index:999;background:rgba(10,10,10,0.95);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid var(--glass-border-strong);border-radius:var(--radius-xl);padding:18px 28px;display:flex;align-items:center;gap:16px;transition:bottom .6s var(--ease-elastic);max-width:600px;width:90%;box-shadow:0 -8px 40px rgba(0,0,0,0.4)}
.cookie-banner.show{bottom:20px}
.cookie-banner p{font-size:13px;color:var(--text-secondary);flex:1;line-height:1.5}
.cookie-banner p a{color:var(--accent);text-decoration:underline}
.cookie-btn{padding:10px 22px;border-radius:var(--radius-full);font-size:12px;font-weight:700;cursor:pointer;border:none;transition:all .3s}
.cookie-accept{background:var(--accent);color:#fff}
.cookie-accept:hover{background:var(--accent-light)}
.cookie-decline{background:var(--glass-bg-strong);color:var(--text-secondary);border:1px solid var(--glass-border)}
.cookie-decline:hover{border-color:var(--accent);color:var(--text-primary)}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════ */
@media(max-width:1100px){
    .hero-right{display:none}
    .hero-stats-ribbon{flex-wrap:wrap;padding:14px 20px;gap:16px}
    .featured-grid,.products-grid,.shoe-evolution-grid,.impact-grid{grid-template-columns:repeat(3,1fr)}
    .gallery-masonry{grid-template-columns:repeat(3,1fr)}
    .footer-top{grid-template-columns:1fr 1fr}
}
@media(max-width:900px){
    .container{padding:0 24px}
    .section{padding:80px 0}
    .nav-center{display:none}
    .nav-hamburger{display:flex}
    .theme-toggle{right:12px;width:38px;height:38px;font-size:14px}
    .section-indicator{display:none}
    .share-panel{display:none}
    .fab-container{bottom:20px;left:20px}
    .notif-panel{width:90vw;right:-100vw}
    .notif-panel.open{right:5vw}
    .greeting-banner{width:90%;padding:12px 18px}
    .greeting-banner-text{font-size:12px}
    .scroll-percent{display:none}
    .nav-inner{padding:0 24px}
    .hero-content{flex-direction:column}
    .hero-left{max-width:100%;text-align:center}
    .hero-desc{margin:0 auto 35px}
    .hero-btns{justify-content:center}
    .hero-stats{justify-content:center}
    .hero-stats-ribbon{padding:12px 16px;gap:12px;border-radius:var(--radius-lg)}
    .hsr-sep{display:none}
    .hero-welcome-badge{margin-bottom:20px;padding:8px 18px}
    .hwb-text{font-size:.7rem;letter-spacing:2px}
    .hero-tagline-line{width:30px}
    .intro-grid,.bio-grid,.dual-grid,.storia-grid{grid-template-columns:1fr;gap:40px}
    .storia-grid.reverse{direction:ltr}
    .intro-cards,.featured-grid,.products-grid,.shoe-evolution-grid,.features-grid{grid-template-columns:repeat(2,1fr)}
    .gallery-masonry{grid-template-columns:repeat(2,1fr);grid-auto-rows:280px}
    .dual-img-2{position:relative;bottom:auto;right:auto;width:100%;margin-top:16px}
    .impact-grid{grid-template-columns:repeat(2,1fr)}
    .jt-item,.jt-item.jt-item-right{grid-template-columns:1fr;direction:ltr}
    .jt-item.jt-item-right > *{direction:ltr}
    .jt-line{left:20px}
    .jt-dot{left:20px}
    .jt-img-wrap{display:none}
    .pm-grid{grid-template-columns:1fr}
    .pm-main-img{height:250px}
    .footer-top{grid-template-columns:1fr}
    .newsletter-wrap{padding:50px 24px}
    .section-header-row{flex-direction:column;align-items:flex-start;gap:12px}
    .jordan-hero-stats{gap:20px}
    .jh-stat-num{font-size:1.8rem}
    .contatti-info-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:600px){
    .intro-cards,.featured-grid,.products-grid,.shoe-evolution-grid,.features-grid,.impact-grid{grid-template-columns:1fr}
    .storia-facts{grid-template-columns:1fr}
    .contatti-info-grid{grid-template-columns:1fr}
    .gallery-masonry{grid-template-columns:1fr;grid-auto-rows:280px}
    .hero-stats{flex-direction:column;gap:16px;align-items:center}
    .hero-stat-divider{width:40px;height:1px}
    .hero-btns{flex-direction:column;align-items:center}
    .hero-stats-ribbon{flex-direction:column;gap:10px;padding:16px;border-radius:var(--radius-md)}
    .hero-kicker{letter-spacing:3px;font-size:.6rem}
    .newsletter-form{flex-direction:column}
    .shop-toolbar{flex-direction:column;align-items:stretch}
    .shop-filters{overflow-x:auto}
    .shop-hero-stats{gap:20px}
    .shop-hero-stat-num{font-size:1.4rem}
    .jordan-hero-stats{flex-direction:column;gap:16px}
    .form-row{grid-template-columns:1fr}
    .form-row:has(.form-group-sm){grid-template-columns:1fr}
    .dual-stats{grid-template-columns:1fr;gap:10px}
    .footer-bottom{flex-direction:column;gap:16px;text-align:center}
    .price-filter{flex-direction:column;align-items:flex-start}
    .compare-bar{width:90%;padding:12px 16px}
    .compare-bar-text{display:none}
    .back-to-top{width:42px;height:42px;bottom:20px;right:20px}
    .cursor-trail,.shop-cursor-glow{display:none}
    .rv-card{flex:0 0 150px}
}

/* ─── UTILITY CLASSES (replacing inline styles) ─── */
.notif-close-btn{background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:14px}
.notif-btn-relative{position:relative}
.hero-bg-image-cover{background-size:cover;background-position:center}
.text-center{text-align:center}
.mt-40{margin-top:40px}
.d-none{display:none}
.mx-auto-text{max-width:500px;margin:0 auto 30px}
.brand-icon-lg{font-size:2.5rem}
.price-range-fill-full{width:100%}
.cart-footer-hidden{display:none}
.recently-viewed-hidden{display:none}
.max-w-600{max-width:600px}
.mt-20{margin-top:20px}
.mt-30{margin-top:30px}
.mt-80{margin-top:80px}

/* ═══════════════════════════════════════════════════════════
   MEGA IDLE ANIMATIONS — always running, no interaction needed
   ═══════════════════════════════════════════════════════════ */

/* --- Global ambient particles --- */
.ambient-particle{position:fixed;border-radius:50%;pointer-events:none;z-index:0;opacity:0;animation:ambientFloat linear infinite}
@keyframes ambientFloat{0%{transform:translateY(100vh) translateX(0) scale(0);opacity:0}10%{opacity:1}50%{transform:translateY(50vh) translateX(var(--drift)) scale(1);opacity:0.6}90%{opacity:0.2}100%{transform:translateY(-10vh) translateX(var(--drift2)) scale(0.5);opacity:0}}
.ambient-particle,.ember-spark,.sparkle,.geo-shape,.floating-emoji,.morph-blob{will-change:transform;contain:layout style}

/* --- Floating ember sparks --- */
.ember-spark{position:fixed;width:3px;height:3px;background:var(--accent);border-radius:50%;pointer-events:none;z-index:1;box-shadow:0 0 6px var(--accent),0 0 12px rgba(212,175,55,0.3);animation:emberRise linear infinite}
@keyframes emberRise{0%{transform:translateY(100vh) scale(1);opacity:0}5%{opacity:1}30%{opacity:0.8}100%{transform:translateY(-20vh) scale(0);opacity:0}}

/* --- Section breathing glow --- */
.section{position:relative}
.section::before{content:'';position:absolute;top:50%;left:50%;width:600px;height:600px;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(212,175,55,0.03) 0%,transparent 70%);border-radius:50%;pointer-events:none;animation:sectionBreath 6s ease-in-out infinite;z-index:0}
@keyframes sectionBreath{0%,100%{transform:translate(-50%,-50%) scale(0.8);opacity:0.3}50%{transform:translate(-50%,-50%) scale(1.3);opacity:0.7}}

/* --- Navbar logo pulse wave --- */
.nav-logo::after{content:'';position:absolute;bottom:-4px;left:0;width:100%;height:2px;background:linear-gradient(90deg,transparent,var(--accent),transparent);animation:logoPulseWave 3s ease-in-out infinite}
@keyframes logoPulseWave{0%,100%{transform:scaleX(0);opacity:0}50%{transform:scaleX(1);opacity:1}}

/* --- Gradient text continuous shimmer --- */
.gradient-text{background-size:200% auto;animation:gradientTextShimmer 4s linear infinite}
@keyframes gradientTextShimmer{0%{background-position:0% center}100%{background-position:200% center}}

/* --- Cards hover-free glow pulse --- */
.glass-card,.intro-card,.featured-card,.shoe-evo-card{position:relative;overflow:hidden}
.glass-card::after,.intro-card::after,.featured-card::after,.shoe-evo-card::after{content:'';position:absolute;inset:-2px;border-radius:inherit;background:conic-gradient(from var(--card-glow-angle,0deg),transparent 0%,rgba(212,175,55,0.15) 10%,transparent 20%);z-index:-1;animation:cardGlowRotate 8s linear infinite;opacity:0.5}
@keyframes cardGlowRotate{0%{--card-glow-angle:0deg;transform:rotate(0deg)}100%{--card-glow-angle:360deg;transform:rotate(360deg)}}

/* --- Button idle shine sweep --- */
.btn-primary{position:relative;overflow:hidden}
.btn-primary::after{content:'';position:absolute;top:0;left:-100%;width:50%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.15),transparent);animation:btnShineSweep 4s ease-in-out infinite}
@keyframes btnShineSweep{0%,100%{left:-100%}50%{left:150%}}

/* --- Title text wave effect --- */
.title-lg,.title-xl{position:relative}
.title-lg::after,.title-xl::after{content:'';position:absolute;bottom:-8px;left:0;width:100%;height:3px;background:linear-gradient(90deg,var(--accent),var(--accent-light),var(--accent));background-size:200% 100%;animation:titleWave 3s ease-in-out infinite;border-radius:2px;opacity:0.6}
@keyframes titleWave{0%{background-position:0% 50%;transform:scaleX(0.6)}50%{background-position:100% 50%;transform:scaleX(1)}100%{background-position:0% 50%;transform:scaleX(0.6)}}

/* --- Floating badges wobble --- */
.product-badge,.featured-card-badge{animation:badgeWobble 3s ease-in-out infinite}
@keyframes badgeWobble{0%,100%{transform:rotate(-2deg) scale(1)}25%{transform:rotate(2deg) scale(1.05)}50%{transform:rotate(-1deg) scale(1)}75%{transform:rotate(1deg) scale(1.02)}}

/* --- Footer social icons orbit --- */
.footer-social a{display:inline-flex;animation:socialOrbit 4s ease-in-out infinite;animation-delay:calc(var(--i,0) * 0.3s)}
@keyframes socialOrbit{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

/* --- Section label floating --- */
.label{animation:labelFloat 3s ease-in-out infinite}
@keyframes labelFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}

/* --- Parallax banner overlay pulse --- */
.parallax-banner-overlay{animation:overlayPulse 8s ease-in-out infinite}
@keyframes overlayPulse{0%,100%{opacity:0.5}50%{opacity:0.7}}

/* --- Gallery item subtle zoom breathe --- */
.gallery-item img{animation:none}
@keyframes galleryZoomBreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}

/* --- Nav links underline wave --- */
.nav-link{position:relative;overflow:hidden}
.nav-link::after{content:'';position:absolute;bottom:0;left:0;width:100%;height:2px;background:var(--accent);transform:translateX(-110%);animation:navLinkWave 6s ease-in-out infinite;animation-delay:calc(var(--i,0) * 1.2s)}
@keyframes navLinkWave{0%,80%,100%{transform:translateX(-110%)}40%,60%{transform:translateX(0%)}}

/* --- Scroll indicator enhanced pulse --- */
.hero-scroll-line,.shop-scroll-line{animation:scrollLinePulse 2s ease-in-out infinite}
@keyframes scrollLinePulse{0%,100%{transform:scaleY(0.5);opacity:0.3}50%{transform:scaleY(1);opacity:1}}

/* --- Star rating twinkle --- */
.fa-star{animation:starTwinkle 2s ease-in-out infinite;animation-delay:calc(var(--i,0) * 0.4s)}
@keyframes starTwinkle{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.6;transform:scale(1.15)}}

/* --- Product image idle levitate --- */
.product-shoe-img{animation:none}
@keyframes shoeLevitate{0%,100%{transform:translateY(0) rotate(0deg)}25%{transform:translateY(-5px) rotate(0.5deg)}50%{transform:translateY(-8px) rotate(0deg)}75%{transform:translateY(-3px) rotate(-0.5deg)}}

/* --- Pulsing ring on hero stats --- */
.hero-stat-num,.jh-stat-num,.impact-num{position:relative}
.hero-stat-num::after,.jh-stat-num::after,.impact-num::after{content:'';position:absolute;inset:-8px;border:1px solid rgba(212,175,55,0.2);border-radius:50%;animation:statRingPulse 3s ease-in-out infinite}
@keyframes statRingPulse{0%,100%{transform:scale(0.9);opacity:0}50%{transform:scale(1.2);opacity:0.6}}

/* --- Ambient light leaks --- */
.hero-section::after{content:'';position:absolute;top:20%;right:-10%;width:500px;height:500px;background:radial-gradient(circle,rgba(212,175,55,0.06) 0%,transparent 60%);border-radius:50%;pointer-events:none;animation:lightLeak 12s ease-in-out infinite alternate;z-index:0}
@keyframes lightLeak{0%{transform:translate(0,0) scale(1);opacity:0.4}50%{transform:translate(-100px,50px) scale(1.3);opacity:0.7}100%{transform:translate(50px,-30px) scale(0.9);opacity:0.3}}

/* --- Floating noise grain animation --- */
.grain-overlay{animation:grainShift 0.5s steps(3) infinite}
@keyframes grainShift{0%{transform:translate(0,0)}33%{transform:translate(-2px,2px)}66%{transform:translate(2px,-2px)}100%{transform:translate(0,0)}}

/* --- Quiz & Minigame Styles (Professional) --- */
.games-section{padding:80px 0;position:relative}
.games-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:40px}
@media(max-width:900px){.games-grid{grid-template-columns:1fr}}

/* Quiz Card — Premium */
.quiz-card{background:linear-gradient(145deg,rgba(11,31,58,.9),rgba(10,10,10,.95));-webkit-backdrop-filter:blur(30px);backdrop-filter:blur(30px);border:1px solid rgba(212,175,55,.12);border-radius:var(--radius-xl);padding:40px;position:relative;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.5),inset 0 1px 0 rgba(212,175,55,.08)}
.quiz-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent,var(--accent),var(--accent-light),var(--accent),transparent);background-size:200%;animation:gradientTextShimmer 3s linear infinite}
.quiz-card::after{content:'';position:absolute;bottom:0;right:0;width:200px;height:200px;background:radial-gradient(circle,rgba(212,175,55,.04),transparent 70%);pointer-events:none}
.quiz-header{display:flex;align-items:center;gap:16px;margin-bottom:30px;padding-bottom:20px;border-bottom:1px solid rgba(212,175,55,.08)}
.quiz-header i{font-size:2rem;color:var(--accent);width:52px;height:52px;display:flex;align-items:center;justify-content:center;background:rgba(212,175,55,.08);border-radius:var(--radius-md);border:1px solid rgba(212,175,55,.12);animation:iconBob 3s ease-in-out infinite}
.quiz-header h3{font-family:var(--font-display);font-size:1.5rem;color:var(--text-primary);font-weight:700}
.quiz-progress{width:100%;height:5px;background:rgba(212,175,55,.06);border-radius:5px;margin-bottom:28px;overflow:hidden;position:relative}
.quiz-progress-fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-light));border-radius:5px;transition:width 0.6s var(--ease-out);width:0%;box-shadow:0 0 12px rgba(212,175,55,.4)}
.quiz-question{font-size:1.1rem;font-weight:600;color:var(--text-primary);margin-bottom:24px;min-height:60px;line-height:1.6;letter-spacing:.2px}
.quiz-options{display:flex;flex-direction:column;gap:10px}
.quiz-option{padding:16px 22px;background:rgba(11,31,58,.5);border:1px solid rgba(212,175,55,.06);border-radius:var(--radius-md);color:var(--text-primary);font-size:0.95rem;cursor:pointer;transition:all .3s var(--ease-out);text-align:left;font-weight:500;position:relative;overflow:hidden}
.quiz-option::before{content:'';position:absolute;left:0;top:0;width:3px;height:100%;background:var(--accent);transform:scaleY(0);transition:transform .3s var(--ease-out)}
.quiz-option:hover{border-color:rgba(212,175,55,.25);background:rgba(212,175,55,.06);transform:translateX(8px);box-shadow:0 4px 20px rgba(0,0,0,.2)}
.quiz-option:hover::before{transform:scaleY(1)}
.quiz-option.correct{border-color:#4caf50;background:rgba(76,175,80,0.12);color:#81c784;box-shadow:0 0 20px rgba(76,175,80,.15)}
.quiz-option.correct::before{background:#4caf50;transform:scaleY(1)}
.quiz-option.wrong{border-color:#ef5350;background:rgba(244,67,54,0.1);color:#ef9a9a;box-shadow:0 0 20px rgba(244,67,54,.1)}
.quiz-option.wrong::before{background:#ef5350;transform:scaleY(1)}
.quiz-option.disabled{pointer-events:none;opacity:0.5}
.quiz-score{text-align:center;padding:30px 0}
.quiz-score-num{font-size:3.5rem;font-weight:900;font-family:var(--font-display);background:var(--gradient-main);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:shoeLevitate 3s ease-in-out infinite}
.quiz-score-label{color:var(--text-secondary);font-size:1rem;margin-top:10px;font-weight:500}
.quiz-restart{margin-top:24px;padding:14px 32px;background:var(--accent);color:#0A0A0A;border:none;border-radius:var(--radius-full);font-size:14px;font-weight:700;cursor:pointer;transition:all .3s;letter-spacing:.5px}
.quiz-restart:hover{transform:scale(1.05);box-shadow:0 8px 30px rgba(212,175,55,0.4);background:var(--accent-light)}

/* Minigame Card — Premium */
.minigame-card{background:linear-gradient(145deg,rgba(11,31,58,.9),rgba(10,10,10,.95));-webkit-backdrop-filter:blur(30px);backdrop-filter:blur(30px);border:1px solid rgba(212,175,55,.12);border-radius:var(--radius-xl);padding:40px;position:relative;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.5),inset 0 1px 0 rgba(212,175,55,.08)}
.minigame-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent,var(--accent),var(--accent-light),var(--accent),transparent);background-size:200%;animation:gradientTextShimmer 3s linear infinite}
.minigame-header{display:flex;align-items:center;gap:16px;margin-bottom:24px;padding-bottom:20px;border-bottom:1px solid rgba(212,175,55,.08)}
.minigame-header i{font-size:2rem;color:var(--accent);width:52px;height:52px;display:flex;align-items:center;justify-content:center;background:rgba(212,175,55,.08);border-radius:var(--radius-md);border:1px solid rgba(212,175,55,.12)}
.minigame-header h3{font-family:var(--font-display);font-size:1.5rem;color:var(--text-primary);font-weight:700}
.minigame-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(80px,1fr));gap:16px;margin-bottom:24px;padding:16px;background:rgba(11,31,58,.5);border-radius:var(--radius-md);border:1px solid rgba(212,175,55,.06)}
.minigame-stat{text-align:center;padding:8px}
.minigame-stat-num{display:block;font-size:1.6rem;font-weight:800;font-family:var(--font-display);color:var(--accent)}
.minigame-stat-label{font-size:0.7rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px;margin-top:4px}
.basketball-court{position:relative;width:100%;height:350px;background:linear-gradient(180deg,#0B1F3A 0%,#0A0A0A 100%);border-radius:var(--radius-lg);overflow:hidden;cursor:pointer;border:1px solid rgba(212,175,55,.08);box-shadow:inset 0 0 60px rgba(0,0,0,.3)}
.court-hoop{position:absolute;top:40px;left:50%;transform:translateX(-50%);width:80px;height:60px}
.court-backboard{position:absolute;top:0;left:50%;transform:translateX(-50%);width:70px;height:8px;background:linear-gradient(180deg,#F5D76E,#D4AF37);border-radius:2px;box-shadow:0 2px 10px rgba(212,175,55,.3)}
.court-rim{position:absolute;top:8px;left:50%;transform:translateX(-50%);width:50px;height:6px;border:3px solid #D4AF37;border-top:none;border-radius:0 0 50% 50%;box-shadow:0 4px 10px rgba(212,175,55,.2)}
.court-net{position:absolute;top:17px;left:50%;transform:translateX(-50%);width:44px;height:30px;border-left:2px dashed rgba(255,255,255,0.3);border-right:2px dashed rgba(255,255,255,0.3);border-bottom:2px dashed rgba(255,255,255,0.3);border-radius:0 0 8px 8px}
.court-ball{position:absolute;bottom:40px;left:50%;transform:translateX(-50%);width:40px;height:40px;background:radial-gradient(circle at 35% 35%,#F5D76E,#D4AF37);border-radius:50%;cursor:grab;transition:all 0.1s;box-shadow:0 4px 15px rgba(212,175,55,0.4);z-index:5}
.court-ball::before{content:'';position:absolute;top:45%;left:10%;width:80%;height:2px;background:rgba(0,0,0,0.3);border-radius:50%;transform:rotate(-30deg)}
.court-ball::after{content:'';position:absolute;top:20%;left:48%;width:2px;height:60%;background:rgba(0,0,0,0.2);border-radius:50%}
.court-ball.shooting{transition:all 0.6s cubic-bezier(0.2,0.8,0.3,1);cursor:default}
.court-ball.scored{animation:ballScored 0.5s ease-out}
@keyframes ballScored{0%{transform:scale(1)}50%{transform:scale(1.3)}100%{transform:scale(1)}}
.shot-power-bar{position:relative;width:100%;height:8px;background:var(--glass-bg);border-radius:4px;margin-top:16px;overflow:hidden}
.shot-power-fill{height:100%;width:0%;background:linear-gradient(90deg,#1C3D66,#D4AF37,#F5D76E);border-radius:4px;transition:width 0.05s;position:relative;z-index:1}
.minigame-msg{text-align:center;margin-top:16px;font-size:0.9rem;font-weight:600;color:var(--text-secondary);min-height:24px;padding:8px;border-radius:var(--radius-sm);transition:all .3s}
.minigame-msg.scored-msg{color:#D4AF37;animation:labelFloat 0.5s ease-out;background:rgba(212,175,55,.05)}
.minigame-msg.missed-msg{color:#ef5350;background:rgba(244,67,54,.05)}
.minigame-restart{margin-top:20px;padding:12px 28px;background:var(--accent);color:#0A0A0A;border:none;border-radius:var(--radius-full);font-size:13px;font-weight:700;cursor:pointer;transition:all .3s;letter-spacing:.5px}
.minigame-restart:hover{transform:scale(1.05)}

/* ═══════════ FOOTER CREDITS ═══════════ */
.footer-credits{font-size:.75rem;color:var(--text-muted);letter-spacing:0.5px;text-align:center;width:100%;margin-top:12px;opacity:0.7}
.footer-bottom{flex-wrap:wrap}

/* ═══════════ PLAY CTA (Homepage) ═══════════ */
.play-cta-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:40px}
@media(max-width:900px){.play-cta-grid{grid-template-columns:1fr}}
.play-cta-card{display:flex;flex-direction:column;align-items:center;text-align:center;padding:50px 40px;border-radius:var(--radius-lg);transition:all 0.4s var(--ease-out);text-decoration:none;position:relative;overflow:hidden}
.play-cta-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-glow-strong)}
.play-cta-icon{font-size:3rem;margin-bottom:20px;color:var(--accent);animation:iconBob 3s ease-in-out infinite}
@keyframes iconBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.play-cta-card h3{font-family:var(--font-display);font-size:1.6rem;margin-bottom:12px;color:var(--text-primary)}
.play-cta-card p{color:var(--text-secondary);font-size:0.95rem;margin-bottom:24px;line-height:1.6}
.btn-pulse{animation:ctaPulse 2s ease-in-out infinite}
@keyframes ctaPulse{0%,100%{box-shadow:0 0 0 0 rgba(212,175,55,0.4)}50%{box-shadow:0 0 0 12px rgba(212,175,55,0)}}

/* ═══════════ QUIZ PAGE ═══════════ */
.quiz-page-hero{height:60vh;min-height:400px;position:relative;display:flex;align-items:center;overflow:hidden}
.quiz-page-hero-bg{position:absolute;inset:0}
.quiz-page-hero-bg-img{width:100%;height:100%;object-fit:cover;animation:heroBgZoom 25s ease-in-out infinite}
.quiz-page-hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,10,.7) 0%,rgba(10,10,10,.5) 40%,rgba(10,10,10,.9) 100%)}
.quiz-page-hero-content{position:relative;z-index:2}
.quiz-page-hero-title{font-family:var(--font-display);font-size:clamp(2.5rem,6vw,5rem);font-weight:900;letter-spacing:-1px;line-height:1.1;margin-bottom:16px}

.quiz-topics-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:30px;margin-top:40px}
.quiz-topic-card{background:linear-gradient(145deg,rgba(11,31,58,.7),rgba(10,10,10,.8));-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid rgba(212,175,55,.08);border-radius:var(--radius-xl);padding:44px 32px;cursor:pointer;transition:all 0.4s var(--ease-out);text-align:center;position:relative;overflow:hidden;box-shadow:0 10px 40px rgba(0,0,0,.3)}
.quiz-topic-card::before{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:conic-gradient(transparent,rgba(212,175,55,.2),transparent 30%);animation:neonRotate 4s linear infinite;opacity:0;transition:opacity 0.4s}
.quiz-topic-card:hover::before{opacity:1}
.quiz-topic-card::after{content:'';position:absolute;inset:1px;background:linear-gradient(145deg,rgba(11,31,58,.7),rgba(10,10,10,.8));border-radius:calc(var(--radius-xl) - 1px);z-index:0}
.quiz-topic-card>*{position:relative;z-index:1}
.quiz-topic-card:hover{transform:translateY(-6px);border-color:var(--accent);box-shadow:0 0 30px rgba(212,175,55,0.15)}
.quiz-topic-icon{font-size:2.5rem;color:var(--accent);margin-bottom:16px;animation:iconBob 3s ease-in-out infinite}
.quiz-topic-card h3{font-family:var(--font-display);font-size:1.3rem;margin-bottom:10px;color:var(--text-primary)}
.quiz-topic-card p{color:var(--text-secondary);font-size:0.9rem;line-height:1.5;margin-bottom:16px}
.quiz-topic-difficulty{font-size:0.8rem;color:var(--accent);font-weight:600;letter-spacing:1px;text-transform:uppercase}
@keyframes neonRotate{to{transform:rotate(360deg)}}

.quiz-play-wrapper{max-width:700px;margin:0 auto}
.quiz-back-btn,.game-back-btn{background:none;border:1px solid var(--glass-border);color:var(--text-secondary);padding:10px 20px;border-radius:var(--radius-full);cursor:pointer;font-size:0.85rem;margin-bottom:24px;transition:all 0.3s;font-family:var(--font-primary)}
.quiz-back-btn:hover,.game-back-btn:hover{border-color:var(--accent);color:var(--accent)}
.quiz-subtitle{color:var(--text-muted);font-size:0.85rem;margin-top:4px}

/* ═══════════ MINIGAME PAGE ═══════════ */
.minigame-page-hero{height:60vh;min-height:400px;position:relative;display:flex;align-items:center;overflow:hidden}
.minigame-page-hero-bg{position:absolute;inset:0}
.minigame-page-hero-bg-img{width:100%;height:100%;object-fit:cover;animation:heroBgZoom 25s ease-in-out infinite}
.minigame-page-hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,10,.7) 0%,rgba(10,10,10,.5) 40%,rgba(10,10,10,.9) 100%)}
.minigame-page-hero-content{position:relative;z-index:2}
.minigame-page-hero-title{font-family:var(--font-display);font-size:clamp(2.5rem,6vw,5rem);font-weight:900;letter-spacing:-1px;line-height:1.1;margin-bottom:16px}

.game-select-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:30px;margin-top:40px}
.game-select-card{background:linear-gradient(145deg,rgba(11,31,58,.7),rgba(10,10,10,.8));-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid rgba(212,175,55,.08);border-radius:var(--radius-xl);padding:44px 32px;cursor:pointer;transition:all 0.4s var(--ease-out);text-align:center;position:relative;overflow:hidden;box-shadow:0 10px 40px rgba(0,0,0,.3)}
.game-select-card::before{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:conic-gradient(transparent,rgba(212,175,55,.2),transparent 30%);animation:neonRotate 4s linear infinite;opacity:0;transition:opacity 0.4s}
.game-select-card:hover::before{opacity:1}
.game-select-card::after{content:'';position:absolute;inset:1px;background:linear-gradient(145deg,rgba(11,31,58,.7),rgba(10,10,10,.8));border-radius:calc(var(--radius-xl) - 1px);z-index:0}
.game-select-card>*{position:relative;z-index:1}
.game-select-card:hover{transform:translateY(-8px);border-color:var(--accent);box-shadow:0 20px 60px rgba(0,0,0,.4),0 0 30px rgba(212,175,55,0.1)}
.game-select-icon{font-size:2.5rem;color:var(--accent);margin-bottom:16px;animation:iconBob 3s ease-in-out infinite}
.game-select-card h3{font-family:var(--font-display);font-size:1.3rem;margin-bottom:10px;color:var(--text-primary)}
.game-select-card p{color:var(--text-secondary);font-size:0.9rem;line-height:1.5}

/* ═══════════ MEMORY GAME (Professional) ═══════════ */
.memory-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;max-width:520px;margin:20px auto 0}
.memory-card{aspect-ratio:1;perspective:800px;cursor:pointer;transition:transform .2s var(--ease-out)}
.memory-card:hover{transform:scale(1.03)}
.memory-card-inner{position:relative;width:100%;height:100%;transition:transform 0.5s var(--ease-out);transform-style:preserve-3d}
.memory-card.flipped .memory-card-inner,.memory-card.matched .memory-card-inner{transform:rotateY(180deg)}
.memory-card-front,.memory-card-back{position:absolute;inset:0;backface-visibility:hidden;border-radius:var(--radius-md);border:1px solid rgba(212,175,55,.08);display:flex;align-items:center;justify-content:center;flex-direction:column}
.memory-card-front{background:linear-gradient(145deg,rgba(11,31,58,.8),rgba(10,10,10,.9));font-size:1.8rem;color:var(--accent);box-shadow:inset 0 0 30px rgba(0,0,0,.2)}
.memory-card-front::after{content:'';position:absolute;inset:0;border-radius:inherit;background:conic-gradient(from 0deg,transparent,rgba(212,175,55,.06),transparent 40%);animation:neonRotate 6s linear infinite}
.memory-card-back{transform:rotateY(180deg);overflow:hidden;background:linear-gradient(145deg,#0B1F3A,#0A0A0A);border-color:rgba(212,175,55,.15)}
.memory-card-back img{width:80%;height:55%;object-fit:contain;margin:8px auto 0;display:block;filter:drop-shadow(0 4px 12px rgba(0,0,0,0.5));transition:transform .3s var(--ease-elastic)}
.memory-card.matched .memory-card-back img{transform:scale(1.05)}
.memory-card.matched{pointer-events:none}
.memory-card.matched .memory-card-front,.memory-card.matched .memory-card-back{border-color:rgba(212,175,55,.3);box-shadow:0 0 20px rgba(212,175,55,.15)}
.memory-card.matched .memory-card-inner{animation:matchPop 0.4s ease-out}
@keyframes matchPop{0%{transform:rotateY(180deg) scale(1)}50%{transform:rotateY(180deg) scale(1.12)}100%{transform:rotateY(180deg) scale(1)}}

/* ═══════════ REACTION GAME (Professional) ═══════════ */
.reaction-zone{margin:20px auto 0;max-width:520px;height:320px;border-radius:var(--radius-xl);overflow:hidden;cursor:pointer;user-select:none;box-shadow:0 10px 40px rgba(0,0,0,.3)}
.reaction-inner{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(145deg,rgba(11,31,58,.8),rgba(10,10,10,.9));border:1px solid rgba(212,175,55,.08);border-radius:var(--radius-xl);transition:all .4s var(--ease-out)}
.reaction-inner.waiting{background:linear-gradient(145deg,#0B1F3A,#1C3D66);border-color:rgba(28,61,102,.4)}
.reaction-inner.ready{background:linear-gradient(145deg,#1b5e20,#2e7d32);border-color:rgba(76,175,80,.4);animation:readyPulse 0.5s ease-out;box-shadow:0 0 40px rgba(76,175,80,.2)}
.reaction-inner.result{background:linear-gradient(145deg,rgba(11,31,58,.8),rgba(10,10,10,.9));border-color:rgba(212,175,55,.15)}
.reaction-inner.too-early{background:linear-gradient(145deg,#b8961f,#8b6914);border-color:rgba(212,175,55,.3)}
@keyframes readyPulse{0%{transform:scale(1)}50%{transform:scale(1.02)}100%{transform:scale(1)}}
.reaction-icon{font-size:3.5rem;margin-bottom:20px;color:#fff;opacity:.9}
.reaction-text{font-family:var(--font-display);font-size:1.5rem;font-weight:700;color:#fff;letter-spacing:.5px}
.reaction-time-result{font-size:4.5rem;font-weight:900;color:var(--accent);font-family:var(--font-display);text-shadow:0 0 30px rgba(212,175,55,.3)}

/* ═══════════ FLOATING EMOJIS ═══════════ */
.floating-emoji{position:fixed;font-size:1.5rem;pointer-events:none;z-index:0;opacity:0.2;animation:emojiFloat linear infinite}
@keyframes emojiFloat{0%{transform:translateY(100vh) rotate(0deg);opacity:0}10%{opacity:0.2}90%{opacity:0.2}100%{transform:translateY(-10vh) rotate(360deg);opacity:0}}

/* ═══════════ CONFETTI BURST ═══════════ */
.confetti-piece{position:fixed;width:8px;height:8px;pointer-events:none;z-index:9999;border-radius:2px}
.confetti-piece.circle{border-radius:50%}
@keyframes confettiBurst{0%{transform:translate(0,0) rotate(0deg);opacity:1}100%{transform:translate(var(--x),var(--y)) rotate(720deg);opacity:0}}

/* ═══════════ NAV RESPONSIVE FOR 7 LINKS ═══════════ */
@media(max-width:1200px){.nav-center{gap:16px}.nav-link{font-size:11px;letter-spacing:0.8px}}
.mobile-menu.active .mm-link:nth-child(6){transition-delay:.25s}
.mobile-menu.active .mm-link:nth-child(7){transition-delay:.3s}

/* ═══════════════════════════════════════════════════════════
   EXTRA IDLE ANIMATIONS & EFFECTS (no mouse required)
   ═══════════════════════════════════════════════════════════ */

/* ─── 1. MORPHING GRADIENT BACKGROUND BLOBS ─── */
.morph-blob{position:fixed;border-radius:50%;filter:blur(120px);pointer-events:none;z-index:-1;opacity:0;animation:morphBlobIn 2s ease-out forwards}
.morph-blob-1{width:500px;height:500px;background:radial-gradient(circle,rgba(212,175,55,.12),transparent 70%);top:10%;left:-10%;animation:morphBlob1 18s ease-in-out infinite}
.morph-blob-2{width:400px;height:400px;background:radial-gradient(circle,rgba(77,141,255,.1),transparent 70%);bottom:5%;right:-5%;animation:morphBlob2 22s ease-in-out infinite}
.morph-blob-3{width:300px;height:300px;background:radial-gradient(circle,rgba(168,85,247,.08),transparent 70%);top:50%;left:50%;animation:morphBlob3 15s ease-in-out infinite}
@keyframes morphBlob1{0%,100%{transform:translate(0,0) scale(1);border-radius:50%}25%{transform:translate(80px,60px) scale(1.3);border-radius:40% 60% 70% 30%}50%{transform:translate(-40px,120px) scale(0.9);border-radius:60% 40% 30% 70%}75%{transform:translate(60px,-40px) scale(1.15);border-radius:30% 70% 50% 50%}}
@keyframes morphBlob2{0%,100%{transform:translate(0,0) scale(1);border-radius:50%}33%{transform:translate(-60px,-80px) scale(1.2);border-radius:70% 30% 50% 50%}66%{transform:translate(40px,60px) scale(0.85);border-radius:40% 60% 60% 40%}}
@keyframes morphBlob3{0%,100%{transform:translate(-50%,-50%) scale(1);border-radius:50%}50%{transform:translate(calc(-50% + 100px),calc(-50% - 80px)) scale(1.4);border-radius:60% 40% 50% 50%}}
@keyframes morphBlobIn{from{opacity:0}to{opacity:1}}

/* ─── 2. SPOTLIGHT SWEEP (JS-generated element) ─── */
.spotlight-sweep{position:absolute;top:0;left:-50%;width:80%;height:100%;background:linear-gradient(90deg,transparent,rgba(212,175,55,.02),transparent);transform:skewX(-15deg);animation:spotlightSweep 12s ease-in-out infinite;pointer-events:none;z-index:0}
@keyframes spotlightSweep{0%,100%{left:-50%;opacity:0}40%{opacity:1}50%{left:120%;opacity:1}60%{opacity:0}}

/* ─── 3. HOLOGRAPHIC SHINE ON PLAY CTA CARDS ─── */
.play-cta-card::after{content:'';position:absolute;top:0;left:-150%;width:100%;height:100%;background:linear-gradient(115deg,transparent 20%,rgba(255,255,255,0.08) 40%,rgba(255,255,255,0.12) 50%,rgba(255,255,255,0.08) 60%,transparent 80%);animation:holoShine 8s ease-in-out infinite;pointer-events:none;z-index:1}
@keyframes holoShine{0%,100%{left:-150%;opacity:0}45%{opacity:1}50%{left:150%;opacity:1}55%{opacity:0}}

/* ─── 4. GLITCH TEXT EFFECT FOR TITLES ─── */
.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%;pointer-events:none}
.glitch-text::before{animation:glitchSkew 8s infinite linear alternate-reverse;color:var(--accent);clip-path:inset(0 0 80% 0);opacity:0}
.glitch-text::after{animation:glitchSkew2 6s infinite linear alternate-reverse;color:var(--accent-blue);clip-path:inset(80% 0 0 0);opacity:0}
@keyframes glitchSkew{0%,90%{opacity:0;transform:translate(0)}92%{opacity:.4;transform:translate(-2px,1px)}94%{opacity:.3;transform:translate(2px,-1px)}96%{opacity:0;transform:translate(-1px,2px)}98%{opacity:.2;transform:translate(1px,-2px)}100%{opacity:0;transform:translate(0)}}
@keyframes glitchSkew2{0%,88%{opacity:0;transform:translate(0)}90%{opacity:.3;transform:translate(1px,2px)}93%{opacity:.2;transform:translate(-2px,-1px)}96%{opacity:0;transform:translate(2px,1px)}100%{opacity:0;transform:translate(0)}}

/* ─── 5. FLOATING GEOMETRIC SHAPES ─── */
.geo-shape{position:fixed;pointer-events:none;z-index:0;opacity:0}
.geo-shape svg{width:100%;height:100%}
@keyframes geoFloat{0%{transform:translate(0,0) rotate(0deg) scale(1);opacity:0}10%{opacity:.06}50%{transform:translate(var(--gx,30px),var(--gy,-60px)) rotate(180deg) scale(1.2);opacity:.08}90%{opacity:.04}100%{transform:translate(var(--gx2,-20px),var(--gy2,40px)) rotate(360deg) scale(0.8);opacity:0}}

/* ─── 6. STAGGERED ENTRANCE WITH SCALE ─── */
@keyframes popIn{0%{opacity:0;transform:translateY(40px) scale(0.9)}70%{transform:translateY(-5px) scale(1.02)}100%{opacity:1;transform:translateY(0) scale(1)}}
.pop-in{opacity:0;animation:popIn .8s var(--ease-elastic) forwards}
.pop-in-delay-1{animation-delay:.1s}
.pop-in-delay-2{animation-delay:.2s}
.pop-in-delay-3{animation-delay:.3s}
.pop-in-delay-4{animation-delay:.4s}

/* ─── 7. RAINBOW BORDER ON NAV-LOGO ─── */
.nav-logo::after{content:'';position:absolute;bottom:-6px;left:0;width:100%;height:2px;background:linear-gradient(90deg,var(--accent),var(--accent-orange),var(--accent-gold),var(--accent-emerald),var(--accent-blue),var(--accent-violet),var(--accent));background-size:300% auto;animation:rainbowSlide 4s linear infinite;border-radius:2px;opacity:0;transition:opacity .3s}
.nav.scrolled .nav-logo::after{opacity:1}
@keyframes rainbowSlide{0%{background-position:0% center}100%{background-position:300% center}}

/* ─── 8. SPARKLE DOTS (JS-generated) ─── */
.sparkle{position:fixed;width:4px;height:4px;border-radius:50%;pointer-events:none;z-index:1;opacity:0}
@keyframes sparkleAnim{0%{opacity:0;transform:scale(0)}20%{opacity:1;transform:scale(1)}80%{opacity:.8;transform:scale(1.2)}100%{opacity:0;transform:scale(0)}}

/* ─── 9. BREATHING FOOTER GLOW ─── */
.footer-glow{animation:footerGlowPulse 6s ease-in-out infinite}
@keyframes footerGlowPulse{0%,100%{opacity:.3;transform:scale(1) translateY(0)}50%{opacity:.6;transform:scale(1.1) translateY(-10px)}}

/* ─── 10. SCROLL-TRIGGERED COUNTER FLIP ─── */
@keyframes counterFlip{0%{transform:rotateX(-90deg);opacity:0}60%{transform:rotateX(10deg)}80%{transform:rotateX(-5deg)}100%{transform:rotateX(0);opacity:1}}
.counter-flip{display:inline-block;animation:counterFlip .6s var(--ease-out) forwards;transform-origin:bottom}

/* ─── 11. WAVE UNDERLINE ON LINKS ─── */
.wave-link{position:relative;display:inline-block}
.wave-link::after{content:'';position:absolute;bottom:-3px;left:0;width:100%;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:center;transition:transform .4s var(--ease-out)}
.wave-link:hover::after{transform:scaleX(1);animation:waveUnderline 1s ease-in-out infinite}
@keyframes waveUnderline{0%,100%{clip-path:polygon(0% 0%,4% 50%,8% 100%,12% 50%,16% 0%,20% 50%,24% 100%,28% 50%,32% 0%,36% 50%,40% 100%,44% 50%,48% 0%,52% 50%,56% 100%,60% 50%,64% 0%,68% 50%,72% 100%,76% 50%,80% 0%,84% 50%,88% 100%,92% 50%,96% 0%,100% 50%,100% 100%,0% 100%)}50%{clip-path:polygon(0% 50%,4% 100%,8% 50%,12% 0%,16% 50%,20% 100%,24% 50%,28% 0%,32% 50%,36% 100%,40% 50%,44% 0%,48% 50%,52% 100%,56% 50%,60% 0%,64% 50%,68% 100%,72% 50%,76% 0%,80% 50%,84% 100%,88% 50%,92% 0%,96% 50%,100% 100%,100% 100%,0% 100%)}}

/* ─── 12. ROTATING BORDER GRADIENT ON QUIZ/GAME STATS ─── */
.minigame-stat,.quiz-stat{position:relative}
.minigame-stat::before{content:'';position:absolute;inset:-1px;border-radius:var(--radius-md);background:conic-gradient(from var(--stat-angle,0deg),transparent,rgba(212,175,55,.3),transparent 40%);animation:statBorderSpin 6s linear infinite;-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;padding:1px;pointer-events:none}
@keyframes statBorderSpin{from{--stat-angle:0deg}to{--stat-angle:360deg}}

/* ─── 13. TYPING CARET BLINK ON HERO ─── */
@keyframes caretBlink{0%,50%{opacity:1}51%,100%{opacity:0}}
.typing-caret{display:inline-block;width:2px;height:1em;background:var(--accent);margin-left:4px;animation:caretBlink 1s step-end infinite;vertical-align:text-bottom}

/* ─── 14. RIPPLE WAVE ON SECTION ENTRIES ─── */
@keyframes sectionRipple{0%{transform:scale(0);opacity:.3}100%{transform:scale(4);opacity:0}}
.section-ripple{position:absolute;width:100px;height:100px;border-radius:50%;background:radial-gradient(circle,rgba(212,175,55,.08),transparent 70%);pointer-events:none;z-index:0}

/* ─── 15. GRADIENT TEXT COLOR CYCLING ─── */
.gradient-text-cycle{background:linear-gradient(135deg,var(--accent),var(--accent-orange),var(--accent-gold),var(--accent-emerald),var(--accent-blue),var(--accent-violet),var(--accent));background-size:400% auto;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:gradientCycle 8s linear infinite}
@keyframes gradientCycle{0%{background-position:0% center}100%{background-position:400% center}}

/* ─── 16. PULSING DOT GRID BACKGROUND ─── */
.dot-grid-bg{position:absolute;inset:0;pointer-events:none;z-index:0;background-image:radial-gradient(circle,rgba(212,175,55,.05) 1px,transparent 1px);background-size:40px 40px;animation:dotGridFade 6s ease-in-out infinite}
@keyframes dotGridFade{0%,100%{opacity:.3}50%{opacity:.8}}

/* ─── 17. NEON GLOW TEXT ─── */
.neon-glow{text-shadow:0 0 7px rgba(212,175,55,.6),0 0 10px rgba(212,175,55,.4),0 0 21px rgba(212,175,55,.3),0 0 42px rgba(212,175,55,.2);animation:neonFlicker 4s ease-in-out infinite}
@keyframes neonFlicker{0%,19%,21%,23%,25%,54%,56%,100%{text-shadow:0 0 7px rgba(212,175,55,.6),0 0 10px rgba(212,175,55,.4),0 0 21px rgba(212,175,55,.3),0 0 42px rgba(212,175,55,.2)}20%,24%,55%{text-shadow:none}}

/* ─── 18. CARD TILT ON APPEAR (via IntersectionObserver in JS) ─── */
@keyframes tiltAppear{0%{opacity:0;transform:perspective(800px) rotateY(-15deg) translateX(-30px) scale(0.95)}100%{opacity:1;transform:perspective(800px) rotateY(0) translateX(0) scale(1)}}
@keyframes tiltAppearRight{0%{opacity:0;transform:perspective(800px) rotateY(15deg) translateX(30px) scale(0.95)}100%{opacity:1;transform:perspective(800px) rotateY(0) translateX(0) scale(1)}}
.tilt-appear-left{animation:tiltAppear .8s var(--ease-out) forwards}
.tilt-appear-right{animation:tiltAppearRight .8s var(--ease-out) forwards}

/* ─── 19. AMBIENT LINE SCAN ─── */
.ambient-scan{position:fixed;top:0;left:0;width:100%;height:2px;background:linear-gradient(90deg,transparent,rgba(212,175,55,.15),rgba(77,141,255,.1),transparent);pointer-events:none;z-index:0;animation:ambientScan 8s linear infinite}
@keyframes ambientScan{0%{top:0;opacity:0}5%{opacity:1}95%{opacity:1}100%{top:100%;opacity:0}}

/* ─── 20. FLOATING BADGES/LABELS ─── */
@keyframes labelBounce{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-6px) rotate(2deg)}}
.product-badge{animation:labelBounce 3s ease-in-out infinite}
.product-badge.new{animation-delay:.5s}
.product-badge.limited{animation-delay:1s}

/* ─── 21. SECTION DIVIDER WAVE ─── */
.section-wave{position:relative}
.section-wave::after{content:'';position:absolute;bottom:-1px;left:0;width:100%;height:40px;background:var(--bg-primary);clip-path:polygon(0 60%,2% 55%,5% 50%,8% 48%,12% 50%,16% 55%,20% 58%,25% 55%,30% 50%,35% 48%,40% 52%,45% 58%,50% 60%,55% 58%,60% 52%,65% 48%,70% 50%,75% 55%,80% 58%,85% 55%,90% 50%,95% 48%,100% 55%,100% 100%,0 100%);z-index:2}

/* ─── 22. HERO PARALLAX LAYERS ─── */
@keyframes parallaxDrift{0%,100%{transform:translate(0,0)}25%{transform:translate(-15px,10px)}50%{transform:translate(10px,-15px)}75%{transform:translate(15px,5px)}}
.hero-content{animation:parallaxDrift 20s ease-in-out infinite}

/* ─── 23. SHIMMER SKELETON FOR LOADING STATES ─── */
@keyframes shimmerWave{0%{background-position:-200% 0}100%{background-position:200% 0}}

/* ─── 24. SCROLL INDICATOR BOUNCE ─── */
.hero-scroll{animation:fadeUp 1s var(--ease-out) forwards 2.5s,scrollBounce 2s ease-in-out infinite 3.5s}
@keyframes scrollBounce{0%,20%,50%,80%,100%{transform:translateX(-50%) translateY(0)}40%{transform:translateX(-50%) translateY(-12px)}60%{transform:translateX(-50%) translateY(-6px)}}

/* ═══════════ ENHANCED MINIGAME STYLES ═══════════ */
/* Basketball enhancements */
.difficulty-selector{display:flex;gap:8px;justify-content:center;margin-bottom:16px}
.diff-btn{padding:8px 20px;border:1px solid rgba(212,175,55,.15);border-radius:var(--radius-full);font-size:12px;font-weight:600;color:var(--text-secondary);background:transparent;cursor:pointer;transition:all .3s;font-family:var(--font-primary);text-transform:uppercase;letter-spacing:1px}
.diff-btn.active{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 4px 15px rgba(212,175,55,0.3)}
.diff-btn:hover{border-color:var(--accent);color:var(--accent)}
.wind-indicator{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:12px;font-size:13px;color:var(--text-muted)}
.wind-arrow{display:inline-flex;font-size:1.2rem;color:var(--accent);transition:transform .3s}
.score-popup{position:absolute;font-family:var(--font-display);font-weight:900;font-size:1.8rem;color:var(--accent);pointer-events:none;z-index:10;animation:scorePopup .8s ease-out forwards}
@keyframes scorePopup{0%{opacity:1;transform:translateY(0) scale(0.5)}50%{transform:translateY(-40px) scale(1.2)}100%{opacity:0;transform:translateY(-80px) scale(0.8)}}
.court-ball{font-size:2rem;display:flex;align-items:center;justify-content:center;background:none;box-shadow:none}
.court-ball::before,.court-ball::after{display:none}
.screen-shake{animation:screenShake .3s ease-out}
@keyframes screenShake{0%,100%{transform:translateX(0)}20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}
.golden-flash{animation:goldenFlash .5s ease-out}
@keyframes goldenFlash{0%{box-shadow:inset 0 0 60px rgba(212,175,55,0.4)}100%{box-shadow:none}}
.trajectory-preview{position:absolute;pointer-events:none;z-index:4}
.trajectory-dot{position:absolute;width:4px;height:4px;background:rgba(212,175,55,0.3);border-radius:50%}

/* Memory enhancements */
.memory-grid.easy{grid-template-columns:repeat(4,1fr);max-width:440px}
.memory-grid.normal{grid-template-columns:repeat(4,1fr);max-width:520px}
.memory-grid.hard{grid-template-columns:repeat(5,1fr);max-width:600px}
.hint-btn{padding:8px 18px;border:1px solid rgba(212,175,55,.15);border-radius:var(--radius-full);font-size:12px;font-weight:600;color:var(--accent);background:rgba(212,175,55,.08);cursor:pointer;transition:all .3s;font-family:var(--font-primary)}
.hint-btn:hover{background:rgba(212,175,55,.15);border-color:var(--accent)}
.hint-btn:disabled{opacity:.3;cursor:not-allowed}
.hint-count{font-size:11px;color:var(--text-muted);margin-left:4px}
.memory-card.hint-reveal .memory-card-inner{transform:rotateY(180deg);transition:transform 0.3s}
.match-burst{position:absolute;inset:0;pointer-events:none;z-index:10}
.match-particle{position:absolute;width:4px;height:4px;border-radius:50%;pointer-events:none;animation:matchParticleFly .6s ease-out forwards}
@keyframes matchParticleFly{0%{opacity:1;transform:translate(0,0) scale(1)}100%{opacity:0;transform:translate(var(--mx),var(--my)) scale(0)}}
.memory-score-display{text-align:center;font-family:var(--font-display);font-size:1.3rem;font-weight:800;color:var(--accent);margin-bottom:8px}

/* Reaction game enhancements */
.mode-selector{display:flex;gap:8px;justify-content:center;margin-bottom:16px;flex-wrap:wrap}
.mode-btn{padding:8px 20px;border:1px solid rgba(212,175,55,.15);border-radius:var(--radius-full);font-size:12px;font-weight:600;color:var(--text-secondary);background:transparent;cursor:pointer;transition:all .3s;font-family:var(--font-primary)}
.mode-btn.active{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 4px 15px rgba(212,175,55,0.3)}
.mode-btn:hover{border-color:var(--accent);color:var(--accent)}
.reaction-countdown{font-family:var(--font-display);font-size:5rem;font-weight:900;color:var(--accent);opacity:0;animation:countdownPop .5s ease-out forwards}
@keyframes countdownPop{0%{opacity:0;transform:scale(2)}50%{opacity:1;transform:scale(0.9)}100%{opacity:1;transform:scale(1)}}
.leaderboard{margin-top:16px;padding:12px;background:rgba(11,31,58,.3);border-radius:var(--radius-md);border:1px solid rgba(212,175,55,.06)}
.leaderboard-title{font-size:12px;color:var(--accent);text-transform:uppercase;letter-spacing:1px;margin-bottom:8px;font-weight:700}
.leaderboard-item{display:flex;justify-content:space-between;padding:4px 0;font-size:13px;color:var(--text-secondary)}
.leaderboard-item.best{color:var(--accent);font-weight:700}
.reaction-ripple{position:absolute;border-radius:50%;border:2px solid rgba(76,175,80,0.4);pointer-events:none;animation:reactionRipple .6s ease-out forwards}
@keyframes reactionRipple{0%{width:0;height:0;opacity:1}100%{width:200px;height:200px;margin:-100px;opacity:0}}
.streak-display{font-family:var(--font-display);font-size:1rem;font-weight:700;color:var(--accent);text-align:center;margin-top:8px;min-height:24px}
.sequence-colors{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:12px}
.seq-color-btn{width:60px;height:60px;border-radius:var(--radius-md);border:2px solid rgba(255,255,255,.1);cursor:pointer;transition:all .2s;opacity:.7}
.seq-color-btn:hover{opacity:1;transform:scale(1.08)}
.seq-color-btn.flash{opacity:1;transform:scale(1.15);box-shadow:0 0 20px currentColor}
.target-area{position:relative;width:100%;height:250px;background:rgba(11,31,58,.2);border-radius:var(--radius-md);border:1px solid rgba(212,175,55,.06);overflow:hidden;margin-top:12px}
.target-dot{position:absolute;width:40px;height:40px;border-radius:50%;background:var(--accent);cursor:pointer;transition:transform .15s;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;color:#fff;box-shadow:0 0 15px rgba(212,175,55,.4)}
.target-dot:hover{transform:scale(1.15)}

/* ═══════════ EXTRA EFFECTS & ANIMATIONS ═══════════ */

/* Magnetic hover on nav links */
.nav-link{position:relative;overflow:hidden}
.nav-link::before{content:'';position:absolute;bottom:0;left:50%;width:0;height:2px;background:var(--accent);transition:all .4s var(--ease-out);transform:translateX(-50%)}
.nav-link:hover::before{width:100%}

/* Glowing border on hover for game-select cards */
.game-select-card{position:relative;overflow:hidden}
.game-select-card::before{content:'';position:absolute;inset:-2px;background:conic-gradient(from var(--angle,0deg),transparent 60%,var(--accent) 100%);border-radius:inherit;z-index:-1;opacity:0;transition:opacity .5s}
.game-select-card:hover::before{opacity:1;animation:rotateBorder 3s linear infinite}
@keyframes rotateBorder{to{--angle:360deg}}
@property --angle{syntax:'<angle>';initial-value:0deg;inherits:false}

/* Text reveal animation */
.text-reveal{overflow:hidden;display:inline-block}
.text-reveal span{display:inline-block;transform:translateY(120%);transition:transform .8s var(--ease-out)}
.text-reveal.revealed span{transform:translateY(0)}

/* Staggered fade for children */
.stagger-fade > *{opacity:0;transform:translateY(30px);transition:opacity .6s var(--ease-out),transform .6s var(--ease-out)}
.stagger-fade.in-view > *:nth-child(1){transition-delay:.05s;opacity:1;transform:none}
.stagger-fade.in-view > *:nth-child(2){transition-delay:.12s;opacity:1;transform:none}
.stagger-fade.in-view > *:nth-child(3){transition-delay:.19s;opacity:1;transform:none}
.stagger-fade.in-view > *:nth-child(4){transition-delay:.26s;opacity:1;transform:none}
.stagger-fade.in-view > *:nth-child(5){transition-delay:.33s;opacity:1;transform:none}
.stagger-fade.in-view > *:nth-child(6){transition-delay:.40s;opacity:1;transform:none}

/* Floating animation for hero elements */
@keyframes floatGentle{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.float-anim{animation:floatGentle 4s ease-in-out infinite}
.float-anim-delayed{animation:floatGentle 4s ease-in-out infinite 1s}

/* Glow pulse on accent elements */
@keyframes glowPulse{0%,100%{box-shadow:0 0 5px rgba(212,175,55,.2)}50%{box-shadow:0 0 25px rgba(212,175,55,.4),0 0 50px rgba(212,175,55,.15)}}
.btn:hover,.shop-btn:hover{animation:glowPulse 2s ease-in-out infinite}

/* Parallax tilt card effect */
.tilt-card{transition:transform .3s var(--ease-smooth);transform-style:preserve-3d}
.tilt-card:hover{transform:perspective(800px) rotateY(5deg) rotateX(-3deg) scale(1.02)}

/* Smooth scale on image hover */
.gallery-item img,.dual-image img{transition:transform .8s var(--ease-out),filter .8s}
.gallery-item:hover img,.dual-image:hover img{transform:scale(1.08);filter:brightness(1.1)}

/* Scrollbar styling */
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:var(--bg-primary)}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--accent),var(--accent-dark));border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--accent-light)}

/* Typewriter cursor for preloader text */
.preloader-tagline{border-right:2px solid var(--accent);animation:blinkCaret .8s step-end infinite}
@keyframes blinkCaret{50%{border-color:transparent}}

/* Section header underline animation */
.section-header .title-lg{position:relative;display:inline-block}
.section-header .title-lg::after{content:'';position:absolute;bottom:-8px;left:0;width:0;height:3px;background:var(--gradient-main);border-radius:2px;transition:width .8s var(--ease-out)}
.section-header.in-view .title-lg::after{width:60px}

/* Card shine sweep on hover */
.minigame-card::after,.game-select-card::after{content:'';position:absolute;top:0;left:-100%;width:50%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.04),transparent);transition:left .6s;pointer-events:none;z-index:2}
.minigame-card:hover::after,.game-select-card:hover::after{left:150%}

/* Smooth page scroll */
html{scroll-behavior:smooth}

/* Focus visible outlines for accessibility */
*:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

/* ═══════════════════════════════════════════════════════════
   UNIQUE VISUAL EFFECTS
   ═══════════════════════════════════════════════════════════ */

/* ─── Custom Cursor Glow ─── */
.cursor-glow{position:fixed;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,rgba(212,175,55,0.07) 0%,transparent 70%);pointer-events:none;z-index:99991;transform:translate(-50%,-50%);transition:opacity .3s;mix-blend-mode:screen}

/* ─── Reveal on scroll with blur ─── */
.blur-reveal{filter:blur(8px);opacity:0.5;transition:filter 1s var(--ease-out),opacity 1s var(--ease-out)}
.blur-reveal.in-view{filter:blur(0);opacity:1}

/* ─── Glow divider between sections ─── */
.glow-divider{width:100%;height:1px;background:linear-gradient(90deg,transparent 10%,rgba(212,175,55,0.3) 50%,transparent 90%);margin:0;position:relative}
.glow-divider::after{content:'';position:absolute;top:-10px;left:50%;transform:translateX(-50%);width:80px;height:20px;background:radial-gradient(ellipse,rgba(212,175,55,0.15),transparent);filter:blur(5px)}

/* ─── Floating badge effect ─── */
.float-badge{animation:floatBadge 3s ease-in-out infinite}
@keyframes floatBadge{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

/* ─── Text highlight on hover ─── */
.text-body strong{position:relative;z-index:1}
.text-body strong::after{content:'';position:absolute;bottom:0;left:-2px;right:-2px;height:40%;background:rgba(212,175,55,0.15);z-index:-1;border-radius:2px;transition:height .3s var(--ease-out)}
.text-body strong:hover::after{height:100%}

/* ═══════════════════════════════════════════════════════════
   LAYOUT & COMPOSITION FIXES
   ═══════════════════════════════════════════════════════════ */

/* ─── Smooth section transitions ─── */
.section + .section{margin-top:-1px}
.section:not(:first-of-type){border-top:1px solid rgba(212,175,55,0.03)}

/* ─── Gallery masonry overflow fix ─── */
.gallery-masonry{overflow:hidden}

/* ═══════════════════════════════════════════════════════════
   SNEAKER CATCHER GAME
   ═══════════════════════════════════════════════════════════ */
.catcher-arena{position:relative;width:100%;height:400px;background:linear-gradient(180deg,rgba(10,10,10,.3),rgba(10,10,10,.6));border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--glass-border);margin:20px 0;touch-action:none;user-select:none}
.catcher-basket{position:absolute;bottom:10px;width:80px;height:40px;background:var(--accent);border-radius:var(--radius-md) var(--radius-md) 0 0;display:flex;align-items:center;justify-content:center;font-size:1.5rem;transition:left .05s linear;box-shadow:0 0 20px rgba(212,175,55,.3)}
.falling-item{position:absolute;font-size:2rem;transition:none;pointer-events:none;filter:drop-shadow(0 2px 4px rgba(0,0,0,.5))}
.catcher-timer{position:absolute;top:10px;right:10px;font-family:var(--font-display);font-size:1.2rem;font-weight:700;color:var(--accent);background:rgba(0,0,0,.5);padding:6px 14px;border-radius:var(--radius-full)}
.catcher-score{position:absolute;top:10px;left:10px;font-family:var(--font-display);font-size:1.2rem;font-weight:700;color:var(--text-primary);background:rgba(0,0,0,.5);padding:6px 14px;border-radius:var(--radius-full)}
.catcher-combo{position:absolute;top:50px;left:10px;font-size:.9rem;color:var(--accent-light);background:rgba(0,0,0,.5);padding:4px 12px;border-radius:var(--radius-full);opacity:0;transition:opacity .3s}
.catcher-combo.active{opacity:1}
.catch-effect{position:absolute;font-size:1.2rem;font-weight:700;pointer-events:none;animation:catchFloat 1s ease-out forwards}
@keyframes catchFloat{0%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(-40px) scale(1.3)}}

/* ─── Shot angle wrap ─── */
.shot-angle-wrap{display:flex;align-items:center;gap:12px;padding:8px 20px;font-size:13px;color:var(--text-secondary)}
.shot-angle-bar{position:relative;width:100%;height:12px;background:rgba(255,255,255,.06);border-radius:6px;overflow:hidden}
.shot-angle-indicator{position:absolute;top:0;left:50%;width:4px;height:100%;background:var(--accent);border-radius:2px;transition:left .05s}
.shot-angle-sweet{position:absolute;top:0;height:100%;background:rgba(76,175,80,.2);border-radius:6px}
.shot-power-sweet{position:absolute;top:0;height:100%;background:rgba(76,175,80,.2);border-radius:6px}

/* ─── Memory combo ─── */
.memory-combo{text-align:center;font-family:var(--font-display);font-size:1.1rem;font-weight:700;color:var(--accent-light);margin:8px 0;opacity:0;transition:opacity .3s,transform .3s}
.memory-combo.active{opacity:1;transform:scale(1.1)}

/* ═══ PERFORMANCE OPTIMIZATIONS ═══ */
@media(prefers-reduced-motion:reduce){
    .ambient-particle,.ember-spark,.sparkle,.geo-shape,.floating-emoji,.morph-blob,.preloader-particle,.aurora-orb,.preloader-ring,.preloader-pulse,.preloader-dots-ring,.grain-overlay,.spotlight-sweep,.ambient-scan,.dot-grid-bg{display:none !important}
    *{animation-duration:0.01ms !important;transition-duration:0.01ms !important}
}
.section{content-visibility:auto;contain-intrinsic-size:auto 800px}
.footer{content-visibility:auto;contain-intrinsic-size:auto 400px}
img{content-visibility:auto}

/* ═══ GAME/QUIZ INITIAL HIDDEN STATE ═══ */
.game-container{display:none}
.quiz-play-section{display:none}
.game-hidden{display:none}
.hint-btn-wrap{text-align:center;margin-bottom:12px}
.catcher-start-btn{margin-top:12px}

/* ═══════════ RESPONSIVE FIXES ═══════════ */

/* Memory grid adapts to difficulty */
.memory-grid.difficulty-easy{grid-template-columns:repeat(4,1fr);max-width:440px}
.memory-grid.difficulty-normal{grid-template-columns:repeat(4,1fr);max-width:520px}
.memory-grid.difficulty-hard{grid-template-columns:repeat(5,1fr);max-width:600px}

/* Touch-friendly: larger tap targets for games */
@media(pointer:coarse){
    .memory-card{min-height:80px}
    .memory-card:hover{transform:none}
    .product-quick-add{opacity:1;transform:translateY(0)}
    .product-compare-btn{opacity:1;transform:scale(1)}
    .fab-mini,.fab-btn{width:52px;height:52px}
    .quiz-option{padding:16px 20px;font-size:1rem}
    .diff-btn{padding:12px 20px}
    .game-select-card{padding:36px 24px}
    .game-select-card:hover{transform:none}
    .catcher-basket{width:100px;height:50px}
}

/* Small screens */
@media(max-width:600px){
    .memory-grid.difficulty-easy{grid-template-columns:repeat(3,1fr);max-width:320px}
    .memory-grid.difficulty-normal{grid-template-columns:repeat(4,1fr);max-width:360px}
    .memory-grid.difficulty-hard{grid-template-columns:repeat(4,1fr);max-width:400px}
    .memory-card-back img{width:70%;height:50%}
    .memory-card-back span{font-size:.45rem !important}
    .catcher-arena{height:300px}
    .basket-court{height:280px}
    .pm-grid{grid-template-columns:1fr}
    .pm-main-img{height:250px}
    .features-grid{grid-template-columns:repeat(2,1fr)}
    .contatti-info-grid{grid-template-columns:1fr 1fr}
    .jordan-hero-stats{grid-template-columns:repeat(2,1fr)}
    .impact-grid{grid-template-columns:repeat(2,1fr)}
    .bio-grid{grid-template-columns:1fr}
    .storia-grid{grid-template-columns:1fr}
    .storia-grid.reverse{direction:ltr}
    .shoe-evolution-grid{grid-template-columns:1fr}
    .theme-toggle{right:10px;width:38px;height:38px;font-size:14px}
    .section-indicator{display:none}
    .scroll-percent{display:none}
    .fab-container{bottom:16px;left:16px}
}

/* Catcher game items CSS animation */
.catcher-item{position:absolute;top:-40px;font-size:2rem;pointer-events:none;z-index:2;animation:catcherFall linear forwards}
@keyframes catcherFall{0%{top:-40px;opacity:1}90%{opacity:1}100%{top:calc(100% + 40px);opacity:0}}
.catcher-item.caught{animation:catcherCatch .3s ease-out forwards}
@keyframes catcherCatch{0%{transform:scale(1);opacity:1}100%{transform:scale(0);opacity:0}}
.catcher-item.bomb-hit{animation:catcherBomb .3s ease-out forwards}
@keyframes catcherBomb{0%{transform:scale(1);opacity:1}50%{transform:scale(1.5);opacity:.5}100%{transform:scale(0);opacity:0}}
.catcher-point-popup{position:absolute;font-family:var(--font-display);font-size:1rem;font-weight:700;color:var(--accent);pointer-events:none;z-index:10;animation:pointFloat .8s ease-out forwards}
.catcher-point-popup.negative{color:#ff4444}
@keyframes pointFloat{0%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(-40px) scale(1.3)}}
.catcher-flash{position:absolute;inset:0;background:rgba(255,0,0,0.15);pointer-events:none;z-index:5;animation:flashFade .4s ease-out forwards}
@keyframes flashFade{0%{opacity:1}100%{opacity:0}}

/* Score popup for basketball */
.score-popup{position:absolute;top:40%;left:50%;transform:translateX(-50%);font-family:var(--font-display);font-size:1.5rem;font-weight:900;color:var(--accent);z-index:10;pointer-events:none;animation:scorePopFloat .8s ease-out forwards}
@keyframes scorePopFloat{0%{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}100%{opacity:0;transform:translateX(-50%) translateY(-30px) scale(1.4)}}

/* Basketball court shake */
.basket-court.shake{animation:courtShake .4s ease-out}
@keyframes courtShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}50%{transform:translateX(6px)}75%{transform:translateX(-3px)}}

/* Match particle effect for memory */
.match-particle{position:absolute;width:6px;height:6px;border-radius:50%;pointer-events:none;z-index:10;animation:matchParticleFly .8s ease-out forwards}
@keyframes matchParticleFly{0%{transform:translate(0,0) scale(1);opacity:1}100%{transform:translate(var(--px),var(--py)) scale(0);opacity:0}}

/* Memory hint flash */
.memory-card.hint-flash .memory-card-inner{transform:rotateY(180deg);transition:transform .2s}

/* Notif badge */
.notif-btn-relative{position:relative}
.notif-badge{position:absolute;top:-2px;right:-2px;width:16px;height:16px;background:var(--accent);border-radius:50%;font-size:9px;font-weight:700;display:flex;align-items:center;justify-content:center;color:#fff}

/* Toast animation */
.toast{position:fixed;bottom:-80px;left:50%;transform:translateX(-50%);z-index:99999;background:rgba(10,10,10,0.95);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid var(--glass-border-strong);border-radius:var(--radius-xl);padding:14px 28px;transition:bottom .5s var(--ease-elastic);box-shadow:0 10px 40px rgba(0,0,0,0.5)}
.toast.show{bottom:30px}
.toast-inner{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:500;white-space:nowrap}
.toast-inner i{color:var(--accent)}

/* Cookie banner */
.cookie-banner{position:fixed;bottom:-200px;left:50%;transform:translateX(-50%);z-index:99999;background:rgba(10,10,10,0.95);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid var(--glass-border-strong);border-radius:var(--radius-xl);padding:20px 28px;display:flex;align-items:center;gap:16px;transition:bottom .5s var(--ease-elastic);box-shadow:0 10px 40px rgba(0,0,0,0.5);max-width:90vw}
.cookie-banner.show{bottom:30px}
.cookie-banner p{font-size:13px;color:var(--text-secondary)}
.cookie-banner a{color:var(--accent)}
.cookie-btn{padding:8px 18px;border-radius:var(--radius-full);font-size:13px;font-weight:600;cursor:pointer;border:none;transition:all .3s}
.cookie-accept{background:var(--accent);color:#fff}
.cookie-decline{background:var(--glass-bg-strong);color:var(--text-secondary);border:1px solid var(--glass-border)}

/* Notification panel */
.notif-panel{position:fixed;top:-400px;right:20px;width:340px;max-width:90vw;z-index:1001;background:rgba(10,10,10,0.97);-webkit-backdrop-filter:blur(30px);backdrop-filter:blur(30px);border:1px solid var(--glass-border-strong);border-radius:var(--radius-xl);padding:20px;transition:top .5s var(--ease-elastic);box-shadow:0 20px 60px rgba(0,0,0,0.5)}
.notif-panel.open{top:80px}
.notif-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--glass-border)}
.notif-header h4{font-size:14px;display:flex;align-items:center;gap:8px}
.notif-header h4 i{color:var(--accent)}
.notif-close-btn{width:28px;height:28px;border-radius:50%;border:1px solid var(--glass-border);color:var(--text-secondary);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:11px;transition:all .2s}
.notif-close-btn:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.notif-item{padding:12px;border-radius:var(--radius-md);margin-bottom:8px;background:var(--glass-bg);border:1px solid var(--glass-border);font-size:13px;color:var(--text-secondary);line-height:1.5}
.notif-item strong{color:var(--text-primary)}
.notif-item .notif-time{display:block;font-size:11px;color:var(--text-muted);margin-top:4px}

/* Light mode specific fixes */
body.light-mode .glass-card{border-color:rgba(0,0,0,0.08);box-shadow:0 4px 20px rgba(0,0,0,0.06)}
body.light-mode .memory-card-front{background:linear-gradient(145deg,#e8e8e2,#f0f0ea)}
body.light-mode .memory-card-back{background:linear-gradient(145deg,#ffffff,#f5f5f0)}
body.light-mode .toast,.body.light-mode .cookie-banner,.body.light-mode .notif-panel{background:rgba(255,255,255,0.95);border-color:rgba(0,0,0,0.08)}
body.light-mode .game-select-card,.body.light-mode .quiz-topic-card{background:linear-gradient(145deg,#ffffff,#f5f5f0);border-color:rgba(0,0,0,0.06)}