/* ============================================================
   OWNIT Systems & AI — shared motion layer
   Ambient aurora background + fail-open on-load entrance + CTA sheen.
   Included by every Systems & AI demo. Purely additive: if the JS
   never runs, nothing is hidden and nothing animates.
   ============================================================ */

/* ---- ambient aurora background (injected by _fx.js) ----
   Colours are tokenised: a demo can retint the aurora by setting --fx-1/2/3
   on :root (defaults = OWNIT violet). Pest demos, e.g., set green tones. */
:root{
  --fx-1:124,58,237;   /* violet  */
  --fx-2:91,91,255;    /* indigo  */
  --fx-3:162,59,255;   /* magenta */
}
.fx-aurora{position:fixed;inset:-12%;z-index:-1;pointer-events:none;overflow:hidden;opacity:.85}
.fx-aurora span{position:absolute;display:block;border-radius:50%;filter:blur(64px);will-change:transform}
.fx-aurora .b1{width:48vmax;height:48vmax;left:-10vmax;top:-14vmax;
  background:radial-gradient(circle at 40% 40%,rgba(var(--fx-1),.55),rgba(var(--fx-1),0) 68%);
  animation:fxDrift1 26s ease-in-out infinite}
.fx-aurora .b2{width:42vmax;height:42vmax;right:-8vmax;top:-10vmax;
  background:radial-gradient(circle at 50% 50%,rgba(var(--fx-2),.42),rgba(var(--fx-2),0) 68%);
  animation:fxDrift2 32s ease-in-out infinite}
.fx-aurora .b3{width:40vmax;height:40vmax;left:26%;bottom:-18vmax;
  background:radial-gradient(circle at 50% 50%,rgba(var(--fx-3),.34),rgba(var(--fx-3),0) 68%);
  animation:fxDrift3 30s ease-in-out infinite}

/* brighter glow for dark-stage demos (voice agents) — follows the --fx tint too */
.fx-aurora[data-fx-theme="dark"]{opacity:.95}
.fx-aurora[data-fx-theme="dark"] .b1{background:radial-gradient(circle at 30% 30%,rgba(var(--fx-1),.5),rgba(var(--fx-1),0) 70%)}
.fx-aurora[data-fx-theme="dark"] .b2{background:radial-gradient(circle at 50% 50%,rgba(var(--fx-2),.45),rgba(var(--fx-2),0) 70%)}
.fx-aurora[data-fx-theme="dark"] .b3{background:radial-gradient(circle at 50% 50%,rgba(var(--fx-3),.34),rgba(var(--fx-3),0) 70%)}

@keyframes fxDrift1{0%,100%{transform:translate3d(0,0,0) scale(1)}33%{transform:translate3d(6vmax,4vmax,0) scale(1.12)}66%{transform:translate3d(-3vmax,7vmax,0) scale(.96)}}
@keyframes fxDrift2{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-7vmax,5vmax,0) scale(1.14)}}
@keyframes fxDrift3{0%,100%{transform:translate3d(0,0,0) scale(1)}40%{transform:translate3d(5vmax,-5vmax,0) scale(1.1)}80%{transform:translate3d(-4vmax,-2vmax,0) scale(.94)}}

/* ---- fail-open on-load entrance ----
   Elements are ONLY hidden once _fx.js confirms it ran (html.fx-anim).
   Without JS (or on error) they render normally. */
html.fx-anim [data-fx]{opacity:0;transform:translateY(18px);
  transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
html.fx-anim [data-fx].is-in{opacity:1;transform:none}

/* ---- signature sheen for a primary CTA (opt-in: .fx-shimmer) ---- */
.fx-shimmer{position:relative;overflow:hidden;isolation:isolate}
.fx-shimmer::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);
  transform:translateX(-130%);animation:fxSheen 6s ease-in-out infinite}
@keyframes fxSheen{0%,18%{transform:translateX(-130%)}42%,100%{transform:translateX(130%)}}

@media (prefers-reduced-motion:reduce){
  .fx-aurora span{animation:none!important}
  .fx-shimmer::after{display:none}
  html.fx-anim [data-fx]{opacity:1!important;transform:none!important;transition:none!important}
}