/* KD2864 depth & motion layer (paired with fx.js). Every rule is scoped to a
   class fx.js sets, so without JavaScript nothing here applies. */

/* ---- 3D tilt ---------------------------------------------------------- */
.fx-tilt-ready :where(.why-card, .stat-box, .event-card, .req-card, .roles-card,
  .status-checker-card, .kpp-tile, .kvk-stage-card, .quota-panel, .podium-slot) {
  position: relative;
  transform: perspective(1000px) rotateX(var(--fx-rx, 0deg)) rotateY(var(--fx-ry, 0deg));
  transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.5s ease;
}

.fx-tilt-ready .fx-tilting {
  z-index: 3;
  transition: transform 0.12s linear, box-shadow 0.4s ease;
  box-shadow: 0 30px 60px -30px rgb(0 0 0 / 0.85), 0 0 0 1px rgb(var(--gold-rgb) / 0.22);
}

/* Light that follows the cursor across the card */
.fx-glare {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(circle at var(--fx-gx, 50%) var(--fx-gy, 50%),
              rgb(246 232 196 / 0.13), rgb(246 232 196 / 0.04) 30%, transparent 60%);
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 0.45s ease;
}
.fx-tilting > .fx-glare { opacity: 1; }

/* Icons float a little above their card */
.fx-tilt-ready :where(.why-card .why-icon-box, .stat-box .stat-num, .kpp-tile .kpp-tile-val) {
  transform: translate(calc(var(--fx-dx, 0) * 10px), calc(var(--fx-dy, 0) * 10px));
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.fx-tilting :where(.why-icon-box, .stat-num, .kpp-tile-val) { transition: transform 0.12s linear; }

/* ---- Scroll reveal ---------------------------------------------------- */
.fx-reveal-ready .fx-reveal {
  opacity: 0;
  translate: 0 34px;
  scale: 0.97;
  transition: opacity 0.9s ease, translate 1.1s cubic-bezier(0.2, 0.8, 0.2, 1), scale 1.1s cubic-bezier(0.2, 0.8, 0.2, 1);
  transition-delay: var(--fx-delay, 0ms);
}
.fx-reveal-ready .fx-reveal.fx-in {
  opacity: 1;
  translate: 0 0;
  scale: 1;
}

@media (prefers-reduced-motion: reduce) {
  .fx-reveal-ready .fx-reveal { opacity: 1; translate: none; scale: none; transition: none; }
}