/* ═══════════════════════════════════════════════════════════════
   HxE Premium Motion — schlanke CSS-Schicht zu motion.js.
   Keine Style-Änderungen am Design — nur Animations-Hooks.
   ═══════════════════════════════════════════════════════════════ */

/* ── Reveal: Element bleibt komplett unsichtbar bis IntersectionObserver
       die "in"-Klasse setzt. Default: Fade + 24px Slide-Up. ── */
[data-reveal]{
  opacity:0;
  transform:translate3d(0,24px,0);
  transition:
    opacity .9s cubic-bezier(.2,.7,.2,1),
    transform .9s cubic-bezier(.2,.7,.2,1);
  will-change:opacity, transform;
}
[data-reveal].in{ opacity:1; transform:none; }

/* Stagger: Kinder erben Verzögerung über --i */
[data-stagger] > *{ transition-delay:calc(var(--i,0) * 70ms); }

/* Slide-Varianten für Headline/Hero */
[data-reveal="left"]  { transform:translate3d(-32px,0,0); }
[data-reveal="right"] { transform:translate3d(32px,0,0); }
[data-reveal="zoom"]  { transform:scale(.94); }

/* ── Tilt-Card: Mouse-3D. Inhalt bekommt einen leichten Lift via
       --tx/--ty Variables, JS schreibt sie. Inner-Layer kann mit
       data-tilt-depth eine eigene Tiefe definieren. ── */
.tilt-card{
  transform:perspective(1100px)
            rotateX(var(--rx,0deg))
            rotateY(var(--ry,0deg))
            translateZ(0);
  transform-style:preserve-3d;
  transition:transform .55s cubic-bezier(.2,.8,.2,1);
  will-change:transform;
}
.tilt-card .tilt-inner{
  transform:translate3d(var(--tx,0),var(--ty,0),var(--tz,28px));
  transition:transform .55s cubic-bezier(.2,.8,.2,1);
  pointer-events:none;
}
/* Glanz-Sheen (mouse-light), erscheint nur on-hover */
.tilt-card{ position:relative; isolation:isolate; }
.tilt-card::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),
              rgba(196,181,253,.12), transparent 55%);
  opacity:0; transition:opacity .35s ease;
  border-radius:inherit;
}
.tilt-card.is-hover::after{ opacity:1; }

/* ── Magnetic Button — JS schreibt --mx/--my; CSS interpoliert. ── */
.magnetic{
  transform:translate3d(var(--mgx,0),var(--mgy,0),0);
  transition:transform .25s cubic-bezier(.2,.8,.2,1);
  will-change:transform;
}

/* ── Parallax: JS setzt --py auf die Y-Drift. Eingebaut für Orbs. ── */
[data-parallax]{
  transform:translate3d(0,var(--py,0),0);
  will-change:transform;
}

/* ── Depth-Hover für Cards die kein Tilt haben — sanfter Lift. ── */
.depth-hover{ transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease; }
.depth-hover:hover{ transform:translate3d(0,-6px,0); }

/* ── Hero-Particle-Canvas — fix Layer hinter Content. ── */
.hero-particles{
  position:absolute; inset:0; z-index:0;
  pointer-events:none; opacity:.85;
}

/* ── Globaler Reduced-Motion-Reset ── */
@media (prefers-reduced-motion: reduce){
  [data-reveal],
  [data-reveal].in,
  .tilt-card,
  .tilt-card .tilt-inner,
  .magnetic,
  [data-parallax],
  .depth-hover{
    transition:none !important;
    transform:none !important;
    opacity:1 !important;
  }
  .hero-particles{ display:none !important; }
}