/**
 * ============================================================
 * EduLab Interaktif
 * File        : assets/css/animations.css
 * Deskripsi   : Animasi global dan efek transisi EduLab Interaktif.
 * Versi       : 1.0.0
 * Author      : EduLab Interaktif
 * ============================================================
 *
 * Fungsi file:
 * - Menyediakan animasi halus untuk halaman, kartu, tombol, hero,
 *   loading, dropdown, modal, toast, dan elemen interaktif.
 * - Mendukung pengalaman belajar yang modern, lembut, dan tidak
 *   membingungkan siswa.
 * - Menghormati preferensi aksesibilitas prefers-reduced-motion.
 *
 * Catatan:
 * - Variabel tema berasal dari assets/css/themes.css
 * - Struktur dasar berasal dari assets/css/base.css
 * - Layout halaman berasal dari assets/css/layout.css
 * - Komponen UI berasal dari assets/css/components.css
 */

/* ============================================================
   1. Animation Variables
============================================================ */

:root {
  --animation-delay-none: 0ms;
  --animation-delay-xs: 60ms;
  --animation-delay-sm: 120ms;
  --animation-delay-md: 180ms;
  --animation-delay-lg: 260ms;
  --animation-delay-xl: 360ms;

  --animation-distance-xs: 4px;
  --animation-distance-sm: 8px;
  --animation-distance-md: 14px;
  --animation-distance-lg: 24px;
  --animation-distance-xl: 42px;

  --animation-scale-sm: 0.96;
  --animation-scale-md: 0.92;
  --animation-scale-lg: 0.86;
}

/* ============================================================
   2. Global Smooth Transitions
============================================================ */

body,
.site-header,
.site-footer,
.card,
.button,
.btn,
.badge,
.input,
.select,
.textarea,
.modal,
.dropdown__menu,
.empty-state,
.progress__bar,
.hero-orbit,
.hero-orbit__center,
.hero-orbit__item {
  transition-duration: var(--duration-normal);
  transition-timing-function: var(--ease-standard);
}

body {
  transition-property: background-color, color;
}

.site-header,
.site-footer {
  transition-property:
    background-color,
    border-color,
    box-shadow,
    backdrop-filter;
}

.card,
.empty-state,
.modal {
  transition-property:
    transform,
    opacity,
    background-color,
    border-color,
    box-shadow,
    color;
}

/* ============================================================
   3. Page / View Entrance
============================================================ */

.animate-view-in,
.view {
  animation: edulab-view-in var(--duration-slow) var(--ease-standard) both;
}

.animate-fade-in {
  animation: edulab-fade-in var(--duration-slow) var(--ease-standard) both;
}

.animate-fade-out {
  animation: edulab-fade-out var(--duration-normal) var(--ease-standard) both;
}

.animate-slide-up {
  animation: edulab-slide-up var(--duration-slow) var(--ease-standard) both;
}

.animate-slide-down {
  animation: edulab-slide-down var(--duration-slow) var(--ease-standard) both;
}

.animate-slide-left {
  animation: edulab-slide-left var(--duration-slow) var(--ease-standard) both;
}

.animate-slide-right {
  animation: edulab-slide-right var(--duration-slow) var(--ease-standard) both;
}

.animate-scale-in {
  animation: edulab-scale-in var(--duration-normal) var(--ease-bounce) both;
}

.animate-pop-in {
  animation: edulab-pop-in var(--duration-slow) var(--ease-bounce) both;
}

.animate-soft-blur-in {
  animation: edulab-soft-blur-in var(--duration-slower) var(--ease-standard) both;
}

/* ============================================================
   4. Stagger Utilities
============================================================ */

.stagger-children > * {
  animation: edulab-stagger-in var(--duration-slow) var(--ease-standard) both;
}

.stagger-children > *:nth-child(1) {
  animation-delay: var(--animation-delay-none);
}

.stagger-children > *:nth-child(2) {
  animation-delay: var(--animation-delay-xs);
}

.stagger-children > *:nth-child(3) {
  animation-delay: var(--animation-delay-sm);
}

.stagger-children > *:nth-child(4) {
  animation-delay: var(--animation-delay-md);
}

.stagger-children > *:nth-child(5) {
  animation-delay: var(--animation-delay-lg);
}

.stagger-children > *:nth-child(6) {
  animation-delay: var(--animation-delay-xl);
}

.stagger-children > *:nth-child(n + 7) {
  animation-delay: 420ms;
}

.level-grid > *,
.subject-grid > *,
.concept-grid > *,
.module-grid > *,
.grid-auto > * {
  animation: edulab-card-reveal var(--duration-slow) var(--ease-standard) both;
}

.level-grid > *:nth-child(1),
.subject-grid > *:nth-child(1),
.concept-grid > *:nth-child(1),
.module-grid > *:nth-child(1),
.grid-auto > *:nth-child(1) {
  animation-delay: 20ms;
}

.level-grid > *:nth-child(2),
.subject-grid > *:nth-child(2),
.concept-grid > *:nth-child(2),
.module-grid > *:nth-child(2),
.grid-auto > *:nth-child(2) {
  animation-delay: 80ms;
}

.level-grid > *:nth-child(3),
.subject-grid > *:nth-child(3),
.concept-grid > *:nth-child(3),
.module-grid > *:nth-child(3),
.grid-auto > *:nth-child(3) {
  animation-delay: 140ms;
}

.level-grid > *:nth-child(4),
.subject-grid > *:nth-child(4),
.concept-grid > *:nth-child(4),
.module-grid > *:nth-child(4),
.grid-auto > *:nth-child(4) {
  animation-delay: 200ms;
}

.level-grid > *:nth-child(5),
.subject-grid > *:nth-child(5),
.concept-grid > *:nth-child(5),
.module-grid > *:nth-child(5),
.grid-auto > *:nth-child(5) {
  animation-delay: 260ms;
}

.level-grid > *:nth-child(n + 6),
.subject-grid > *:nth-child(n + 6),
.concept-grid > *:nth-child(n + 6),
.module-grid > *:nth-child(n + 6),
.grid-auto > *:nth-child(n + 6) {
  animation-delay: 320ms;
}

/* ============================================================
   5. Hero Animations
============================================================ */

.hero-section__content {
  animation: edulab-hero-content-in 720ms var(--ease-standard) both;
}

.hero-section__visual {
  animation: edulab-hero-visual-in 820ms var(--ease-standard) 120ms both;
}

.hero-orbit {
  animation:
    edulab-float-slow 7s ease-in-out infinite,
    edulab-soft-glow 5s ease-in-out infinite alternate;
}

.hero-orbit::before {
  animation: edulab-spin-slow 24s linear infinite;
}

.hero-orbit::after {
  animation: edulab-spin-slow-reverse 18s linear infinite;
}

.hero-orbit__center {
  animation: edulab-pulse-soft 3.2s ease-in-out infinite;
}

.hero-orbit__item--one {
  animation: edulab-orbit-item-float-one 4.8s ease-in-out infinite;
}

.hero-orbit__item--two {
  animation: edulab-orbit-item-float-two 5.2s ease-in-out infinite;
}

.hero-orbit__item--three {
  animation: edulab-orbit-item-float-three 5.5s ease-in-out infinite;
}

.hero-orbit__item--four {
  animation: edulab-orbit-item-float-four 5s ease-in-out infinite;
}

.app-background__gradient--one {
  animation: edulab-background-drift-one 16s ease-in-out infinite alternate;
}

.app-background__gradient--two {
  animation: edulab-background-drift-two 18s ease-in-out infinite alternate;
}

.app-background__grid {
  animation: edulab-grid-drift 28s linear infinite;
}

/* ============================================================
   6. Interactive Hover Animations
============================================================ */

.hover-lift {
  transition:
    transform var(--transition-normal),
    box-shadow var(--transition-normal),
    border-color var(--transition-normal);
}

.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
}

.hover-scale {
  transition: transform var(--transition-fast);
}

.hover-scale:hover {
  transform: scale(1.025);
}

.hover-glow {
  transition:
    box-shadow var(--transition-normal),
    border-color var(--transition-normal);
}

.hover-glow:hover {
  border-color: var(--card-border-hover);
  box-shadow: var(--shadow-card-hover);
}

.hover-tilt {
  transition:
    transform var(--transition-normal),
    box-shadow var(--transition-normal);
  transform-style: preserve-3d;
}

.hover-tilt:hover {
  transform: perspective(900px) rotateX(1.5deg) rotateY(-1.5deg) translateY(-4px);
  box-shadow: var(--shadow-card-hover);
}

.card:hover .card__icon,
.level-card:hover .level-card__icon,
.subject-card:hover .subject-card__icon,
.module-card:hover .module-card__icon {
  animation: edulab-icon-bounce 520ms var(--ease-bounce) both;
}

.button--primary:hover,
.btn--primary:hover {
  animation: edulab-button-glow 900ms ease-in-out both;
}

/* ============================================================
   7. Loading / Feedback Animations
============================================================ */

.loading-state__spinner {
  animation: edulab-spin 850ms linear infinite;
}

.is-loading {
  position: relative;
  pointer-events: none;
}

.is-loading::after {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  border-radius: inherit;
  content: "";
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.26),
      transparent
    );
  animation: edulab-shimmer 1.2s ease-in-out infinite;
}

.pulse {
  animation: edulab-pulse 1.6s ease-in-out infinite;
}

.pulse-soft {
  animation: edulab-pulse-soft 2.6s ease-in-out infinite;
}

.bounce-soft {
  animation: edulab-bounce-soft 1.8s ease-in-out infinite;
}

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

.float-slow {
  animation: edulab-float-slow 7s ease-in-out infinite;
}

.shimmer {
  position: relative;
  overflow: hidden;
}

.shimmer::after {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.32),
      transparent
    );
  transform: translateX(-100%);
  animation: edulab-shimmer 1.3s ease-in-out infinite;
}

.skeleton::after {
  animation: edulab-skeleton 1.2s ease-in-out infinite;
}

/* ============================================================
   8. Modal / Dropdown / Toast Animations
============================================================ */

.modal-backdrop {
  animation: edulab-backdrop-in var(--duration-normal) var(--ease-standard) both;
}

.modal {
  animation: edulab-modal-in var(--duration-slow) var(--ease-bounce) both;
}

.dropdown.is-open .dropdown__menu,
.dropdown[open] .dropdown__menu {
  animation: edulab-dropdown-in var(--duration-normal) var(--ease-standard) both;
}

.toast {
  animation: edulab-toast-in var(--duration-normal) var(--ease-standard) both;
}

.toast.is-leaving {
  animation: edulab-toast-out var(--duration-normal) var(--ease-standard) both;
}

/* ============================================================
   9. Progress Animations
============================================================ */

.progress__bar {
  position: relative;
  overflow: hidden;
}

.progress__bar::after {
  position: absolute;
  inset: 0;
  content: "";
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.34),
      transparent
    );
  transform: translateX(-100%);
  animation: edulab-progress-shine 2.2s ease-in-out infinite;
}

.progress-ring {
  animation: edulab-scale-in var(--duration-slow) var(--ease-bounce) both;
}

/* ============================================================
   10. Route Transition States
============================================================ */

.route-enter {
  animation: edulab-route-enter var(--duration-slow) var(--ease-standard) both;
}

.route-exit {
  animation: edulab-route-exit var(--duration-normal) var(--ease-standard) both;
}

[data-route-transition="fade"] {
  animation: edulab-fade-in var(--duration-normal) var(--ease-standard) both;
}

[data-route-transition="slide"] {
  animation: edulab-slide-up var(--duration-slow) var(--ease-standard) both;
}

[data-route-transition="scale"] {
  animation: edulab-scale-in var(--duration-normal) var(--ease-bounce) both;
}

/* ============================================================
   11. State Animation Helpers
============================================================ */

.is-entering {
  animation: edulab-fade-in var(--duration-normal) var(--ease-standard) both;
}

.is-leaving {
  animation: edulab-fade-out var(--duration-normal) var(--ease-standard) both;
}

.is-hidden-soft {
  opacity: 0;
  visibility: hidden;
  transform: translateY(var(--animation-distance-sm));
  transition:
    opacity var(--transition-normal),
    visibility var(--transition-normal),
    transform var(--transition-normal);
}

.is-visible-soft {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition:
    opacity var(--transition-normal),
    visibility var(--transition-normal),
    transform var(--transition-normal);
}

/* ============================================================
   12. Keyframes: Basic Entrances
============================================================ */

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

  to {
    opacity: 1;
  }
}

@keyframes edulab-fade-out {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes edulab-slide-up {
  from {
    opacity: 0;
    transform: translateY(var(--animation-distance-lg));
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes edulab-slide-down {
  from {
    opacity: 0;
    transform: translateY(calc(var(--animation-distance-lg) * -1));
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes edulab-slide-left {
  from {
    opacity: 0;
    transform: translateX(var(--animation-distance-lg));
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes edulab-slide-right {
  from {
    opacity: 0;
    transform: translateX(calc(var(--animation-distance-lg) * -1));
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes edulab-scale-in {
  from {
    opacity: 0;
    transform: scale(var(--animation-scale-sm));
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes edulab-pop-in {
  0% {
    opacity: 0;
    transform: scale(var(--animation-scale-md)) translateY(var(--animation-distance-md));
  }

  70% {
    opacity: 1;
    transform: scale(1.025) translateY(0);
  }

  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes edulab-soft-blur-in {
  from {
    opacity: 0;
    filter: blur(10px);
    transform: translateY(var(--animation-distance-md));
  }

  to {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
  }
}

/* ============================================================
   13. Keyframes: View and Cards
============================================================ */

@keyframes edulab-view-in {
  from {
    opacity: 0;
    transform: translateY(var(--animation-distance-md));
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes edulab-stagger-in {
  from {
    opacity: 0;
    transform: translateY(var(--animation-distance-md)) scale(0.985);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes edulab-card-reveal {
  from {
    opacity: 0;
    transform: translateY(var(--animation-distance-lg)) scale(0.985);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes edulab-route-enter {
  from {
    opacity: 0;
    transform: translateY(var(--animation-distance-md));
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes edulab-route-exit {
  from {
    opacity: 1;
    transform: translateY(0);
  }

  to {
    opacity: 0;
    transform: translateY(calc(var(--animation-distance-sm) * -1));
  }
}

/* ============================================================
   14. Keyframes: Hero
============================================================ */

@keyframes edulab-hero-content-in {
  from {
    opacity: 0;
    transform: translateY(var(--animation-distance-xl));
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes edulab-hero-visual-in {
  from {
    opacity: 0;
    transform: translateY(var(--animation-distance-xl)) scale(0.92) rotate(-2deg);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1) rotate(0);
  }
}

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

  50% {
    transform: translateY(-8px);
  }
}

@keyframes edulab-float-slow {
  0%,
  100% {
    transform: translateY(0) rotate(0.001deg);
  }

  50% {
    transform: translateY(-14px) rotate(0.001deg);
  }
}

@keyframes edulab-soft-glow {
  from {
    box-shadow: var(--shadow-lg);
  }

  to {
    box-shadow:
      var(--shadow-xl),
      0 0 80px rgba(37, 99, 235, 0.14);
  }
}

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

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

@keyframes edulab-orbit-item-float-one {
  0%,
  100% {
    transform: translateX(-50%) translateY(0) rotate(-8deg);
  }

  50% {
    transform: translateX(-50%) translateY(-10px) rotate(-3deg);
  }
}

@keyframes edulab-orbit-item-float-two {
  0%,
  100% {
    transform: translateY(-50%) translateX(0) rotate(8deg);
  }

  50% {
    transform: translateY(-50%) translateX(10px) rotate(3deg);
  }
}

@keyframes edulab-orbit-item-float-three {
  0%,
  100% {
    transform: translateX(-50%) translateY(0) rotate(8deg);
  }

  50% {
    transform: translateX(-50%) translateY(10px) rotate(3deg);
  }
}

@keyframes edulab-orbit-item-float-four {
  0%,
  100% {
    transform: translateY(-50%) translateX(0) rotate(-8deg);
  }

  50% {
    transform: translateY(-50%) translateX(-10px) rotate(-3deg);
  }
}

@keyframes edulab-background-drift-one {
  from {
    transform: translate3d(0, 0, 0) scale(1);
  }

  to {
    transform: translate3d(40px, 28px, 0) scale(1.08);
  }
}

@keyframes edulab-background-drift-two {
  from {
    transform: translate3d(0, 0, 0) scale(1);
  }

  to {
    transform: translate3d(-38px, -26px, 0) scale(1.12);
  }
}

@keyframes edulab-grid-drift {
  from {
    background-position: 0 0;
  }

  to {
    background-position: 84px 84px;
  }
}

/* ============================================================
   15. Keyframes: Feedback and Interactive
============================================================ */

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

@keyframes edulab-pulse {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.58;
  }
}

@keyframes edulab-pulse-soft {
  0%,
  100% {
    transform: scale(1);
    box-shadow: var(--shadow-button);
  }

  50% {
    transform: scale(1.035);
    box-shadow:
      var(--shadow-button),
      0 0 42px rgba(37, 99, 235, 0.2);
  }
}

@keyframes edulab-bounce-soft {
  0%,
  100% {
    transform: translateY(0);
  }

  45% {
    transform: translateY(-8px);
  }

  70% {
    transform: translateY(2px);
  }
}

@keyframes edulab-icon-bounce {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }

  45% {
    transform: translateY(-6px) scale(1.06);
  }

  72% {
    transform: translateY(2px) scale(0.98);
  }
}

@keyframes edulab-button-glow {
  0%,
  100% {
    box-shadow: var(--shadow-button);
  }

  50% {
    box-shadow:
      var(--shadow-button),
      0 0 34px rgba(37, 99, 235, 0.26);
  }
}

@keyframes edulab-shimmer {
  100% {
    transform: translateX(100%);
  }
}

@keyframes edulab-skeleton {
  100% {
    transform: translateX(100%);
  }
}

@keyframes edulab-progress-shine {
  0% {
    transform: translateX(-100%);
  }

  55%,
  100% {
    transform: translateX(100%);
  }
}

/* ============================================================
   16. Keyframes: Modal, Dropdown, Toast
============================================================ */

@keyframes edulab-backdrop-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes edulab-modal-in {
  from {
    opacity: 0;
    transform: translateY(var(--animation-distance-lg)) scale(0.96);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes edulab-dropdown-in {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes edulab-toast-in {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes edulab-toast-out {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  to {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
  }
}

/* ============================================================
   17. Learning Interaction Animation Classes
============================================================ */

.answer-correct {
  animation: edulab-answer-correct 740ms var(--ease-standard) both;
}

.answer-wrong {
  animation: edulab-answer-wrong 520ms var(--ease-standard) both;
}

.score-increase {
  animation: edulab-score-increase 760ms var(--ease-bounce) both;
}

.module-completed {
  animation: edulab-module-completed 980ms var(--ease-bounce) both;
}

@keyframes edulab-answer-correct {
  0% {
    transform: scale(1);
    background: var(--color-surface);
  }

  38% {
    transform: scale(1.025);
    background: var(--badge-success-bg);
    border-color: var(--badge-success-border);
  }

  100% {
    transform: scale(1);
    background: var(--badge-success-bg);
    border-color: var(--badge-success-border);
  }
}

@keyframes edulab-answer-wrong {
  0%,
  100% {
    transform: translateX(0);
    background: var(--badge-danger-bg);
    border-color: var(--badge-danger-border);
  }

  20% {
    transform: translateX(-6px);
  }

  40% {
    transform: translateX(6px);
  }

  60% {
    transform: translateX(-4px);
  }

  80% {
    transform: translateX(4px);
  }
}

@keyframes edulab-score-increase {
  0% {
    transform: scale(1);
    color: var(--color-text-brand);
  }

  55% {
    transform: scale(1.18);
    color: var(--color-success-strong);
  }

  100% {
    transform: scale(1);
    color: var(--color-text-brand);
  }
}

@keyframes edulab-module-completed {
  0% {
    transform: scale(1);
  }

  35% {
    transform: scale(1.04);
    box-shadow:
      var(--shadow-card-hover),
      0 0 60px rgba(16, 185, 129, 0.22);
  }

  100% {
    transform: scale(1);
  }
}

/* ============================================================
   18. Theme Transition Helper
============================================================ */

.theme-transition,
.theme-transition *,
.theme-transition *::before,
.theme-transition *::after {
  transition:
    background-color var(--duration-normal) var(--ease-standard),
    color var(--duration-normal) var(--ease-standard),
    border-color var(--duration-normal) var(--ease-standard),
    box-shadow var(--duration-normal) var(--ease-standard),
    fill var(--duration-normal) var(--ease-standard),
    stroke var(--duration-normal) var(--ease-standard) !important;
}

/* ============================================================
   19. Scroll Reveal Prepared Classes
   Nanti bisa dipakai oleh animation-engine.js.
============================================================ */

[data-reveal] {
  opacity: 0;
  transform: translateY(var(--animation-distance-lg));
  transition:
    opacity var(--duration-slow) var(--ease-standard),
    transform var(--duration-slow) var(--ease-standard);
}

[data-reveal].is-revealed {
  opacity: 1;
  transform: translateY(0);
}

[data-reveal="fade"] {
  transform: none;
}

[data-reveal="scale"] {
  transform: scale(0.96);
}

[data-reveal="scale"].is-revealed {
  transform: scale(1);
}

[data-reveal="left"] {
  transform: translateX(calc(var(--animation-distance-lg) * -1));
}

[data-reveal="right"] {
  transform: translateX(var(--animation-distance-lg));
}

[data-reveal="left"].is-revealed,
[data-reveal="right"].is-revealed {
  transform: translateX(0);
}

/* ============================================================
   20. Reduced Motion Accessibility
============================================================ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
  }

  .hero-orbit,
  .hero-orbit::before,
  .hero-orbit::after,
  .hero-orbit__center,
  .hero-orbit__item,
  .app-background__gradient,
  .app-background__grid,
  .loading-state__spinner,
  .pulse,
  .pulse-soft,
  .bounce-soft,
  .float,
  .float-slow,
  .shimmer::after,
  .skeleton::after,
  .progress__bar::after {
    animation: none !important;
  }

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

/* ============================================================
   21. Print Safety
============================================================ */

@media print {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }

  [data-reveal] {
    opacity: 1 !important;
  }
}