/* ============================================================
   ANIMATIONS & TRANSITIONS
   ============================================================ */

/* ─── Page transition wipe ─── */
#page-transition {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-preloader) - 1);
  background: var(--ink);
  transform: scaleY(0);
  transform-origin: bottom;
  pointer-events: none;
  transition: transform 0.5s var(--ease-in-out);
}

#page-transition.out {
  transform: scaleY(1);
  transform-origin: bottom;
}

#page-transition.in {
  transform: scaleY(0);
  transform-origin: top;
}

/* ─── Reveal animation ─── */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.9s var(--ease-expo),
              transform 0.9s var(--ease-expo);
}

.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}

.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }
.reveal-delay-5 { transition-delay: 0.5s; }

/* ─── Keyframes ─── */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-20px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes pulse {
  0%, 100% { opacity: 0.4; }
  50%       { opacity: 1; }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes drawPath {
  from { stroke-dashoffset: var(--path-length); }
  to   { stroke-dashoffset: 0; }
}

@keyframes logoPulse {
  0%, 100% { filter: drop-shadow(0 0 8px rgba(108, 63, 232, 0.4)); }
  50%       { filter: drop-shadow(0 0 16px rgba(0, 212, 255, 0.6)); }
}