/* ─────────────────────────────────────────────────────────────────────────────
   e16-cascade.css — staggered 3D cascade reveal for grid sections
   Depends on: e16-cascade.js (adds .cascade-visible class)
───────────────────────────────────────────────────────────────────────────── */

/* ── Base hidden state for cascade items ── */
.cascade-item {
  will-change: transform, opacity;
  transform: translateY(32px) translateZ(-20px) rotateX(8deg);
  opacity: 0;
  transition:
    transform 0.6s cubic-bezier(0.34, 1.2, 0.64, 1),
    opacity   0.5s cubic-bezier(0.23, 1, 0.32, 1);
  transition-delay: var(--cascade-delay, 0ms);
  transform-style: preserve-3d;
}

/* ── Revealed state ── */
.cascade-item.cascade-visible {
  transform: translateY(0) translateZ(0) rotateX(0deg);
  opacity: 1;
}

/* ── Container perspective ── */
.cascade-container {
  perspective: 800px;
  perspective-origin: 50% 0%;
}

/* ── Feature cards get a rise with rotation ── */
.features-grid .cascade-item,
.feature-list .cascade-item {
  transform: translateY(40px) translateZ(-30px) rotateX(12deg) scale(0.97);
}

.features-grid .cascade-item.cascade-visible,
.feature-list .cascade-item.cascade-visible {
  transform: translateY(0) translateZ(0) rotateX(0deg) scale(1);
}

/* ── Event cards — horizontal slide-in from alternating sides ── */
.events-grid .cascade-item:nth-child(odd) {
  transform: translateX(-24px) translateZ(-15px) rotateY(4deg);
  opacity: 0;
}

.events-grid .cascade-item:nth-child(even) {
  transform: translateX(24px) translateZ(-15px) rotateY(-4deg);
  opacity: 0;
}

.events-grid .cascade-item.cascade-visible {
  transform: translateX(0) translateZ(0) rotateY(0deg) !important;
  opacity: 1;
}

/* ── Category tiles — scale pop with 3D ── */
.categories-grid .cascade-item {
  transform: scale(0.88) translateZ(-20px) rotateX(6deg);
  opacity: 0;
}

.categories-grid .cascade-item.cascade-visible {
  transform: scale(1) translateZ(0) rotateX(0deg);
  opacity: 1;
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .cascade-item {
    transform: none !important;
    opacity: 1 !important;
    transition: none !important;
  }
}