/* ================================================
   motion.css · will-change hints & reduced-motion
   ================================================ */

/* --- Will-change hints (applied sparingly, only during active animation) --- */
.env-scene.animating .envelope {
  will-change: transform, opacity;
}
.env-scene.animating .ribbon-v,
.env-scene.animating .ribbon-h {
  will-change: transform, opacity;
}
.env-scene.animating .bow {
  will-change: transform;
}
.env-scene.animating .env-flap {
  will-change: transform;
}
.env-scene.animating .inner-card {
  will-change: transform, box-shadow;
}

.hero-section.animating .char {
  will-change: transform, opacity;
}
.hero-section.animating .hero-art {
  will-change: transform, opacity;
}

.chapter.animating .glass-card {
  will-change: transform, opacity;
}

/* Particle canvas always composited */
#particle-canvas {
  will-change: transform;
}

/* Progress bar */
#bar {
  will-change: transform;
}

/* --- Reduced Motion --- */
@media (prefers-reduced-motion: reduce) {
  /* Skip all anime.js animations via the MOTION_OK JS flag.
     These CSS rules provide immediate visible states. */

  .env-scene {
    display: none !important;
  }

  .vellum {
    display: none !important;
  }

  #particle-canvas {
    display: none !important;
  }

  .hero-section,
  .chapter,
  .details-section,
  .footer-section {
    opacity: 1 !important;
    transform: none !important;
  }

  .glass-card,
  .hero-card {
    opacity: 1 !important;
    transform: none !important;
  }

  .char, .line {
    opacity: 1 !important;
    transform: none !important;
  }

  .genda i {
    transform: scale(1) !important;
    opacity: 1 !important;
  }

  .meta-row, .btn {
    opacity: 1 !important;
    transform: none !important;
  }

  .foil {
    /* Static gold color instead of animated gradient */
    -webkit-text-fill-color: var(--gold);
    background: none;
  }

  /* Vow list items always visible */
  .vows-list li {
    opacity: 1 !important;
    transform: none !important;
  }

  .scroll-cue {
    opacity: 1 !important;
    transform: none !important;
  }

  /* SVG draw paths shown completed */
  .draw {
    stroke-dashoffset: 0 !important;
  }
}