/* DROP CULTURE — cinematic theme (loads after style.css; applies site-wide) */
:root{--bg:#07070a;--panel:#101015;--line:#24242c;--ink:#f4f1ea;--mute:#9a97a0;--red:#e5263b;--gold:#d9b46a}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink)}
body:before{content:'';position:fixed;inset:-50%;z-index:100;pointer-events:none;opacity:.07;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");animation:grain 1s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}
.announcement{background:var(--red);color:#fff;letter-spacing:.18em;font-weight:700}
.header{background:rgba(7,7,10,.78);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.logo,.nav a,.icons a{color:var(--ink)}.nav{letter-spacing:.12em}
.nav a:hover,.footer a:hover{color:var(--red)}
.wrap h1,.wrap h2,.section-title,h1,h2,h3{color:var(--ink)}
.pagehero{background:#0c0c10!important;color:var(--ink)!important}
.product,.cartline,.notice,.dc-cart-offer,.empty{background:var(--panel);border:1px solid var(--line);color:var(--ink)}
.product{transition:transform .5s cubic-bezier(.2,.7,.2,1),border-color .3s,box-shadow .5s}
.product:hover{transform:translateY(-8px);border-color:var(--red);box-shadow:0 24px 60px -20px rgba(229,38,59,.45)}
.product .art{background:radial-gradient(circle at 50% 40%,#2a2a33,#0d0d11)!important}
.product .art img{transition:transform .8s cubic-bezier(.2,.7,.2,1)}.product:hover .art img{transform:scale(1.07)}
.muted,.availability,.strike,p{color:var(--mute)}
input,select,textarea{background:#14141a;color:var(--ink);border:1px solid var(--line)}
.btn,.dc-white-btn{background:var(--ink);color:#07070a}.btn:hover{background:var(--red);color:#fff}
.footer{background:#050507;color:var(--mute);border-top:1px solid var(--line)}.footer a,.footer b{color:var(--ink)}
.carttotal,.detail-price{color:var(--ink)}
/* ===== Cinematic homepage ===== */
.cx-hero{position:relative;min-height:calc(100vh - 100px);display:flex;align-items:flex-end;overflow:hidden;background:#000}
.cx-hero video,.cx-hero .cx-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55;transform:scale(1.08);animation:kenburns 24s ease-in-out infinite alternate}
.cx-hero .cx-fallback{position:absolute;inset:0;background:radial-gradient(ellipse at 70% 30%,rgba(229,38,59,.35),transparent 55%),radial-gradient(ellipse at 20% 80%,rgba(217,180,106,.18),transparent 50%),#050507}
@keyframes kenburns{from{transform:scale(1.08) translate(0,0)}to{transform:scale(1.2) translate(-2%,-1.5%)}}
.cx-hero:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#07070a 2%,transparent 45%),linear-gradient(90deg,rgba(7,7,10,.85),transparent 65%)}
.cx-bars:before,.cx-bars:after{content:'';position:absolute;left:0;right:0;height:5vh;background:#000;z-index:3}.cx-bars:before{top:0}.cx-bars:after{bottom:0}
.cx-beam{position:absolute;top:-20%;left:-30%;width:40%;height:140%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.07),transparent);transform:skewX(-18deg);animation:beam 9s ease-in-out infinite;z-index:2}
@keyframes beam{0%,100%{left:-40%}50%{left:110%}}
.cx-copy{position:relative;z-index:4;padding:0 6% 11vh;max-width:1200px}
.cx-over{letter-spacing:.4em;font-size:12px;color:var(--gold);font-weight:700;margin:0 0 18px;opacity:0;animation:rise 1s .3s forwards}
.cx-copy h1{font:900 clamp(64px,13vw,190px)/.84 'Barlow Condensed',Impact,sans-serif;font-style:italic;text-transform:uppercase;margin:0;letter-spacing:-.01em}
.cx-copy h1 span{display:block;overflow:hidden}.cx-copy h1 span>i{display:block;font-style:inherit;transform:translateY(105%);animation:rise 1.1s cubic-bezier(.2,.8,.2,1) forwards}
.cx-copy h1 span:nth-child(2)>i{animation-delay:.25s;color:var(--red)}
.cx-sub{max-width:520px;font-size:18px;line-height:1.55;color:#cfcbd2;margin:26px 0 32px;opacity:0;animation:rise 1s .9s forwards}
.cx-cta{display:flex;gap:14px;flex-wrap:wrap;opacity:0;animation:rise 1s 1.1s forwards}
.cx-cta a{padding:17px 30px;font-weight:800;letter-spacing:.16em;font-size:13px;border:1px solid var(--ink);transition:.3s}
.cx-cta a.solid{background:var(--ink);color:#07070a}.cx-cta a.solid:hover{background:var(--red);border-color:var(--red);color:#fff}
.cx-cta a.ghost:hover{background:var(--ink);color:#07070a}
@keyframes rise{to{transform:none;opacity:1}}
.cx-scroll{position:absolute;right:5%;bottom:9vh;z-index:4;writing-mode:vertical-rl;letter-spacing:.35em;font-size:11px;color:var(--mute)}
.cx-scroll:after{content:'';display:block;width:1px;height:60px;background:var(--ink);margin:12px auto 0;animation:drip 2s infinite}
@keyframes drip{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.cx-marquee{border-block:1px solid var(--line);overflow:hidden;padding:20px 0;background:#0a0a0e}
.cx-track{display:flex;width:max-content;animation:slide 32s linear infinite;font:900 54px 'Barlow Condensed',Impact,sans-serif;font-style:italic;letter-spacing:.04em;color:transparent;-webkit-text-stroke:1px #6c6a74;white-space:nowrap}
.cx-track b{color:var(--red);-webkit-text-stroke:0;padding:0 28px}
@keyframes slide{to{transform:translateX(-50%)}}
.cx-chapter{max-width:1400px;margin:auto;padding:110px 5% 30px}
.cx-chapter .no{font:900 14px 'DM Sans';letter-spacing:.4em;color:var(--red)}
.cx-chapter h2{font:900 clamp(44px,8vw,110px)/.9 'Barlow Condensed',Impact,sans-serif;font-style:italic;text-transform:uppercase;margin:10px 0 0}
.cx-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;margin:40px 0 0;background:var(--line)}
.cx-tile{position:relative;aspect-ratio:3/4;overflow:hidden;background:#0d0d11;display:flex;align-items:flex-end;padding:26px}
.cx-tile .bg{position:absolute;inset:0;background:radial-gradient(circle at 50% 35%,#2d2d37,#0b0b0f 70%);transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.cx-tile img{position:absolute;inset:8% 8% 22%;width:84%;height:70%;object-fit:contain;transition:transform .9s cubic-bezier(.2,.7,.2,1);filter:drop-shadow(0 30px 30px #000a)}
.cx-tile:hover img{transform:scale(1.1) rotate(-3deg)}.cx-tile:hover .bg{transform:scale(1.12)}
.cx-tile strong{position:relative;font:900 34px 'Barlow Condensed',Impact,sans-serif;font-style:italic;letter-spacing:.03em}
.cx-tile small{position:relative;display:block;color:var(--red);letter-spacing:.2em;font-size:11px;margin-top:4px}
.cx-quote{position:relative;padding:18vh 6%;text-align:center;background:radial-gradient(ellipse at center,rgba(229,38,59,.18),transparent 60%),#07070a;overflow:hidden}
.cx-quote h2{font:900 clamp(48px,10vw,150px)/.88 'Barlow Condensed',Impact,sans-serif;font-style:italic;text-transform:uppercase;margin:0}
.cx-quote h2 em{color:var(--red)}
.cx-quote a{display:inline-block;margin-top:40px;padding:17px 34px;border:1px solid var(--ink);letter-spacing:.18em;font-weight:800;font-size:13px}.cx-quote a:hover{background:var(--ink);color:#07070a}
.cx-offer{display:flex;justify-content:space-between;gap:30px;align-items:center;flex-wrap:wrap;max-width:1400px;margin:0 auto;padding:60px 5%;border-top:1px solid var(--line)}
.cx-offer h3{font:900 44px 'Barlow Condensed',Impact,sans-serif;font-style:italic;margin:0}
.cx-grid{max-width:1400px;margin:auto;padding:30px 5% 100px}
.cx-trust{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}
.cx-trust div{padding:40px 5%;border-right:1px solid var(--line);font-weight:800;letter-spacing:.14em;font-size:13px}.cx-trust small{display:block;margin-top:8px;color:var(--mute);letter-spacing:0;font-weight:400;font-size:14px}
.reveal{opacity:0;transform:translateY(46px);transition:opacity 1s,transform 1s cubic-bezier(.2,.7,.2,1)}.reveal.visible{opacity:1;transform:none}
@media(max-width:900px){.cx-tiles{grid-template-columns:repeat(2,1fr)}.cx-trust{grid-template-columns:1fr}.cx-scroll{display:none}.cx-track{font-size:36px}.nav{display:none}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.reveal,.cx-over,.cx-sub,.cx-cta,.cx-copy h1 span>i{opacity:1;transform:none}}
