/* ============================================
   ON THE DAY — Animations
   Keyframes, reveal system, micro-interactions
   ============================================ */

/* ── Keyframes ── */

@keyframes aurora-spin {
  to { --aurora-angle: 360deg; }
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes breathe {
  0%, 100% { box-shadow: var(--shadow-sm); }
  50% { box-shadow: var(--shadow-md); }
}

@keyframes pulse-badge {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.4); }
  50% { box-shadow: 0 0 20px 4px rgba(74, 222, 128, 0.15); }
}

@keyframes draw-line {
  from { stroke-dashoffset: var(--line-length, 1000); }
  to { stroke-dashoffset: 0; }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

@keyframes spin-slow {
  to { transform: rotate(360deg); }
}

@keyframes slide-in-right {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes slide-in-left {
  from { transform: translateX(-100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes scale-bounce {
  0% { transform: scale(0); }
  60% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-3px); }
  40%, 80% { transform: translateX(3px); }
}

@keyframes odometer-in {
  from { transform: translateY(100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ── [data-reveal] System ── */
/* Elements with data-reveal are hidden until ScrollReveal triggers them */

[data-reveal] {
  opacity: 0;
  will-change: transform, opacity, clip-path;
}

[data-reveal].revealed {
  opacity: 1;
}

/* Fade Up */
[data-reveal="fade-up"] {
  transform: translateY(60px);
  transition:
    opacity var(--reveal-duration, 800ms) var(--ease-out-expo) var(--reveal-delay, 0ms),
    transform var(--reveal-duration, 800ms) var(--ease-out-expo) var(--reveal-delay, 0ms);
}
[data-reveal="fade-up"].revealed {
  transform: translateY(0);
}

/* Fade Down */
[data-reveal="fade-down"] {
  transform: translateY(-60px);
  transition:
    opacity var(--reveal-duration, 800ms) var(--ease-out-expo) var(--reveal-delay, 0ms),
    transform var(--reveal-duration, 800ms) var(--ease-out-expo) var(--reveal-delay, 0ms);
}
[data-reveal="fade-down"].revealed {
  transform: translateY(0);
}

/* Fade Left */
[data-reveal="fade-left"] {
  transform: translateX(-60px);
  transition:
    opacity var(--reveal-duration, 800ms) var(--ease-out-expo) var(--reveal-delay, 0ms),
    transform var(--reveal-duration, 800ms) var(--ease-out-expo) var(--reveal-delay, 0ms);
}
[data-reveal="fade-left"].revealed {
  transform: translateX(0);
}

/* Fade Right */
[data-reveal="fade-right"] {
  transform: translateX(60px);
  transition:
    opacity var(--reveal-duration, 800ms) var(--ease-out-expo) var(--reveal-delay, 0ms),
    transform var(--reveal-duration, 800ms) var(--ease-out-expo) var(--reveal-delay, 0ms);
}
[data-reveal="fade-right"].revealed {
  transform: translateX(0);
}

/* Scale */
[data-reveal="scale"] {
  transform: scale(0.9);
  transition:
    opacity var(--reveal-duration, 800ms) var(--ease-out-expo) var(--reveal-delay, 0ms),
    transform var(--reveal-duration, 800ms) var(--ease-spring) var(--reveal-delay, 0ms);
}
[data-reveal="scale"].revealed {
  transform: scale(1);
}

/* Clip Up — reveal from bottom via clip-path */
[data-reveal="clip-up"] {
  clip-path: inset(100% 0 0 0);
  opacity: 1; /* clip handles visibility */
  transition: clip-path var(--reveal-duration, 800ms) var(--ease-out-expo) var(--reveal-delay, 0ms);
}
[data-reveal="clip-up"].revealed {
  clip-path: inset(0 0 0 0);
}

/* Clip Left */
[data-reveal="clip-left"] {
  clip-path: inset(0 100% 0 0);
  opacity: 1;
  transition: clip-path var(--reveal-duration, 800ms) var(--ease-out-expo) var(--reveal-delay, 0ms);
}
[data-reveal="clip-left"].revealed {
  clip-path: inset(0 0 0 0);
}

/* Split Text — handled by JS, CSS provides the transition */
[data-reveal="split-text"] {
  opacity: 1; /* words handle their own visibility */
}

/* Stagger Children — each child gets fade-up with delay */
[data-reveal="stagger-children"] {
  opacity: 1;
}
[data-reveal="stagger-children"] > * {
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity var(--duration-slow) var(--ease-out-expo),
    transform var(--duration-slow) var(--ease-out-expo);
}
[data-reveal="stagger-children"].revealed > * {
  opacity: 1;
  transform: translateY(0);
}

/* ── Micro-Interaction Classes ── */

.hover-lift {
  transition: transform var(--duration-fast) var(--ease-out-expo),
              box-shadow var(--duration-fast) var(--ease-out-expo);
}
.hover-lift:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: var(--shadow-lg);
}

.hover-glow {
  transition: box-shadow var(--duration-normal) var(--ease-smooth);
}
.hover-glow:hover {
  box-shadow: var(--shadow-glow);
}

.card-breathe {
  animation: breathe 4s ease-in-out infinite;
}

.badge-pulse {
  animation: pulse-badge 2s ease-in-out infinite;
}

.float {
  animation: float 6s ease-in-out infinite;
}

/* ── Loading Skeleton ── */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--slate-200) 0%,
    var(--slate-100) 40%,
    var(--slate-200) 80%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  border-radius: var(--radius-md);
}

.skeleton--dark {
  background: linear-gradient(
    90deg,
    var(--dark-surface) 0%,
    var(--dark-elevated) 40%,
    var(--dark-surface) 80%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
}

/* ── SVG Line Draw ── */
.draw-path {
  stroke-dasharray: var(--line-length, 1000);
  stroke-dashoffset: var(--line-length, 1000);
}

.draw-path.revealed {
  animation: draw-line var(--duration-cinematic) var(--ease-out-expo) forwards;
}

/* ── Odometer Digits ── */
.odometer-digit {
  display: inline-block;
  overflow: hidden;
  position: relative;
}

.odometer-digit__inner {
  display: inline-block;
  animation: odometer-in var(--duration-slow) var(--ease-out-expo) both;
}

/* ── Notification Entrance ── */
.notification-enter {
  animation: slide-in-right var(--duration-normal) var(--ease-spring);
}

/* ── Form Shake (validation error) ── */
.shake {
  animation: shake 300ms ease;
}

/* ── Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }

  [data-reveal="stagger-children"] > * {
    opacity: 1 !important;
    transform: none !important;
  }

  .split-word {
    clip-path: none !important;
  }

  .hover-lift:hover {
    transform: none;
  }

  .velocity-skew {
    transform: none !important;
  }
}