/* ============================================================
   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;width:100%}
.zs-hero{display:flex;align-items:center;min-height:clamp(500px,78vh,760px)}
.zs-hero .zs-slide,.zs-hero .hero-content{text-align:center !important}
.zs-hero .hero-content{margin-left:auto !important;margin-right:auto !important}
.zs-hero .hero-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem}
.zs-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:6;width:52px;height:52px;border-radius:50%;border:1px solid var(--border,#3D3849);background:rgba(37,35,43,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--white,#F5F4F8);font-size:28px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s,border-color .2s,transform .2s}
.zs-arrow:hover{background:var(--purple,#4B3F58);border-color:var(--lavender,#8A7FA2);transform:translateY(-50%) scale(1.06)}
.zs-arrow-prev{left:24px}.zs-arrow-next{right:24px}
@media (max-width:900px){.zs-arrow{display:none !important}}

/* 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}
}

/* Hero slide image (editable slides) */
.zs-hero .hero-media{margin:0 auto 1.4rem;max-width:min(560px,90%)}
.zs-hero .hero-media img{display:block;width:100%;height:auto;border-radius:16px;border:1px solid var(--border,#3D3849);box-shadow:0 24px 60px -30px rgba(0,0,0,.7)}
@media(max-width:640px){.zs-hero .hero-media{max-width:100%;margin-bottom:1rem}}