/* ============================================================
   AIOOS — motion-lux layer (motionsites-grade, base-safe)
   Everything here is ADDITIVE: base states stay fully visible;
   entrances play on top and settle back. Reduced-motion safe.
   ============================================================ */

/* ---- 1) hero light-beams: soft diagonal light sweeping through the glass ---- */
.hero-beams{position:absolute; inset:-8% -4%; z-index:0; pointer-events:none; overflow:hidden}
.hero-beams i{position:absolute; top:-30%; height:160%; border-radius:100px;
  background:linear-gradient(180deg, transparent, rgba(96,177,255,.20) 30%, rgba(34,211,238,.16) 55%, transparent 90%);
  filter:blur(26px); transform:rotate(16deg); opacity:0}
.hero-beams i:nth-child(1){left:12%; width:150px}
.hero-beams i:nth-child(2){left:38%; width:90px}
.hero-beams i:nth-child(3){left:66%; width:190px; filter:blur(34px)}
@media (prefers-reduced-motion:no-preference){
  .hero-beams i{animation:beamSweep 13s cubic-bezier(.45,.05,.55,.95) infinite}
  .hero-beams i:nth-child(2){animation-delay:4.2s; animation-duration:15s}
  .hero-beams i:nth-child(3){animation-delay:8.4s; animation-duration:17s}
}
@keyframes beamSweep{
  0%,100%{opacity:0; transform:rotate(16deg) translateX(-260px)}
  18%{opacity:.85}
  50%{opacity:.55; transform:rotate(16deg) translateX(200px)}
  82%{opacity:0; transform:rotate(16deg) translateX(460px)}
}
@media (max-width:980px){ .hero-beams{display:none} }

/* ---- 2) hero headline word entrance (JS wraps words, then unwraps) ---- */
h1 .mw{display:inline-block; overflow:hidden; vertical-align:bottom; padding-bottom:.14em; margin-bottom:-.14em}
h1 .mw > i{display:inline-block; font-style:inherit}
@media (prefers-reduced-motion:no-preference){
  h1 .mw > i{animation:wordUp .9s cubic-bezier(.16,1,.3,1) both; animation-delay:calc(.09s * var(--wi, 0))}
}
@keyframes wordUp{from{transform:translateY(112%) rotate(2.2deg)}to{transform:none}}
/* while split, the whole-block rise is suppressed (words carry the entrance) */
h1.h1-split{animation:none !important; opacity:1 !important; transform:none !important}

/* ---- 3) section headers: accent word underline draws in on reveal ---- */
.h2 .g{position:relative}
.h2 .g::after{content:''; position:absolute; left:.02em; right:.06em; bottom:.02em; height:.075em;
  border-radius:100px; background:linear-gradient(90deg,#2D6CF6,#22D3EE);
  transform:scaleX(0); transform-origin:left; opacity:.5}
@media (prefers-reduced-motion:no-preference){
  .sec-head.shown .g::after{animation:ulDraw 1s cubic-bezier(.7,0,.2,1) .35s both}
}
@keyframes ulDraw{0%{transform:scaleX(0)}55%{transform:scaleX(1); transform-origin:left}
  56%{transform-origin:right}100%{transform:scaleX(0); transform-origin:right}}

/* ---- 4) big glass panels tilt up as they enter (one-shot, settles to base) ---- */
@media (prefers-reduced-motion:no-preference){
  .demo-shell.shown{animation:panelIn 1s cubic-bezier(.16,1,.3,1) both; transform-origin:50% 100%}
  .zux-grid.shown{animation:panelIn 1s cubic-bezier(.16,1,.3,1) both; transform-origin:50% 100%}
  .vs-wrap.shown{animation:panelIn 1s cubic-bezier(.16,1,.3,1) both; transform-origin:50% 100%}
}
@keyframes panelIn{from{opacity:0; transform:perspective(1100px) rotateX(7deg) translateY(34px) scale(.985)}
  to{opacity:1; transform:none}}

/* ---- 5) dark stats band: slow light flowing across the glass ---- */
.stats{overflow:hidden}
.stats::after{content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:linear-gradient(112deg, transparent 34%, rgba(120,180,255,.14) 47%, rgba(94,234,212,.10) 53%, transparent 66%);
  background-size:280% 100%; background-position:120% 0}
@media (prefers-reduced-motion:no-preference){
  .stats::after{animation:bandLight 9s ease-in-out infinite}
}
@keyframes bandLight{0%{background-position:120% 0}55%,100%{background-position:-160% 0}}

/* ---- 6) cursor light: soft lens of light follows the pointer (JS lerps --cx/--cy) ---- */
.cursor-light{position:fixed; left:0; top:0; width:520px; height:520px; z-index:60; pointer-events:none; mix-blend-mode:multiply;
  transform:translate(calc(var(--cx, 50vw) - 260px), calc(var(--cy, 40vh) - 260px));
  background:radial-gradient(closest-side, rgba(96,177,255,.16), rgba(34,211,238,.07) 55%, transparent 75%);
  opacity:0; transition:opacity .6s ease}
.cursor-light.on{opacity:1}
@media (pointer:coarse), (max-width:980px){ .cursor-light{display:none} }
@media print{ .hero-beams,.cursor-light,.stats::after{display:none} }

/* ---- 7) emblem flashlight: the faint AIOOS watermark ignites under the cursor ---- */
.hero-emblem svg.lit{position:absolute; left:0; top:0; width:100%; height:100%; animation:none;
  opacity:0; transition:opacity .4s ease;
  filter:drop-shadow(0 0 16px rgba(45,108,246,.35));
  -webkit-mask-image:radial-gradient(220px circle at var(--ex,-500px) var(--ey,-500px), #000 18%, rgba(0,0,0,.4) 58%, transparent 80%);
          mask-image:radial-gradient(220px circle at var(--ex,-500px) var(--ey,-500px), #000 18%, rgba(0,0,0,.4) 58%, transparent 80%);
}
.hero-emblem.glow-on svg.lit{opacity:1}
.hero-emblem .lit .solid{opacity:.95}
.hero-emblem .lit .flowg{opacity:0}
/* voice packets: payloads traveling the six lines — some outbound, some inbound,
   like a live agent call over the wire. Odd lines carry a double-blip (ring-ring). */
@media (prefers-reduced-motion:no-preference){
  .hero-emblem .lit .flowg{opacity:.95}
  .hero-emblem .lit .flowg path{stroke:#fff; stroke-width:2.8; stroke-linecap:round; fill:none;
    stroke-dasharray:4 96; stroke-dashoffset:100; animation:embPacket 3s linear infinite}
  .hero-emblem .lit .flowg path:nth-child(odd){stroke-dasharray:2 2.4 2 93.6}
  .hero-emblem .lit .flowg path:nth-child(1){animation-duration:3.4s; animation-delay:.2s}
  .hero-emblem .lit .flowg path:nth-child(2){animation-duration:2.8s; animation-delay:1.5s; animation-direction:reverse}
  .hero-emblem .lit .flowg path:nth-child(3){animation-duration:3.7s; animation-delay:.8s}
  .hero-emblem .lit .flowg path:nth-child(4){animation-duration:3s; animation-delay:2.1s; animation-direction:reverse}
  .hero-emblem .lit .flowg path:nth-child(5){animation-duration:3.3s; animation-delay:.5s}
  .hero-emblem .lit .flowg path:nth-child(6){animation-duration:2.7s; animation-delay:1.8s; animation-direction:reverse}
}
@keyframes embPacket{to{stroke-dashoffset:0}}