/* AUREVIA TREND — cinematic backgrounds (v0.4.0). Background/lighting only: no layout, text, image or WooCommerce changes.
   Pattern: each section becomes its own stacking context; ::before/::after sit at z-index:-1 (above the section colour, below all content).
   Motion is driven by CSS variables set by assets/js/bg.js (--bgx/--bgy mouse, --sp scroll) and only runs while a section is on screen. */

@property --acc{syntax:'<color>';inherits:true;initial-value:#b9bcc4}

:root{--ivory:#F1EEE8}

/* ---------- shared ---------- */
.hero .stick,.pr .stick,.cd,.pdp,.pull,.nd,.gn,#navratri.rw{isolation:isolate}
.cd,.pdp,.pull,.nd,.gn{position:relative;overflow:clip}
.hero .stick::before,.hero .stick::after,.pr .stick::before,.cd::before,.cd::after,.pdp::before,.pdp::after,.pull::before,.nd::before,.nd::after,.gn::before,#navratri.rw::before{content:"";position:absolute;pointer-events:none;z-index:-1}
@keyframes avSweep{0%{transform:translate3d(-35%,0,0)}100%{transform:translate3d(35%,0,0)}}
@keyframes avBreathe{0%,100%{opacity:.8}50%{opacity:1}}
@keyframes avSheen{0%{background-position:130% 0}100%{background-position:-30% 0}}

/* ---------- A. NAVRATRI RUNWAY: black-cherry/wine, golden spotlight, amber floor glow, reflective floor sheen ---------- */
#navratri.rw{background:
 radial-gradient(95% 36% at 50% 104%,rgba(222,134,36,.34),transparent 70%),
 radial-gradient(58% 52% at 50% 30%,rgba(255,214,150,.13),transparent 72%),
 radial-gradient(70% 60% at 0 100%,rgba(58,4,20,.6),transparent 62%),
 radial-gradient(70% 60% at 100% 100%,rgba(58,4,20,.6),transparent 62%),
 radial-gradient(120% 70% at 50% 0,#4a1226 0,#220a14 42%,#0b0407 100%)}
#navratri.rw::before{left:0;right:0;top:0;height:56px;background:linear-gradient(180deg,var(--ivory),rgba(241,238,232,0))} /* soft hand-off from the ivory hero */
#navratri .rw-lights{transform:translate3d(calc(var(--bgx,0)*16px),calc(var(--p,0)*-30px),0);transition:transform .6s ease-out}
#navratri .rw-glow{background:radial-gradient(ellipse,rgba(255,200,120,.62),transparent 70%)}
#navratri .rw-floor::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 28%,rgba(255,228,176,.2) 47%,transparent 64%) 130% 0/260% 100% no-repeat;animation:avSheen 11s ease-in-out infinite alternate;animation-play-state:paused;pointer-events:none}
#navratri.bg-live .rw-floor::after{animation-play-state:running}

/* ---------- B. HERO + COUNTDOWN: warm ivory #F1EEE8, soft moving shadows, orange accents, light grain ---------- */
.hero{background:var(--ivory)}
.hero .stick{background:var(--ivory)}
.hero .stick::before{inset:-6%;background:
 radial-gradient(42% 38% at 18% 28%,rgba(17,17,17,.075),transparent 70%),
 radial-gradient(36% 34% at 84% 70%,rgba(255,90,31,.13),transparent 70%),
 radial-gradient(60% 40% at 50% 112%,rgba(17,17,17,.10),transparent 70%);
 transform:translate3d(calc(var(--bgx,0)*-26px),calc(var(--bgy,0)*-18px + var(--sp,0)*-40px),0);transition:transform .7s ease-out;will-change:transform}
.hero .stick::after{inset:0;opacity:.05;mix-blend-mode:multiply;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.cd{background:var(--ivory)}
.cd::before{inset:-8%;background:
 radial-gradient(34% 38% at 16% 32%,rgba(255,90,31,.12),transparent 70%),
 radial-gradient(40% 44% at 86% 72%,rgba(17,17,17,.09),transparent 70%),
 radial-gradient(28% 30% at 60% 8%,rgba(255,255,255,.7),transparent 70%);
 transform:translate3d(calc(var(--bgx,0)*-20px),calc((var(--sp,.5) - .5)*-90px),0);transition:transform .7s ease-out;will-change:transform}
.cd::after{inset:0;background:linear-gradient(180deg,#111 0,rgba(17,17,17,0) 64px,rgba(17,17,17,0) calc(100% - 64px),#111 100%)} /* blends into the dark sections around it */

/* ---------- C. DROP 07 HOODIE: obsidian + charcoal, spotlight, orange rim, colour-following glow, moving reflection ---------- */
.pdp{background:linear-gradient(135deg,#0d0d0d 0,#161616 55%,#0b0b0b 100%);transition:--acc .7s ease;--acc:#b9bcc4}
.pdp::before{inset:0;background:
 radial-gradient(ellipse 34% 52% at 29% 48%,rgba(255,255,255,.11),transparent 72%),
 radial-gradient(ellipse 30% 44% at 29% 52%,rgba(255,90,31,.18),transparent 70%);
 background:
 radial-gradient(ellipse 34% 52% at 29% 48%,rgba(255,255,255,.11),transparent 72%),
 radial-gradient(ellipse 32% 46% at 29% 52%,color-mix(in srgb,var(--acc) 26%,transparent),transparent 70%);
 transform:translate3d(calc(var(--bgx,0)*-14px),calc(var(--bgy,0)*-10px),0);transition:transform .7s ease-out}
.pdp::after{inset:0;left:-20%;right:-20%;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.055) 49%,transparent 58%);animation:avSweep 12s ease-in-out infinite alternate;animation-play-state:paused}
.pdp.bg-live::after{animation-play-state:running}
.pdp .pimg{position:relative;isolation:isolate;background:radial-gradient(circle at 50% 46%,rgba(54,54,54,.55),transparent 70%)}
.pdp .pimg::before{content:"";position:absolute;inset:7%;z-index:-1;border-radius:50%;pointer-events:none;background:radial-gradient(closest-side,transparent 66%,rgba(255,90,31,.11) 90%,transparent 100%)} /* gentle orange rim light */
.pdp .pinfo{position:relative}

/* ---------- product scroll (Drop 07 line-up) + Pull the print + Gone Forever: quiet studio light ---------- */
.pr .stick{background:linear-gradient(180deg,#0e0e0e,#151515 50%,#0e0e0e)}
.pr .stick::before{inset:0;background:radial-gradient(ellipse 36% 58% at 76% 50%,rgba(255,255,255,.085),transparent 72%),radial-gradient(ellipse 30% 40% at 78% 82%,rgba(255,90,31,.10),transparent 70%)}
.pull{background:#080808}
.pull::before{inset:0;background:radial-gradient(ellipse 46% 52% at 50% 58%,rgba(255,255,255,.075),transparent 72%),radial-gradient(ellipse 60% 30% at 50% 100%,rgba(255,90,31,.10),transparent 70%)}
.gn{background:#080808}
.gn::before{inset:0;background:radial-gradient(ellipse 55% 40% at 50% 104%,rgba(255,90,31,.20),transparent 70%),radial-gradient(ellipse 50% 40% at 50% 38%,rgba(255,255,255,.05),transparent 70%);animation:avBreathe 8s ease-in-out infinite;animation-play-state:paused}
.gn.bg-live::before{animation-play-state:running}

/* ---------- D. NIGHT DROP: 3D studio (midnight/charcoal) instead of flat blue ---------- */
.nd{background:
 radial-gradient(ellipse 62% 44% at 50% 36%,#20232c 0,transparent 72%),
 linear-gradient(180deg,#0a0b0f 0,#14161c 52%,#08080a 100%)}
.nd::before{inset:-4% -2%;background:
 conic-gradient(from 160deg at 18% -8%,transparent 0 0deg,rgba(255,236,210,.13) 11deg,transparent 24deg 360deg),
 conic-gradient(from 188deg at 82% -8%,transparent 0 0deg,rgba(255,150,80,.14) 11deg,transparent 24deg 360deg),
 radial-gradient(ellipse 40% 26% at 50% 62%,rgba(255,120,50,.10),transparent 72%);
 transform:translate3d(calc(var(--mx,0)*-22px),calc(var(--my,0)*-14px + (var(--sp,.5) - .5)*-70px),0);transition:transform .6s ease-out;will-change:transform}
.nd::after{inset:0;background:
 radial-gradient(ellipse 70% 22% at 50% 102%,rgba(255,140,70,.24),transparent 70%),
 linear-gradient(180deg,rgba(8,8,10,.55) 0,transparent 16%,transparent 80%,rgba(8,8,8,.7) 100%),
 radial-gradient(ellipse 120% 90% at 50% 50%,transparent 55%,rgba(0,0,0,.55) 100%)} /* floor glow, section blends, vignette */
.fl{filter:drop-shadow(0 34px 30px rgba(0,0,0,.62)) drop-shadow(0 0 22px rgba(255,170,110,.07))}

/* ---------- WooCommerce shell: only the dark band behind page titles ---------- */
.av-band{background:radial-gradient(80% 140% at 85% 0,#2a2522 0,transparent 62%),linear-gradient(135deg,#0d0d0d,#1a1816)}

/* ---------- phones/tablets: keep the gradients, drop the costly parts ---------- */
@media(max-width:760px),(hover:none){
 .hero .stick::after{display:none}
 .hero .stick::before,.cd::before,.nd::before,.pdp::before{transition:none;will-change:auto}
 #navratri .rw-floor::after,.pdp::after,.gn::before{animation:none}
}
@media(prefers-reduced-motion:reduce){
 .hero .stick::before,.cd::before,.nd::before,.pdp::before,#navratri .rw-lights{transform:none!important;transition:none}
 #navratri .rw-floor::after,.pdp::after,.gn::before{animation:none!important}
 .pdp{transition:none}
}