/* ============================================================
   ILLUSION — custom.css  |  Animated Background System
   ============================================================ */

:root{
  --pp-1:#5b158f;
  --pp-2:#7a21c4;
  --pp-3:#a000ff;
  --pp-4:#c432ff;
  --pp-5:#e44dff;
  --pp-6:#ff00f7;
  --pp-bg-900:#101012;
  --pp-bg-800:#141320;
  --pp-text-100:rgba(245,245,247,.96);
  --pp-text-80:rgba(241,241,246,.82);
  --pp-text-70:rgba(241,241,246,.70);
  --pp-border:rgba(255,255,255,.10);
  --pp-surface:rgba(24,24,28,.85);
  --pp-glass:rgba(24,24,28,.95);
}

/* ── Base ──────────────────────────────────────────────────── */
html, body{
  background: var(--pp-bg-900);
  color: var(--pp-text-100);
}

/* ============================================================
   ANIMATED BACKGROUND
   Usage: <div class="animated-bg fixed inset-0 z-0 ..."></div>
   ============================================================ */

.animated-bg{
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background: var(--pp-bg-900);
  /* Promote to GPU compositing layer — critical for Firefox animation */
  transform: translateZ(0);
  isolation: isolate;
}

/* If a shop background image is set, it sits underneath the orbs */
.animated-bg[style*="background-image"]{
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* ── Orb layer – rendered with pseudo-elements ────────────── */
.animated-bg::before,
.animated-bg::after{
  content: "";
  position: absolute;
  inset: -50%;
  width: 200%;
  height: 200%;
  pointer-events: none;
  /* Force GPU compositing layer — fixes frozen animations in Firefox */
  transform: translateZ(0);
}

/* Primary orb wave — magenta/violet sweep */
.animated-bg::before{
  background:
    radial-gradient(ellipse 80% 60% at 20% 15%, rgba(255,0,247,.32) 0%, transparent 55%),
    radial-gradient(ellipse 70% 55% at 80% 10%, rgba(160,0,255,.28) 0%, transparent 55%),
    radial-gradient(ellipse 60% 50% at 50% 85%, rgba(90,0,180,.22) 0%, transparent 55%);
  animation: ppOrbDrift1 11s ease-in-out infinite;
}

/* Secondary orb wave — deeper purple counter-drift */
.animated-bg::after{
  background:
    radial-gradient(ellipse 65% 50% at 75% 40%, rgba(196,50,255,.22) 0%, transparent 52%),
    radial-gradient(ellipse 55% 45% at 25% 65%, rgba(255,0,247,.18) 0%, transparent 52%),
    radial-gradient(ellipse 80% 60% at 50% 50%, rgba(20,0,50,.45) 0%, transparent 65%);
  animation: ppOrbDrift2 15s ease-in-out infinite;
}

/* ── Inline orb elements injected via JS ────────────────────
   Removed mix-blend-mode (breaks FF stacking context) and
   will-change (FF can freeze layers when GPU budget exceeded) */
.animated-bg__orb{
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(60px);
  transform: translateZ(0);
  opacity: 0;
  animation: ppOrbLife var(--orb-dur, 14s) ease-in-out var(--orb-delay, 0s) infinite;
}

/* ── Grid overlay ────────────────────────────────────────────── */
.animated-bg__grid{
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 85% 85% at 50% 50%, black 40%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 85% 85% at 50% 50%, black 40%, transparent 100%);
  animation: ppGridPulse 8s ease-in-out infinite;
}

/* ── Particle dots ───────────────────────────────────────────── */
.animated-bg__dot{
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255,0,247,.70);
  box-shadow: 0 0 8px 3px rgba(255,0,247,.25);
  transform: translateZ(0);
  animation: ppDotFloat var(--dot-dur, 10s) ease-in-out var(--dot-delay, 0s) infinite;
}

/* ── Scan line (subtle, slow) ───────────────────────────────── */
.animated-bg__scan{
  position: absolute;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,0,247,.30) 15%,
    rgba(228,77,255,.65) 50%,
    rgba(255,0,247,.30) 85%,
    transparent 100%
  );
  filter: blur(1.5px);
  animation: ppScan 7s linear infinite;
  transform: translateZ(0);
}

/* ── Vignette – keeps edges dark so content stays readable ── */
.animated-bg__vignette{
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 110% 110% at 50% 50%,
    transparent 40%,
    rgba(10,8,20,.55) 70%,
    rgba(10,8,20,.85) 100%
  );
}

/* ── Bottom fade – smooth transition into page content ──────── */
.animated-bg__fade{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 35vh;
  background: linear-gradient(to bottom,
    transparent 0%,
    rgba(16,16,24,.70) 55%,
    rgba(16,16,24,.95) 85%,
    var(--pp-bg-900) 100%
  );
}

/* ============================================================
   KEYFRAMES
   ============================================================ */

@keyframes ppOrbDrift1{
  0%  { transform: translate3d(0,    0,   0) scale(1);    opacity:.80; }
  20% { transform: translate3d(8%,  -12%, 0) scale(1.12); opacity:1;   }
  45% { transform: translate3d(-10%, 6%,  0) scale(.92);  opacity:.88; }
  70% { transform: translate3d(6%,   10%, 0) scale(1.08); opacity:.95; }
  100%{ transform: translate3d(0,    0,   0) scale(1);    opacity:.80; }
}

@keyframes ppOrbDrift2{
  0%  { transform: translate3d(0,    0,   0) scale(1);    opacity:.75; }
  25% { transform: translate3d(-12%, 8%,  0) scale(1.14); opacity:.98; }
  55% { transform: translate3d(9%,  -10%, 0) scale(.90);  opacity:.82; }
  80% { transform: translate3d(-6%,  5%,  0) scale(1.06); opacity:.92; }
  100%{ transform: translate3d(0,    0,   0) scale(1);    opacity:.75; }
}

@keyframes ppOrbLife{
  0%  { opacity:0;    transform: scale(.55) translate3d(0,  50px, 0); }
  12% { opacity:.70; }
  35% { opacity:.95;  transform: scale(1.15) translate3d(0, -35px, 0); }
  65% { opacity:.80;  transform: scale(1.05) translate3d(0, -18px, 0); }
  88% { opacity:.55; }
  100%{ opacity:0;    transform: scale(.55) translate3d(0,  50px, 0); }
}

@keyframes ppGridPulse{
  0%, 100%{ opacity:.40; }
  40%     { opacity:.90; }
  60%     { opacity:.75; }
}

@keyframes ppDotFloat{
  0%  { opacity:0;    transform: translate3d(0,  28px, 0) scale(.8); }
  18% { opacity:.90; }
  50% { opacity:1;    transform: translate3d(0, -26px, 0) scale(1.2); }
  82% { opacity:.70; }
  100%{ opacity:0;    transform: translate3d(0,  28px, 0) scale(.8); }
}

@keyframes ppScan{
  0%       { top: -2px;  opacity: 0;   }
  4%       { opacity: .90; }
  48%      { opacity: .55; }
  50%      { top: 100%;  opacity: 0;   }
  50.001%  { top: -2px;  opacity: 0;   }
  100%     { top: -2px;  opacity: 0;   }
}

@keyframes ppFloat{
  0%,100%{ transform: translate3d(0,  0,   0) scale(1);    opacity:.70; }
  33%    { transform: translate3d(4px,-22px,0) scale(1.15); opacity:1;   }
  66%    { transform: translate3d(-4px,8px,0) scale(.90);   opacity:.80; }
}

@keyframes ppDrift{
  0%  { transform: translate3d(0,   0,   0) rotate(0deg);  }
  33% { transform: translate3d(6px,-18px,0) rotate(3deg);  }
  66% { transform: translate3d(-5px,8px,0) rotate(-2deg); }
  100%{ transform: translate3d(0,   0,   0) rotate(0deg);  }
}

/* ============================================================
   NAV
   ============================================================ */
.sa-nav{
  background: linear-gradient(180deg, rgba(16,16,24,.90), rgba(16,16,24,.78));
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--pp-border);
  box-shadow: 0 10px 40px rgba(0,0,0,.65);
}
.sa-nav__logo{
  border: 1px solid var(--pp-border);
  box-shadow: 0 10px 30px rgba(255,0,247,.25);
  border-radius: 12px;
}
.sa-nav__links a{
  color: rgba(255,255,255,.78);
  transition: color .35s ease;
}
.sa-nav__links a:hover{ color: var(--pp-text-100); }
.sa-nav__cartbtn{
  background: var(--pp-surface);
  border: 1px solid var(--pp-border);
  transition: transform .35s ease, background .35s ease, border-color .35s ease, box-shadow .35s ease;
  box-shadow: 0 12px 40px rgba(255,0,247,.25);
}
.sa-nav__cartbtn:hover{
  transform: translateY(-2px);
  background: var(--pp-glass);
  border-color: rgba(255,0,247,.30);
  box-shadow: 0 18px 55px rgba(255,0,247,.30);
}
.sa-nav__count{
  background: linear-gradient(180deg, var(--pp-6), var(--pp-3));
  border: 1px solid var(--pp-border);
  box-shadow: 0 12px 35px rgba(255,0,247,.30);
}
.sa-nav__discord{
  background: linear-gradient(180deg, var(--pp-6), var(--pp-3));
  border: 1px solid var(--pp-border);
  box-shadow: 0 12px 40px rgba(255,0,247,.30);
  transition: transform .35s ease, box-shadow .35s ease;
}
.sa-nav__discord:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 55px rgba(255,0,247,.40);
}

/* ============================================================
   HERO
   ============================================================ */
.sa-hero{
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  padding: 84px 0 64px;
  background:
    radial-gradient(1200px 520px at 50% -10%, rgba(255,0,247,.18) 0%, rgba(0,0,0,0) 60%),
    linear-gradient(180deg, var(--pp-bg-900) 0%, var(--pp-bg-800) 100%);
}
.sa-hero__bg::after{
  content:"";
  position:absolute;
  inset:-40%;
  background: radial-gradient(circle at 50% 20%, rgba(255,0,247,.26) 0%, rgba(0,0,0,0) 65%);
  filter: blur(28px);
  opacity: .9;
}
.sa-hero::before{
  content:"";
  position:absolute;
  inset:-30%;
  pointer-events:none;
  background:
    radial-gradient(1400px 900px at 20% 10%, rgba(160,0,255,.28), transparent 60%),
    radial-gradient(1200px 700px at 80% 0%, rgba(255,0,247,.24), transparent 65%);
  opacity:.35;
  animation: ppDrift 24s ease-in-out infinite both;
}
.sa-hero::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-1px;
  height:220px;
  pointer-events:none;
  background: linear-gradient(to bottom, rgba(16,16,24,0) 0%, rgba(16,16,24,.65) 45%, rgba(16,16,24,.90) 70%, rgba(16,16,24,1) 100%);
  z-index: 2;
}
.sa-hero__boxes .box{
  border-radius: 22px;
  border: 1px solid var(--pp-border);
  background: linear-gradient(180deg, rgba(24,24,28,.95), rgba(24,24,28,.85));
  box-shadow: 0 26px 100px rgba(0,0,0,.75);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.sa-hero__dots .dot{
  position:absolute;
  width:10px; height:10px;
  border-radius:999px;
  background: rgba(255,0,247,.45);
  box-shadow: 0 0 0 6px rgba(255,0,247,.12);
  filter: drop-shadow(0 10px 25px rgba(255,0,247,.20));
  animation: ppFloat 8s ease-in-out infinite;
  will-change: transform, opacity;
}
.sa-hero__trust{
  color: var(--pp-text-100);
  background: var(--pp-surface);
  border: 1px solid var(--pp-border);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 60px rgba(0,0,0,.75);
}
.sa-hero__trustIcon{
  color: var(--pp-text-100);
  background: rgba(255,0,247,.18);
  border: 1px solid rgba(255,0,247,.30);
  border-radius: 10px;
}
.sa-hero__title{
  color: var(--pp-text-100);
  text-shadow: 0 14px 60px rgba(0,0,0,.55);
}
.sa-hero__badge{
  background: linear-gradient(180deg, var(--pp-6), var(--pp-3));
  box-shadow: 0 18px 60px rgba(255,0,247,.32);
  border: 1px solid var(--pp-border);
  color: var(--pp-text-100);
}
.sa-hero__subtitle{ color: var(--pp-text-80); }
.sa-hero__actions .sa-btn{
  transition: transform .4s ease, box-shadow .4s ease, background .4s ease, border-color .4s ease;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.sa-btn--primary{
  background: linear-gradient(180deg, var(--pp-6), var(--pp-2));
  box-shadow: 0 15px 45px rgba(255,0,247,.32);
  border: 1px solid var(--pp-border);
}
.sa-btn--primary:hover{
  transform: translateY(-2px);
  box-shadow: 0 20px 60px rgba(255,0,247,.48);
}
.sa-btn--secondary{
  background: var(--pp-surface);
  border: 1px solid var(--pp-border);
  box-shadow: 0 12px 40px rgba(0,0,0,.65);
}

/* ============================================================
   STATS
   ============================================================ */
.sa-stat{
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(24,24,28,.96) 0%, rgba(24,24,28,.88) 100%);
  border: 1px solid var(--pp-border);
  box-shadow: 0 18px 65px rgba(0,0,0,.70);
  transition: transform .45s ease, box-shadow .45s ease;
}
.sa-stat:hover{
  transform: translateY(-4px);
  box-shadow: 0 25px 75px rgba(0,0,0,.80), 0 0 35px rgba(255,0,247,.28);
}
.sa-stat__icon{
  color: var(--pp-text-100);
  background: rgba(255,0,247,.20);
  border: 1px solid rgba(255,0,247,.32);
  box-shadow: 0 14px 40px rgba(255,0,247,.20);
}

/* ============================================================
   PRODUCT CARDS
   ============================================================ */
.sa-pcard{
  border-radius: 26px;
  background: linear-gradient(180deg, rgba(24,24,28,.98), rgba(24,24,28,.92));
  border: 1px solid var(--pp-border);
  box-shadow: 0 26px 100px rgba(0,0,0,.78);
  transition: transform .45s ease, box-shadow .45s ease, border-color .45s ease;
  will-change: transform, box-shadow;
}
.sa-pcard:hover{
  transform: translateY(-6px);
  border-color: rgba(255,0,247,.32);
  box-shadow: 0 34px 130px rgba(0,0,0,.85), 0 0 60px rgba(255,0,247,.22);
}
.sa-pcard__shine{
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(800px 260px at 40% 0%, rgba(255,255,255,.10), rgba(0,0,0,0) 55%),
    radial-gradient(900px 420px at 75% 110%, rgba(255,0,247,.20), rgba(0,0,0,0) 58%);
  opacity: .55;
}
.sa-badge{
  border: 1px solid var(--pp-border);
  box-shadow: 0 16px 55px rgba(0,0,0,.65);
  background: var(--pp-surface);
  color: var(--pp-text-100);
}
.sa-pcStock{
  background: rgba(0,0,0,.40);
  border: 1px solid var(--pp-border);
  color: var(--pp-text-100);
}
.sa-feat{
  background: rgba(0,0,0,.28);
  border: 1px solid var(--pp-border);
  color: var(--pp-text-100);
}
.sa-feat__ico{
  color: var(--pp-text-100);
  background: rgba(255,0,247,.20);
  border: 1px solid rgba(255,0,247,.32);
}
.sa-buyBtn{
  background: linear-gradient(180deg, var(--pp-6), var(--pp-2));
  border: 1px solid var(--pp-border);
  box-shadow: 0 20px 70px rgba(255,0,247,.26);
  transition: transform .45s ease, box-shadow .45s ease, background .45s ease;
}
.sa-pcard:hover .sa-buyBtn{
  transform: translateY(-2px);
  box-shadow: 0 0 28px rgba(255,0,247,.45), 0 26px 90px rgba(255,0,247,.30);
}

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.testimonial{
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(24,24,28,.96), rgba(24,24,28,.90));
  border: 1px solid var(--pp-border);
  box-shadow: 0 22px 70px rgba(0,0,0,.72), 0 0 35px rgba(255,0,247,.20);
  transition: transform .45s ease, box-shadow .45s ease, border-color .45s ease;
}
.testimonial:hover{
  transform: translateY(-4px);
  border-color: rgba(255,0,247,.30);
  box-shadow: 0 30px 90px rgba(0,0,0,.85), 0 0 45px rgba(255,0,247,.30);
}
.testimonial .quote{
  color: var(--pp-text-80);
  background: var(--pp-surface);
  border: 1px solid var(--pp-border);
}
.testimonial .stars svg{ filter: drop-shadow(0 6px 16px rgba(255,0,247,.28)); }
.testimonial a,
.testimonial a:visited{ color: var(--pp-6); text-decoration: none; }
.testimonial a:hover{ color: var(--pp-text-100); text-shadow: 0 0 18px rgba(255,0,247,.35); }
.testimonial .reply{
  background: rgba(255,0,247,.12);
  border: 1px solid rgba(255,0,247,.26);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}

/* ============================================================
   PRODUCT PAGE WRAPPER
   ============================================================ */
.product-wrapper{
  position: relative;
  overflow: hidden;
  min-height: 100vh;
}
.product-wrapper::before{
  content:"";
  position: absolute;
  inset: -220px;
  pointer-events: none;
  background:
    radial-gradient(900px 520px at 50% 30%, rgba(255,0,247,.26), rgba(0,0,0,0) 62%),
    radial-gradient(700px 420px at 15% 55%, rgba(160,0,255,.20), rgba(0,0,0,0) 60%),
    radial-gradient(700px 420px at 85% 60%, rgba(139,0,255,.18), rgba(0,0,0,0) 60%),
    radial-gradient(1200px 760px at 50% 110%, rgba(0,0,0,.88), rgba(0,0,0,1) 70%),
    linear-gradient(180deg, var(--pp-bg-900) 0%, var(--pp-bg-800) 100%);
}
.product-wrapper::after{
  content:"";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px),
    radial-gradient(circle at 25% 35%, rgba(255,0,247,.40) 0 2px, transparent 3px),
    radial-gradient(circle at 70% 30%, rgba(160,0,255,.34) 0 2px, transparent 3px),
    radial-gradient(circle at 80% 65%, rgba(139,0,255,.32) 0 2px, transparent 3px),
    radial-gradient(circle at 20% 70%, rgba(224,80,255,.30) 0 2px, transparent 3px);
  background-size: 64px 64px, 64px 64px, 220px 220px, 240px 240px, 260px 260px, 280px 280px;
  opacity: .10;
}
#productImageCarousel,
.product-wrapper .card-img-top{
  border-radius: 26px;
  border: 1px solid var(--pp-border);
  box-shadow: 0 30px 100px rgba(0,0,0,.80), 0 0 55px rgba(255,0,247,.18);
}
.product-wrapper .product-tabs .content,
.product-wrapper .editor{
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(24,24,28,.96), rgba(24,24,28,.90));
  border: 1px solid var(--pp-border);
  box-shadow: 0 22px 70px rgba(0,0,0,.70);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.product-wrapper [x-data="productForm"] .btn-primary{
  background: linear-gradient(180deg, var(--pp-6), var(--pp-2));
  border-color: var(--pp-border);
  box-shadow: 0 18px 60px rgba(255,0,247,.30);
  border-radius: 999px;
  transition: transform .4s ease, box-shadow .4s ease;
}
.product-wrapper [x-data="productForm"] .btn-primary:hover{
  transform: translateY(-2px);
  box-shadow: 0 0 28px rgba(255,0,247,.45), 0 24px 75px rgba(255,0,247,.32);
}
.product-wrapper [x-data="productForm"] .btn-outline-primary{
  background: var(--pp-surface);
  border-color: var(--pp-border);
  color: var(--pp-text-100);
  border-radius: 999px;
  transition: background .4s ease, border-color .4s ease, transform .4s ease;
}

/* ============================================================
   GALLERY MODAL
   ============================================================ */
.sa-gmodal__panel{
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(24,24,28,.96), rgba(24,24,28,.90));
  border: 1px solid var(--pp-border);
  box-shadow: 0 30px 140px rgba(0,0,0,.85);
}
.sa-gmodal__top{
  background:
    radial-gradient(900px 240px at 50% -20%, rgba(255,0,247,.24), rgba(0,0,0,0) 60%),
    rgba(0,0,0,.32);
  border-bottom: 1px solid var(--pp-border);
}
.sa-gmodal__close{
  background: rgba(0,0,0,.30);
  border: 1px solid var(--pp-border);
  color: rgba(255,255,255,.88);
  transition: transform .35s ease, border-color .35s ease;
}
.sa-gmodal__close:hover{
  transform: translateY(-2px);
  border-color: rgba(255,0,247,.32);
}
.sa-gitem{
  border: 1px solid var(--pp-border);
  background: linear-gradient(180deg, rgba(24,24,28,.96), rgba(24,24,28,.90));
  box-shadow: 0 18px 70px rgba(0,0,0,.70);
  transition: transform .4s ease, border-color .4s ease, box-shadow .4s ease;
}
.sa-gitem:hover{
  transform: translateY(-2px);
  border-color: rgba(255,0,247,.30);
  box-shadow: 0 26px 95px rgba(0,0,0,.75), 0 0 50px rgba(255,0,247,.18);
}
.sa-gitem__go{
  background: rgba(0,0,0,.30);
  border: 1px solid var(--pp-border);
  color: rgba(255,255,255,.86);
}
.sa-gitem__price{ color: var(--pp-6); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1280px){
  .sa-hero__title{ font-size: clamp(30px, 4vw, 54px); }
}
@media (max-width: 1024px){
  .sa-hero{ padding: 72px 0 56px; }
  .sa-hero__stats{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .sa-nav__inner{ padding: 0 18px; }
  .sa-pcard{ border-radius: 24px; }
}
@media (max-width: 768px){
  .sa-hero__inner{ padding-top: 6vh; }
  .sa-hero__stats{ grid-template-columns: 1fr; margin-top: 44px; }
  #productImageCarousel,
  .product-wrapper .card-img-top{ border-radius: 22px; }
  .animated-bg::before,
  .animated-bg::after{ animation-duration: 26s; }
}
@media (max-width: 640px){
  .sa-hero{ padding: 64px 0 50px; }
  .sa-nav__brandText{ font-size: 15px; }
  .sa-pcard{ border-radius: 22px; }
  .testimonial{ border-radius: 22px; }
}

/* ============================================================
   Reduced-motion respect
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  .animated-bg::before,
  .animated-bg::after,
  .animated-bg__orb,
  .animated-bg__grid,
  .animated-bg__dot,
  .animated-bg__scan,
  .sa-hero__dots .dot{
    animation: none !important;
    opacity: 1 !important;
  }
}

/* ============================================================
   LIVE STATUS PAGE  (#illusion-status)
   All colours already defined in the component <style> block.
   These overrides ensure it integrates with the site backdrop.
   ============================================================ */

/* Ensure the section sits above the animated-bg z:0 layer */
#illusion-status {
  position: relative;
  z-index: 1;
}

/* Tighten the container width on very large screens */
@media (min-width: 1280px) {
  #illusion-status {
    max-width: 1100px;
    margin-inline: auto;
  }
}
/* ============================================================
   ILLUSION ADDITIONS — layout, components, mobile
   ============================================================ */

/* Product grid */
.component[data-component-id="products"],
.component[data-component-id^="products-"] {
  padding: 0 24px 48px;
  max-width: 1280px;
  margin: 0 auto;
  width: 100%;
}
.component[data-component-id="products"] h2,
.component[data-component-id^="products-"] h2 {
  font-size: 2rem !important;
  letter-spacing: 0.08em !important;
  color: rgba(240,236,255,0.90) !important;
  margin: 0 0 20px !important;
  font-weight: 400 !important;
}

/* Search bar */
.component input[type="search"],
.component input[type="text"][placeholder*="earch"] {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 10px !important;
  color: rgba(240,236,255,0.88) !important;
  padding: 10px 16px !important;
  font-size: 0.875rem !important;
  outline: none !important;
  width: 100%;
}
.component input[type="search"]:focus,
.component input[type="text"][placeholder*="earch"]:focus {
  border-color: rgba(202,74,198,0.42) !important;
}
.component input::placeholder { color: rgba(200,192,225,0.32) !important; }

/* FAQ */
.component[data-component-id^="faq"],
.component[data-component-id^="video-gallery"],
.component[data-component-id^="text-block"] {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px 48px;
  width: 100%;
}

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: rgba(255,255,255,0.02); }
::-webkit-scrollbar-thumb { background: rgba(202,74,198,0.28); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(202,74,198,0.45); }

/* Responsive */
@media (max-width: 768px) {
  .component[data-component-id="products"],
  .component[data-component-id^="products-"],
  .component[data-component-id^="faq"],
  .component[data-component-id^="video-gallery"],
  .component[data-component-id^="text-block"] {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}