/* =====================================================================
   animations.css — keyframes, scroll-reveal classes, and the
   reduced-motion overrides (for visitors who ask for less motion).
   Motion is calm and fluid: ease-out, 200–600ms, only transform/opacity.
   ✏️ Safe to edit: durations and distances.
   ===================================================================== */

/* ---------- Scroll reveals (reveal.js adds .has-reveal and .is-visible) ---------- */
.has-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
  transition-delay: calc(var(--i, 0) * 80ms);
}

.has-reveal [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* Self-drawing SVG paths */
[data-draw] {
  transition: stroke-dashoffset 1.8s var(--ease-out);
}

/* Skill chips grow in like colonies */
.has-reveal .colony:not(.is-growing) > li {
  opacity: 0;
}

.colony.is-growing > li {
  animation: colony var(--dur-med) var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 45ms);
}

/* ---------- Keyframes ---------- */

/* Slowly morphing cell-membrane shape */
@keyframes membrane {
  0%, 100% { border-radius: 58% 42% 55% 45% / 48% 58% 42% 52%; }
  25% { border-radius: 45% 55% 48% 52% / 58% 44% 56% 42%; }
  50% { border-radius: 52% 48% 40% 60% / 45% 52% 48% 55%; }
  75% { border-radius: 42% 58% 57% 43% / 55% 46% 54% 45%; }
}

@keyframes pulse-ring {
  0% { opacity: 0.7; transform: scale(1); }
  80%, 100% { opacity: 0; transform: scale(2.6); }
}

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

@keyframes halo {
  0%, 100% { transform: scale(1); opacity: 0.25; }
  50% { transform: scale(1.4); opacity: 0.12; }
}

@keyframes ripple {
  from { opacity: 0.9; transform: scale(1); }
  to { opacity: 0; transform: scale(9); }
}

@keyframes cue-bubble {
  0% { opacity: 0; transform: translateY(0) scale(0.6); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-32px) scale(1); }
}

@keyframes bubble-rise {
  from { opacity: 0.9; transform: translate(0, 0) scale(0.6); }
  to { opacity: 0; transform: translate(var(--drift, 0), -55vh) scale(1.1); }
}

@keyframes colony {
  from { opacity: 0; transform: scale(0.6); }
  to { opacity: 1; transform: scale(1); }
}

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

@keyframes knight-hop {
  0% { transform: translate(0, 0); }
  35% { transform: translate(0, -18%); }
  65% { transform: translate(12%, -18%); }
  100% { transform: translate(0, 0); }
}

@keyframes lift {
  from { transform: translateY(0); }
  to { transform: translateY(-18%); }
}

@keyframes aperture {
  0%, 100% { transform: scale(1); }
  40% { transform: scale(0.25); }
}

@keyframes flash {
  0%, 100% { opacity: 0; }
  35% { opacity: 0.85; }
}

@keyframes draw-line {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}

@keyframes bob {
  from { transform: translateY(0); }
  to { transform: translateY(-5px); }
}

@keyframes ride {
  from { transform: translateX(-140px); }
  to { transform: translateX(calc(100vw + 140px)); }
}

/* ---------- One-off animated elements ---------- */
.bubble {
  position: fixed;
  z-index: var(--z-float);
  width: var(--size, 10px);
  height: var(--size, 10px);
  margin: calc(var(--size, 10px) / -2) 0 0 calc(var(--size, 10px) / -2);
  border: 1.5px solid var(--glow);
  border-radius: 50%;
  pointer-events: none;
  animation: bubble-rise 1.5s var(--ease-out) forwards;
}

.rider {
  position: fixed;
  bottom: var(--space-3);
  left: 0;
  z-index: var(--z-float);
  width: 96px;
  color: var(--coral);
  pointer-events: none;
  animation: ride 5s linear forwards;
}

.rider .ic-wheel {
  transform-box: fill-box;
  transform-origin: center;
  animation: spin 0.5s linear infinite;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }

  /* Flip cards cross-fade instead of rotating */
  .flip-card__inner,
  .flip-card.is-flipped .flip-card__inner {
    transform: none;
  }

  .flip-card__face {
    transition: opacity 300ms ease-out !important; /* a gentle cross-fade is fine */
  }

  .flip-card__back {
    transform: none;
    opacity: 0;
  }

  .flip-card.is-flipped .flip-card__back {
    opacity: 1;
  }

  .flip-card.is-flipped .flip-card__front {
    opacity: 0;
  }

  .rider {
    left: 50%;
    animation: none;
    transform: translateX(-50%);
  }
}