/* ===================================================================
   Shaz Vision — ambient animation layer
   Two decorative systems, both injected by dist/sv-anim.js:

   [data-sv-hearts]  floating brand hearts (the aiPitch treatment,
                     reused in other sections)
   [data-sv-shapes]  CSS-3D primitives — cube, ring, pyramid, orb —
                     that spin on their own axes and drift with
                     scroll + pointer parallax

   Both layers are pointer-events:none decoration and collapse to a
   lighter version on small screens / reduced-motion.
   =================================================================== */

.sv-fx{
  position:absolute;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  /* Negative z keeps the layer above the host's own background but under
     every one of its children, without touching their positioning. */
  z-index:-1;
  perspective:90rem;
  perspective-origin:50% 50%;
}
/* inset:0 needs a positioned ancestor; the class is only applied by the
   script to hosts that compute to position:static. */
.sv-fx-host{position:relative}
/* A negative-z child only paints above its parent's background when that
   parent is a stacking context. isolation gives us one with no z-index
   side effects on the host's siblings. */
.sv-fx-stack{isolation:isolate}

/* --- hearts ----------------------------------------------------- */
.sv-heart{
  position:absolute;
  width:6.3rem;
  height:5.3rem;
  will-change:transform;
  transform:translate3d(0,0,0);
}
.sv-heart img{width:100%;height:100%;display:block;object-fit:contain}

/* --- 3D primitives ---------------------------------------------- */
.sv-shape{
  position:absolute;
  width:var(--s,9rem);
  height:var(--s,9rem);
  transform-style:preserve-3d;
  will-change:transform;
  opacity:var(--o,.85);
}
.sv-shape__spin{
  position:absolute;
  inset:0;
  transform-style:preserve-3d;
  animation:sv-spin var(--dur,18s) linear infinite;
  animation-delay:var(--delay,0s);
}

@keyframes sv-spin{
  from{transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg)}
  to{transform:rotateX(360deg) rotateY(720deg) rotateZ(360deg)}
}
@keyframes sv-spin-y{
  from{transform:rotateY(0deg)}
  to{transform:rotateY(360deg)}
}

/* cube — six translucent faces with a brand-gradient wash */
.sv-shape--cube .sv-face{
  position:absolute;
  inset:0;
  border:1px solid var(--c1,#8D7CDA);
  border-radius:.6rem;
  background:linear-gradient(135deg,color-mix(in srgb,var(--c1,#8D7CDA) 26%,transparent),color-mix(in srgb,var(--c2,#52CAD8) 12%,transparent));
  backdrop-filter:blur(2px);
}
.sv-shape--cube .sv-face:nth-child(1){transform:translateZ(calc(var(--s,9rem) / 2))}
.sv-shape--cube .sv-face:nth-child(2){transform:rotateY(180deg) translateZ(calc(var(--s,9rem) / 2))}
.sv-shape--cube .sv-face:nth-child(3){transform:rotateY(90deg) translateZ(calc(var(--s,9rem) / 2))}
.sv-shape--cube .sv-face:nth-child(4){transform:rotateY(-90deg) translateZ(calc(var(--s,9rem) / 2))}
.sv-shape--cube .sv-face:nth-child(5){transform:rotateX(90deg) translateZ(calc(var(--s,9rem) / 2))}
.sv-shape--cube .sv-face:nth-child(6){transform:rotateX(-90deg) translateZ(calc(var(--s,9rem) / 2))}

/* ring — concentric rims stacked in depth read as a torus */
.sv-shape--ring .sv-rim{
  position:absolute;
  inset:0;
  border-radius:50%;
  border:1px solid var(--c1,#52CAD8);
  box-shadow:0 0 1.2rem color-mix(in srgb,var(--c1,#52CAD8) 45%,transparent) inset;
}
.sv-shape--ring .sv-rim:nth-child(1){transform:rotateX(72deg)}
.sv-shape--ring .sv-rim:nth-child(2){transform:rotateX(72deg) rotateY(60deg);border-color:var(--c2,#9FE870)}
.sv-shape--ring .sv-rim:nth-child(3){transform:rotateX(72deg) rotateY(120deg);border-color:var(--c1,#52CAD8)}

/* pyramid — four triangles clipped from gradient panels */
.sv-shape--pyramid .sv-side{
  position:absolute;
  inset:0;
  clip-path:polygon(50% 0%,100% 100%,0% 100%);
  background:linear-gradient(180deg,color-mix(in srgb,var(--c1,#FF89C4) 55%,transparent),color-mix(in srgb,var(--c2,#FF9481) 16%,transparent));
  transform-origin:50% 100%;
}
.sv-shape--pyramid .sv-side:nth-child(1){transform:translateZ(calc(var(--s,9rem) / 3.4)) rotateX(28deg)}
.sv-shape--pyramid .sv-side:nth-child(2){transform:rotateY(90deg) translateZ(calc(var(--s,9rem) / 3.4)) rotateX(28deg)}
.sv-shape--pyramid .sv-side:nth-child(3){transform:rotateY(180deg) translateZ(calc(var(--s,9rem) / 3.4)) rotateX(28deg)}
.sv-shape--pyramid .sv-side:nth-child(4){transform:rotateY(270deg) translateZ(calc(var(--s,9rem) / 3.4)) rotateX(28deg)}

/* orb — a lit sphere; only the highlight needs to move */
.sv-shape--orb .sv-orb{
  position:absolute;
  inset:0;
  border-radius:50%;
  background:
    radial-gradient(circle at 32% 28%,rgba(255,255,255,.9),transparent 42%),
    radial-gradient(circle at 68% 74%,var(--c2,#FF9481),transparent 62%),
    radial-gradient(circle at 50% 50%,var(--c1,#8D7CDA),color-mix(in srgb,var(--c1,#8D7CDA) 20%,transparent) 78%);
  box-shadow:0 0 3rem color-mix(in srgb,var(--c1,#8D7CDA) 40%,transparent);
}
.sv-shape--orb .sv-shape__spin{animation-name:sv-spin-y}

/* --- reduced motion / small screens ----------------------------- */
@media (prefers-reduced-motion:reduce){
  .sv-shape__spin{animation:none}
  .sv-heart,.sv-shape{transition:none!important}
}
@media screen and (orientation:portrait) and (max-width:800px),
       screen and (orientation:landscape) and (max-width:1200px) and (max-height:600px){
  /* Fewer, smaller, dimmer — the mobile layouts are tight and these are
     purely decorative. */
  .sv-fx{perspective:60rem}
  .sv-heart{width:4rem;height:3.4rem;opacity:.75}
  .sv-shape{opacity:calc(var(--o,.85) * .6)}
}