/* ============================================================
   Zelmora FX v2.1  —  “2050” visual layer
   Full-page particle bg + aurora mesh + animated gradient text +
   3D tilt cards + scroll reveal + magnetic buttons + scroll
   progress + centered hero. Additive, dependency-free, fluid.
   ============================================================ */

:root{
  --zs-lav:  var(--lavender, #8A7FA2);
  --zs-gold: var(--gold, #C9A96E);
  --zs-pur:  var(--purple, #4B3F58);
  --zs-cyan: #78B4DC;
}

/* ---------- Full-page background particles ---------- */
html{background:var(--bg,#1E1D23)}
body{background:transparent}
.zs-bg-particles{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;opacity:.5}

/* ---------- Hero shell ---------- */
.zs-hero{position:relative;overflow:hidden;isolation:isolate}
.zs-hero > .container{position:relative;z-index:3}

/* Centered, symmetric hero content (professional) */
.zs-hero .zs-slide{text-align:center}
.zs-hero .hero-content{max-width:760px;margin-left:auto;margin-right:auto}
.zs-hero .hero-sub{margin-left:auto;margin-right:auto}
.zs-hero .hero-actions{justify-content:center}
.zs-hero .hero-eyebrow,.zs-hero .hero-badge,.zs-hero .shop-hero-badge{margin-left:auto;margin-right:auto}

/* Aurora mesh background (JS-injected) */
.zs-aurora{position:absolute;inset:-25% -12%;z-index:0;pointer-events:none;
  filter:blur(64px) saturate(150%);opacity:.55;background-size:200% 200%;
  background:
    radial-gradient(40% 50% at 20% 30%, rgba(138,127,162,.55), transparent 60%),
    radial-gradient(38% 46% at 82% 22%, rgba(201,169,110,.42), transparent 60%),
    radial-gradient(48% 58% at 66% 82%, rgba(75,63,88,.58), transparent 60%),
    radial-gradient(32% 42% at 28% 78%, rgba(120,180,220,.30), transparent 60%);
  animation:zsAurora 20s ease-in-out infinite alternate}
@keyframes zsAurora{
  0%{background-position:0% 50%;transform:translate3d(0,0,0) scale(1)}
  50%{background-position:100% 50%;transform:translate3d(0,-2%,0) scale(1.08)}
  100%{background-position:0% 50%;transform:translate3d(0,2%,0) scale(1.02)}}

/* Futuristic moving grid (JS-injected) */
.zs-grid{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.13;
  background-image:linear-gradient(var(--border,#3D3849) 1px,transparent 1px),
                   linear-gradient(90deg,var(--border,#3D3849) 1px,transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(circle at 50% 38%, #000 0%, transparent 76%);
          mask-image:radial-gradient(circle at 50% 38%, #000 0%, transparent 76%);
  animation:zsGridPan 22s linear infinite}
@keyframes zsGridPan{to{background-position:46px 46px}}

/* Soft floating orbs */
.zs-hero-glow{position:absolute;border-radius:50%;pointer-events:none;z-index:1}
.zs-hero-glow-1{top:10%;right:8%;width:360px;height:360px;background:radial-gradient(circle,rgba(138,127,162,.28),transparent 70%);animation:zsFloat 15s ease-in-out infinite}
.zs-hero-glow-2{bottom:6%;right:22%;width:210px;height:210px;background:radial-gradient(circle,rgba(201,169,110,.16),transparent 70%);animation:zsFloat 20s ease-in-out infinite reverse}
@keyframes zsFloat{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(-28px,24px,0)}}

/* ---------- Animated gradient hero headline ---------- */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .zs-hero h1{
    background:linear-gradient(100deg,
      var(--white,#F5F4F8) 0%, var(--zs-lav) 42%, var(--zs-gold) 66%, var(--white,#F5F4F8) 100%);
    background-size:220% auto;
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;color:transparent;
    animation:zsTextShine 9s linear infinite}
}
@keyframes zsTextShine{to{background-position:220% center}}

/* ---------- Hero slider ---------- */
.zs-slides{position:relative}
.zs-slide{opacity:0;visibility:hidden;position:absolute;inset:0;
  transform:translateY(26px) scale(.985);filter:blur(5px);
  transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .8s cubic-bezier(.2,.8,.2,1),filter .8s ease;
  pointer-events:none}
.zs-slide.is-active{opacity:1;visibility:visible;position:relative;inset:auto;
  transform:none;filter:none;pointer-events:auto}

.zs-slider-dots{display:flex;gap:.6rem;justify-content:center;margin-top:2.1rem;position:relative;z-index:3}
.zs-dot{width:10px;height:10px;border-radius:50%;border:0;padding:0;cursor:pointer;
  background:rgba(217,213,230,.28);transition:transform .3s ease,background .3s ease,box-shadow .3s ease}
.zs-dot:hover{background:rgba(217,213,230,.55)}
.zs-dot.is-active{background:var(--zs-gold);transform:scale(1.4);box-shadow:0 0 14px rgba(201,169,110,.7)}

/* ---------- Hero buttons: shine sweep + glow ---------- */
.zs-hero .btn{position:relative;overflow:hidden;
  transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s ease,filter .3s ease}
.zs-hero .btn:hover{box-shadow:0 12px 34px -10px rgba(201,169,110,.55)}
.zs-hero .btn::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(120deg,transparent 0%,rgba(255,255,255,.28) 50%,transparent 100%);
  transform:translateX(-130%);transition:transform .65s ease}
.zs-hero .btn:hover::after{transform:translateX(130%)}

/* ---------- 3D tilt cards ---------- */
.zs-tilt{transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s ease;
  transform-style:preserve-3d;will-change:transform}
.zs-tilt:hover{box-shadow:0 26px 64px -22px rgba(0,0,0,.62),0 0 0 1px rgba(138,127,162,.35)}

/* ---------- Scroll reveal ---------- */
.zs-reveal{opacity:0;transform:translateY(42px) scale(.985);filter:blur(6px);
  transition:opacity .85s cubic-bezier(.2,.8,.2,1),transform .85s cubic-bezier(.2,.8,.2,1),filter .85s ease}
.zs-reveal.is-in{opacity:1;transform:none;filter:none}

/* ---------- Scroll progress bar ---------- */
.zs-progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:9999;pointer-events:none;
  background:linear-gradient(90deg,var(--zs-lav),var(--zs-gold));
  box-shadow:0 0 12px rgba(201,169,110,.6);transition:width .1s linear}

/* ---------- Responsive tuning ---------- */
@media (max-width:900px){
  .zs-aurora{opacity:.45;filter:blur(46px)}
  .zs-bg-particles{opacity:.4}
}
@media (max-width:640px){
  .zs-grid{display:none}
  .zs-hero-glow{opacity:.6}
  .zs-bg-particles{opacity:.32}
}

/* ---------- Accessibility ---------- */
@media (prefers-reduced-motion: reduce){
  .zs-slide{transition:none;filter:none;transform:none}
  .zs-aurora,.zs-grid,.zs-hero-glow{animation:none}
  .zs-grid{display:none}
  .zs-hero h1{animation:none}
  .zs-reveal{transition:none;opacity:1;transform:none;filter:none}
  .zs-tilt{transition:none}
}


/* ==================================================================
   REVEAL FIX (critical) — unify reveal class variants + failsafe.
   Two reveal systems disagreed on the “shown” class name:
     • zs-fx.js / sections use  .zs-reveal.is-in
     • shop-premium.js / cards use .zs-reveal.zs-in / .visible
   Cards received .zs-in/.visible but NOT .is-in, so under this
   (last-loaded) stylesheet they stayed opacity:0 → invisible.
   Reveal on ANY of the variants, and add a JS-independent failsafe
   so content can never remain permanently hidden.
   ================================================================== */
.zs-reveal.is-in,
.zs-reveal.zs-in,
.zs-reveal.visible,
html.js .zs-reveal.is-in,
html.js .zs-reveal.zs-in,
html.js .zs-reveal.visible{opacity:1 !important;transform:none !important;filter:none !important}

/* Failsafe: if no reveal class ever gets added (JS stalled/errored),
   fade the element in automatically after a short delay. */
@keyframes zsRevealFailsafe{to{opacity:1;transform:none;filter:none}}
.zs-reveal{animation:zsRevealFailsafe .6s ease 1.2s forwards}

/* Hard guarantee when the browser has no JS engine flag set. */
html:not(.js) .zs-reveal{opacity:1 !important;transform:none !important;filter:none !important;animation:none}