/* ii world — Animations
   Scroll reveal, hover effects, transitions */

/* ========== Scroll Reveal ========== */
[data-reveal] {
  opacity: 0;
  transition: opacity 0.6s ease, transform 0.6s ease;
}

[data-reveal="fade"] {
  /* Fade only */
}

[data-reveal="slide-up"] {
  transform: translateY(24px);
}

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

/* Stagger children */
[data-reveal-stagger] > [data-reveal] {
  transition-delay: calc(var(--reveal-index, 0) * 0.08s);
}

/* Respect prefers-reduced-motion: skip animation entirely so users on Reduce Motion
   never see permanently-invisible content if the JS observer fails or is throttled. */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ========== Loading spinner ========== */
@keyframes spin {
  to { transform: rotate(360deg); }
}

.spinner {
  width: 24px;
  height: 24px;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-accent);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
  margin: 0 auto;
}

/* ========== Page transitions ==========
   2026-04-24 — Fix disappearing-content bug on new-homepage:
   - Always start opacity:1 so even if the animation is paused (background tab,
     bfcache restore, prefers-reduced-motion zero-duration) the page is visible.
   - `animation-fill-mode: both` keeps the final state after the animation ends.
   - Reduced-motion users skip the fade entirely (matches [data-reveal] policy).
   The pre-fix rule used `from { opacity: 0 }` with no fill-mode and no reduced-
   motion override — when the animation paused at frame 0 (e.g. tab hidden during
   navigation, user-agent throttling), the entire <main> stayed at opacity:0, which
   manifested as the [ai:ai] caption + every other section "disappearing" on click. */
.main {
  opacity: 1;
  animation: pageIn 0.4s ease both;
}

@keyframes pageIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .main { animation: none; }
}