/* ============================================
   SACRED VERSES - ANIMATION STYLES
   GSAP 3.13 Compatible Animation Framework
   ============================================ */

/* ===========================================
   VERSE-SPECIFIC STYLING
   =========================================== */

.verse-text {
  position: relative;
  display: block;
  transition: none !important;
  transform: translate3d(0, 0, 0);
}

.verse-text .char,
.verse-text .word,
.verse-text .line {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-rendering: inherit;
  -webkit-font-smoothing: inherit;
  -moz-osx-font-smoothing: inherit;
}

/* ===========================================
   PERFORMANCE OPTIMIZATIONS
   =========================================== */

.verse-container {
  transform: translate3d(0, 0, 0);
  contain: layout paint;
}

.animation-layer {
  isolation: isolate;
}

/* ===========================================
   ACCESSIBILITY SUPPORT
   =========================================== */

@media (prefers-reduced-motion: reduce) {
  .verse-text .char,
  .verse-text .word,
  .verse-text .line {
    transform: none !important;
    transition: opacity 0.3s ease !important;
  }

  .loading-spinner,
  .ripple,
  .navigation,
  .nav-btn,
  .help-btn {
    animation: none;
  }

  .progress-fill,
  .nav-btn,
  .help-btn {
    transition: none;
  }

  .progress-fill::after {
    animation: none;
  }
}

@media (prefers-contrast: high) {
  .verse-text {
    font-weight: 600;
    letter-spacing: 0.02em;
    text-shadow: none;
  }

  .verse-text .char,
  .verse-text .word {
    font-weight: inherit;
    letter-spacing: inherit;
  }

  .navigation,
  .nav-btn,
  .help-btn {
    border-width: 2px;
  }

  .nav-btn:focus,
  .help-btn:focus {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
  }
}

/* ===========================================
   CSS CUSTOM PROPERTIES
   =========================================== */

:root {
  /* Easing functions for CSS animations */
  --ease-in-out: cubic-bezier(0.4, 0.0, 0.2, 1);
  --ease-out: cubic-bezier(0.0, 0.0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0.0, 1, 1);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --ease-elastic: cubic-bezier(0.175, 0.885, 0.32, 1.275);

  /* Stagger configuration */
  --animation-stagger-from: start;
  --animation-split-delay: 0.05s;

  /* Theme transition timing */
  --theme-transition-duration: 0.5s;
}

/* ===========================================
   INTERACTIVE ANIMATIONS
   =========================================== */

.ripple {
  position: absolute;
  border-radius: 50%;
  background: var(--accent-glow);
  transform: scale(0);
  animation: rippleEffect 0.6s ease-out;
  pointer-events: none;
}

@keyframes rippleEffect {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  100% {
    transform: scale(4);
    opacity: 0;
  }
}

/* ===========================================
   PRINT STYLES
   =========================================== */

@media print {
  .verse-text .char,
  .verse-text .word,
  .verse-text .line,
  .verse-text {
    display: inline !important;
    transform: none !important;
    opacity: 1 !important;
  }

  .navigation,
  .help-btn,
  .shortcuts-help {
    display: none !important;
  }
}