/* SHADOW PICKS — Visual Layer (65 features) */

/* B. HERO ANIMATED */
.hero-words { display:inline-block; }
.hero-word { display:inline-block; opacity:0; transform:translateY(20px); animation:heroWord 0.7s var(--picks-ease) forwards; }
.hero-word:nth-child(1){animation-delay:.1s} .hero-word:nth-child(2){animation-delay:.25s} .hero-word:nth-child(3){animation-delay:.4s}
.hero-word:nth-child(4){animation-delay:.55s} .hero-word:nth-child(5){animation-delay:.7s} .hero-word:nth-child(6){animation-delay:.85s}
.hero-word.glitch { position:relative; }
.hero-word.glitch::before, .hero-word.glitch::after { content:attr(data-text); position:absolute; top:0; left:0; opacity:0; }
.hero-word.glitch::before { color:#0ff; transform:translate(-2px,0); }
.hero-word.glitch::after  { color:#f06; transform:translate(2px,0); }
.hero-word.glitch:hover::before, .hero-word.glitch:hover::after { opacity:.65; animation:glitchShift .3s steps(4) infinite; }
@keyframes heroWord { to { opacity:1; transform:translateY(0); } }
@keyframes glitchShift { 0%{transform:translate(-2px,0)} 25%{transform:translate(2px,-1px)} 50%{transform:translate(-1px,1px)} 75%{transform:translate(2px,0)} 100%{transform:translate(-2px,0)} }

.marquee { overflow:hidden; padding:14px 0; border-top:1px solid var(--picks-border-soft); border-bottom:1px solid var(--picks-border-soft); background:linear-gradient(90deg,transparent,rgba(174,0,0,0.04),transparent); position:relative; }
.marquee::before, .marquee::after { content:''; position:absolute; top:0; bottom:0; width:80px; z-index:2; pointer-events:none; }
.marquee::before { left:0; background:linear-gradient(90deg,var(--picks-bg),transparent); }
.marquee::after  { right:0; background:linear-gradient(90deg,transparent,var(--picks-bg)); }
.marquee-track { display:inline-flex; gap:48px; white-space:nowrap; animation:marqueeRoll 30s linear infinite; }
.marquee-item { font-family:'Benzin',sans-serif; font-weight:700; font-size:13px; letter-spacing:0.2em; text-transform:uppercase; color:var(--picks-text-soft); display:inline-flex; align-items:center; gap:16px; }
.marquee-item .sep { color:var(--picks-red); font-size:10px; }
.marquee-item strong { color:var(--picks-gold); }
@keyframes marqueeRoll { from{transform:translateX(0)} to{transform:translateX(-50%)} }

.badge-dont-buy { position:relative; animation:dontBuyGlitch 6s steps(1) infinite; }
@keyframes dontBuyGlitch { 0%,92%,100%{transform:translate(0); filter:none} 93%{transform:translate(-1px,0); filter:hue-rotate(15deg)} 94%{transform:translate(1px,0)} 95%{transform:translate(0,-1px)} 96%{transform:translate(0,1px)} 97%{transform:translate(0)} }

.proof-stat .num { transition:transform .25s var(--picks-ease); }
.proof-stat:hover .num { transform:scale(1.1); }

.product-card { transform-style:preserve-3d; will-change:transform; transition:transform .45s var(--picks-ease), border-color .35s, box-shadow .35s; }
.product-card.tilt { transition:transform .1s linear; }
.product-card .media img { transition:transform .6s var(--picks-ease); }
.product-card:hover .media img { transform:scale(1.06) translateZ(20px); }
.product-card:hover { box-shadow:0 30px 60px -20px rgba(0,0,0,0.7), 0 0 60px -10px rgba(174,0,0,0.25); }

.btn-primary { position:relative; overflow:hidden; }
.btn-primary::after { content:'→'; position:absolute; right:16px; opacity:0; transition:all .3s var(--picks-ease); }
.btn-primary:hover { padding-right:40px; }
.btn-primary:hover::after { opacity:1; right:14px; }
.btn-primary::before { content:''; position:absolute; inset:0; background:rgba(255,255,255,0.15); transform:translateX(-100%) skewX(-20deg); transition:transform .4s var(--picks-ease); }
.btn-primary:hover::before { transform:translateX(0) skewX(-20deg); }

.wish-btn.active { animation:wishPop .5s var(--picks-ease); }
@keyframes wishPop { 0%{transform:scale(1)} 30%{transform:scale(1.2)} 60%{transform:scale(.92)} 100%{transform:scale(1)} }

.tier-label { animation:tierBreath 4s ease-in-out infinite; }
.tier-row:nth-child(2) .tier-label { animation-delay:.5s }
.tier-row:nth-child(3) .tier-label { animation-delay:1s }
.tier-row:nth-child(4) .tier-label { animation-delay:1.5s }
.tier-row:nth-child(5) .tier-label { animation-delay:2s }
.tier-row:nth-child(6) .tier-label { animation-delay:2.5s }
@keyframes tierBreath { 0%,100%{opacity:1} 50%{opacity:.92} }

.score-circle { position:relative; }
.field { position:relative; }
.field::after { content:''; position:absolute; left:0; bottom:0; width:0; height:2px; background:var(--picks-gold); transition:width .4s var(--picks-ease); }
.field:focus-within::after { width:100%; }

.toast.show { animation:toastBounce .5s var(--picks-ease); }
@keyframes toastBounce { 0%{transform:translateX(-50%) translateY(40px); opacity:0} 60%{transform:translateX(-50%) translateY(-8px); opacity:1} 100%{transform:translateX(-50%) translateY(0); opacity:1} }

.badges .badge { opacity:0; animation:badgeIn .5s var(--picks-ease) forwards; }
.badges .badge:nth-child(1){animation-delay:.1s} .badges .badge:nth-child(2){animation-delay:.25s} .badges .badge:nth-child(3){animation-delay:.4s} .badges .badge:nth-child(4){animation-delay:.55s}
@keyframes badgeIn { from{opacity:0; transform:scale(.7)} to{opacity:1; transform:scale(1)} }

/* D. Atmospheres */
.picks-hero::after { content:''; position:absolute; inset:0; pointer-events:none; opacity:.4; background-image: radial-gradient(1px 1px at 20% 30%, rgba(205,168,92,.8), transparent 50%), radial-gradient(1px 1px at 60% 70%, rgba(205,168,92,.6), transparent 50%), radial-gradient(2px 2px at 80% 20%, rgba(205,168,92,.5), transparent 50%), radial-gradient(1px 1px at 35% 80%, rgba(205,168,92,.7), transparent 50%), radial-gradient(1px 1px at 90% 50%, rgba(205,168,92,.5), transparent 50%), radial-gradient(2px 2px at 10% 90%, rgba(205,168,92,.6), transparent 50%), radial-gradient(1px 1px at 50% 10%, rgba(205,168,92,.4), transparent 50%); background-size:600px 600px; animation:drift 60s linear infinite; }
@keyframes drift { from{background-position:0 0} to{background-position:600px -300px} }

body.picks::after { content:''; position:fixed; inset:0; pointer-events:none; z-index:99; opacity:.04; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.8'/></svg>"); mix-blend-mode:overlay; }

.picks-hero { box-shadow:inset 0 0 200px 0 rgba(0,0,0,.8); }

.section.aurora { position:relative; overflow:hidden; }
.section.aurora::before { content:''; position:absolute; inset:-20%; pointer-events:none; background:radial-gradient(circle at 50% 50%, rgba(205,168,92,.12), transparent 60%); animation:aurora 8s ease-in-out infinite; }
@keyframes aurora { 0%,100%{opacity:.4; transform:scale(1)} 50%{opacity:.9; transform:scale(1.1)} }

.fog-bottom { position:relative; }
.fog-bottom::after { content:''; position:absolute; bottom:0; left:0; right:0; height:120px; pointer-events:none; background:linear-gradient(to top, rgba(6,6,6,.95), transparent); z-index:1; }

body.picks.crt::before { content:''; position:fixed; inset:0; pointer-events:none; z-index:99; opacity:.05; background:repeating-linear-gradient(to bottom, transparent 0, transparent 3px, rgba(255,255,255,.5) 3px, rgba(255,255,255,.5) 4px); }

@keyframes lightning { 0%,96%,100%{background:transparent} 97%{background:rgba(174,0,0,.15)} 98%{background:transparent} 99%{background:rgba(174,0,0,.1)} }

/* E. Signatures */
.brand-svg { display:inline-block; vertical-align:middle; margin-right:8px; }
.brand-svg .stroke { stroke-dasharray:200; stroke-dashoffset:200; animation:drawStroke 1.5s var(--picks-ease) forwards; }
@keyframes drawStroke { to { stroke-dashoffset:0 } }

.btn-seal { clip-path:polygon(0 14px, 14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px)); border-radius:0; padding:16px 32px; background:var(--picks-gold); color:#000; font-family:'Benzin',sans-serif; font-weight:900; letter-spacing:.1em; }
.btn-seal:hover { background:var(--picks-gold-light); transform:scale(1.03); }

.setup-tile.polaroid:nth-child(odd){transform:rotate(-1.5deg)} .setup-tile.polaroid:nth-child(even){transform:rotate(1.5deg)} .setup-tile.polaroid:nth-child(3n){transform:rotate(-0.8deg)}
.setup-tile.polaroid { transition:transform .4s var(--picks-ease); border:8px solid #fff; border-bottom-width:38px; box-shadow:0 8px 30px rgba(0,0,0,.5); }
.setup-tile.polaroid:hover { transform:rotate(0) scale(1.04); }

.mascot-corner { position:fixed; bottom:24px; left:24px; width:60px; height:60px; z-index:80; opacity:.4; transition:opacity .3s; pointer-events:none; }
.mascot-corner:hover { opacity:1; }
@media (max-width:720px) { .mascot-corner { display:none; } }

.sigil-corner { position:absolute; top:30px; right:30px; width:40px; height:40px; opacity:.25; pointer-events:none; }

/* F. Data viz */
.radar-chart { width:100%; max-width:320px; aspect-ratio:1; margin:24px auto; }
.radar-chart svg { width:100%; height:100%; }
.radar-chart .axis { stroke:var(--picks-border); stroke-width:1; fill:none; }
.radar-chart .grid { stroke:var(--picks-border-soft); fill:none; }
.radar-chart .data { fill:rgba(205,168,92,.25); stroke:var(--picks-gold); stroke-width:2; }
.radar-chart .point { fill:var(--picks-gold); }
.radar-chart .label { fill:var(--picks-text-soft); font-size:10px; font-family:'Benzin',sans-serif; text-transform:uppercase; letter-spacing:.1em; }

.bar-chart-row { display:grid; grid-template-columns:140px 1fr 60px; gap:14px; align-items:center; margin:12px 0; font-size:12px; }
.bar-chart-row .name { color:var(--picks-text-soft); }
.bar-chart-row .bar { height:22px; background:var(--picks-border-soft); border-radius:4px; overflow:hidden; position:relative; }
.bar-chart-row .bar-fill { height:100%; background:linear-gradient(90deg,var(--picks-red),var(--picks-gold)); transform:scaleX(0); transform-origin:left; animation:barGrow 1.4s var(--picks-ease) forwards; }
@keyframes barGrow { to{transform:scaleX(1)} }
.bar-chart-row .val { font-family:'Benzin',sans-serif; color:var(--picks-gold); text-align:right; font-weight:700; }

.sparkline { display:inline-block; width:80px; height:24px; vertical-align:middle; margin-left:8px; }
.sparkline path { fill:none; stroke:var(--picks-gold); stroke-width:1.5; }
.sparkline .area { fill:rgba(205,168,92,.15); stroke:none; }

/* G. Video */
.hero-video-bg { position:absolute; inset:0; overflow:hidden; z-index:0; }
.hero-video-bg video, .hero-video-bg .placeholder { width:100%; height:100%; object-fit:cover; opacity:.35; filter:grayscale(50%) contrast(1.1); }
.hero-video-bg::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg, transparent 0%, var(--picks-bg) 80%); }
.picks-hero.has-video .picks-hero-inner { position:relative; z-index:2; }

.pip-player { position:fixed; bottom:90px; right:20px; width:200px; aspect-ratio:9/16; border-radius:12px; overflow:hidden; box-shadow:0 20px 40px rgba(0,0,0,.6); z-index:150; cursor:move; display:none; border:1px solid var(--picks-border); }
.pip-player.open { display:block; animation:pipIn .4s var(--picks-ease); }
@keyframes pipIn { from{transform:translateY(40px) scale(.8); opacity:0} to{transform:translateY(0) scale(1); opacity:1} }
.pip-player video, .pip-player iframe { width:100%; height:100%; }
.pip-close { position:absolute; top:6px; right:6px; width:24px; height:24px; background:rgba(0,0,0,.8); border-radius:50%; color:#fff; font-size:14px; display:flex; align-items:center; justify-content:center; cursor:pointer; }

.tt-embed, .yt-embed { position:relative; padding-bottom:177%; height:0; overflow:hidden; border-radius:12px; background:#000; max-width:360px; margin:0 auto; }
.yt-embed { padding-bottom:56.25%; max-width:720px; }
.tt-embed iframe, .yt-embed iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }

/* H. Typo */
.bg-mega { position:relative; }
.bg-mega::before { content:attr(data-bg); position:absolute; left:0; right:0; top:50%; transform:translateY(-50%); font-family:'Benzin',sans-serif; font-weight:900; font-size:clamp(80px,18vw,280px); color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.05); text-stroke:1px rgba(255,255,255,.05); text-transform:uppercase; letter-spacing:-0.04em; pointer-events:none; z-index:0; white-space:nowrap; text-align:center; opacity:.5; }
.bg-mega > * { position:relative; z-index:1; }

.grad-rg { background:linear-gradient(90deg, var(--picks-red), var(--picks-gold)); -webkit-background-clip:text; background-clip:text; color:transparent; }

.huge-quote { font-family:'Benzin',sans-serif; font-weight:900; font-size:clamp(40px,9vw,140px); line-height:.9; letter-spacing:-0.03em; text-transform:uppercase; padding:60px 0; }
.huge-quote .author { display:block; font-size:.18em; letter-spacing:.3em; margin-top:24px; color:var(--picks-gold); font-weight:600; }

.stretch-hover { transition:letter-spacing .5s var(--picks-ease); }
.stretch-hover:hover { letter-spacing:.02em; }

/* I. Mobile */
.bottom-sheet { position:fixed; left:0; right:0; bottom:0; z-index:250; background:var(--picks-card); border-top-left-radius:22px; border-top-right-radius:22px; padding:24px; transform:translateY(100%); transition:transform .45s var(--picks-ease); box-shadow:0 -10px 40px rgba(0,0,0,.4); max-height:80vh; overflow-y:auto; }
.bottom-sheet.open { transform:translateY(0); }
.bottom-sheet::before { content:''; display:block; width:40px; height:4px; background:var(--picks-border); border-radius:2px; margin:0 auto 16px; }

@media (max-width:760px) {
  .product-detail .buy-cta { position:sticky; bottom:0; margin:0 -24px; background:linear-gradient(180deg, rgba(6,6,6,.85), rgba(6,6,6,.95)); backdrop-filter:blur(20px); border-radius:0; border-top:1px solid var(--picks-border); padding:18px 24px; z-index:50; }
}

/* J. Transitions */
.page-trans { position:fixed; inset:0; background:var(--picks-bg); z-index:999; opacity:0; pointer-events:none; transition:opacity .3s; display:flex; align-items:center; justify-content:center; }
.page-trans.in { opacity:1; pointer-events:all; }
.page-trans .mini-logo { width:60px; height:60px; opacity:.6; }

.cine-loader { position:fixed; inset:0; background:#000; z-index:9999; display:flex; flex-direction:column; align-items:center; justify-content:center; transition:opacity .6s, visibility .6s; }
.cine-loader.hidden { opacity:0; visibility:hidden; pointer-events:none; }
.cine-loader .cine-logo { width:240px; max-width:60vw; margin-bottom:24px; }
.cine-loader .cine-bar { width:200px; height:2px; background:rgba(255,255,255,.1); overflow:hidden; }
.cine-loader .cine-bar-fill { height:100%; background:linear-gradient(90deg,var(--picks-red),var(--picks-gold)); width:0; animation:cineFill 1.4s var(--picks-ease) forwards; }
@keyframes cineFill { to { width:100% } }
.cine-loader .cine-tag { margin-top:14px; font-family:'Benzin',sans-serif; font-size:11px; letter-spacing:.3em; color:var(--picks-text-dim); text-transform:uppercase; }

.skel { background:linear-gradient(90deg, var(--picks-card) 0%, var(--picks-card-hover) 50%, var(--picks-card) 100%); background-size:200% 100%; animation:skelShine 1.4s linear infinite; border-radius:4px; }
@keyframes skelShine { from{background-position:200% 0} to{background-position:-200% 0} }
.skel-card { padding:22px; background:var(--picks-card); border:1px solid var(--picks-border); border-radius:var(--picks-radius); }
.skel-bar { height:14px; margin-bottom:8px; }
.skel-bar.short { width:40%; } .skel-bar.med { width:70%; }

/* K. Rewards */
@keyframes unlockPop { 0%{transform:scale(.3) rotate(-15deg); opacity:0} 60%{transform:scale(1.15) rotate(0); opacity:1} 100%{transform:scale(1)} }
.unlock-badge { animation:unlockPop .8s var(--picks-ease); }

.mood-card[data-mood="premium"]:hover { background:linear-gradient(135deg, rgba(205,168,92,.15), rgba(174,0,0,.1)); }
.mood-card[data-mood="fun"]:hover { background:linear-gradient(135deg, rgba(255,180,80,.15), rgba(174,0,0,.1)); }
.mood-card[data-mood="pro"]:hover { background:linear-gradient(135deg, rgba(80,180,200,.1), rgba(0,0,0,.2)); }
.mood-card[data-mood="cheap"]:hover { background:linear-gradient(135deg, rgba(46,204,113,.1), rgba(0,0,0,.2)); }
body.picks.mood-premium { --picks-bg:#0a0807; --picks-gold:#f5d27a; }
body.picks.mood-fun { --picks-bg:#110806; --picks-gold:#ffb260; --picks-red:#d44; }
body.picks.mood-pro { --picks-bg:#050608; }
body.picks.mood-cheap { --picks-bg:#060a06; --picks-gold:#76d275; }

/* Reveal scroll */
[data-reveal] { opacity:0; transform:translateY(40px); transition:opacity .9s var(--picks-ease), transform .9s var(--picks-ease); }
[data-reveal].in { opacity:1; transform:translateY(0); }
[data-reveal][data-delay="1"]{transition-delay:.1s} [data-reveal][data-delay="2"]{transition-delay:.2s} [data-reveal][data-delay="3"]{transition-delay:.3s} [data-reveal][data-delay="4"]{transition-delay:.4s}

.parallax-layer { will-change:transform; }

/* Cursor */
@media (hover:hover) and (pointer:fine) {
  .pcursor { position:fixed; top:0; left:0; width:12px; height:12px; border-radius:50%; background:var(--picks-red); pointer-events:none; mix-blend-mode:difference; z-index:9998; transform:translate(-50%,-50%); transition:width .25s, height .25s, background .25s; }
  .pcursor.big { width:56px; height:56px; background:rgba(205,168,92,.6); }
}

/* Achievements */
.achievements-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(120px,1fr)); gap:14px; }
.achievement { aspect-ratio:1; padding:16px; background:var(--picks-card); border:1px solid var(--picks-border); border-radius:var(--picks-radius); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; transition:all .3s; opacity:.4; filter:grayscale(1); }
.achievement.unlocked { opacity:1; filter:none; border-color:var(--picks-gold); }
.achievement .icon { font-size:32px; margin-bottom:8px; }
.achievement .ach-label { font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--picks-text-soft); }
.achievement.unlocked .ach-label { color:var(--picks-gold); }

/* Reduce motion */
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .marquee-track { animation:none; }
}