/* ============================================================
   3D-Card-Reveals — Karten starten leicht in 3D gedreht (12° Y) und
   drehen smooth in die finale Position beim IntersectionObserver-Trigger.
   Kalibriert auf Linear/Vercel-Niveau (dezent, nicht aufdringlich).
   ============================================================ */
.reveal-3d {
  opacity: 0;
  transform: perspective(1200px) rotateY(12deg) rotateX(4deg)
             translateY(40px) translateZ(-60px);
  transform-origin: center center;
  transition:
    opacity 0.9s var(--ease-apple),
    transform 1.2s var(--ease-apple);
  will-change: transform, opacity;
}
.reveal-3d.is-in-view {
  opacity: 1;
  transform: perspective(1200px) rotateY(0deg) rotateX(0deg)
             translateY(0) translateZ(0);
}

/* Variation: explizit from-right ODER automatisch jede 2. Karte im Grid */
.reveal-3d.from-right,
.reveal-3d-grid > .reveal-3d:nth-child(even) {
  transform: perspective(1200px) rotateY(-12deg) rotateX(4deg)
             translateY(40px) translateZ(-60px);
}
.reveal-3d.from-right.is-in-view,
.reveal-3d-grid > .reveal-3d:nth-child(even).is-in-view {
  transform: perspective(1200px) rotateY(0deg) rotateX(0deg)
             translateY(0) translateZ(0);
}

/* Stagger im Grid */
.reveal-3d-grid > .reveal-3d:nth-child(1).is-in-view { transition-delay: 0s; }
.reveal-3d-grid > .reveal-3d:nth-child(2).is-in-view { transition-delay: 0.08s; }
.reveal-3d-grid > .reveal-3d:nth-child(3).is-in-view { transition-delay: 0.16s; }
.reveal-3d-grid > .reveal-3d:nth-child(4).is-in-view { transition-delay: 0.24s; }
.reveal-3d-grid > .reveal-3d:nth-child(5).is-in-view { transition-delay: 0.32s; }
.reveal-3d-grid > .reveal-3d:nth-child(6).is-in-view { transition-delay: 0.40s; }

@media (prefers-reduced-motion: reduce) {
  .reveal-3d { opacity: 1; transform: none; transition: none; }
}