/* ==========================================================================
   Animations & Transitions
   ========================================================================== */

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

@keyframes scaleUp {
  from {
    opacity: 0;
    transform: scale(0.94);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes pulseGlow {
  0%, 100% {
    box-shadow: 0 4px 14px rgba(52, 122, 77, 0.22);
  }
  50% {
    box-shadow: 0 6px 22px rgba(52, 122, 77, 0.45);
  }
}

@keyframes floatGentle {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4px);
  }
}

.fade-in {
  animation: fadeIn 0.24s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.no-animation,
.profile-view.no-animation,
.history-view.no-animation,
.rhythm-view.no-animation,
.results-view.no-animation,
.ascetic-view.no-animation {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}

.scale-up {
  animation: scaleUp 0.28s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

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

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

.float-anim {
  animation: floatGentle 3s ease-in-out infinite;
}

/* Mobile Screen Slide Transitions */
@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(32px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-32px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.slide-in-right {
  animation: slideInRight 0.22s cubic-bezier(0.2, 0.9, 0.3, 1) forwards;
}

.slide-in-left {
  animation: slideInLeft 0.22s cubic-bezier(0.2, 0.9, 0.3, 1) forwards;
}

/* Ripple effect on touch */
.ripple {
  position: relative;
  overflow: hidden;
}

.ripple::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  background: rgba(255, 255, 255, 0.35);
  opacity: 0;
  border-radius: 100%;
  transform: scale(1, 1) translate(-50%);
  transform-origin: 50% 50%;
}

.ripple:focus:not(:active)::after {
  animation: rippleAnim 0.6s ease-out;
}

@keyframes rippleAnim {
  0% {
    transform: scale(0, 0);
    opacity: 0.5;
  }
  100% {
    transform: scale(40, 40);
    opacity: 0;
  }
}

@keyframes shakeAnim {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}

.shake-anim {
  animation: shakeAnim 0.4s ease-in-out;
}

@keyframes clippyBeaverDance {
  0%, 100% {
    transform: translateY(0) rotate(0deg) scale(1);
  }
  15% {
    transform: translateY(-5px) rotate(-10deg) scale(1.08);
  }
  30% {
    transform: translateY(1px) rotate(6deg) scale(1.02);
  }
  45% {
    transform: translateY(-6px) rotate(-6deg) scale(1.1);
  }
  60% {
    transform: translateY(0) rotate(8deg) scale(1.04);
  }
  75% {
    transform: translateY(-3px) rotate(-4deg) scale(1.06);
  }
}

.clippy-beaver-btn {
  animation: clippyBeaverDance 3.4s ease-in-out infinite;
  transform-origin: bottom center;
}

.clippy-beaver-btn:hover {
  animation-duration: 1.2s;
}

@keyframes starTumble {
  0% { transform: rotate(0deg) scale(1); }
  25% { transform: rotate(-45deg) scale(1.3) translateY(-4px); }
  50% { transform: rotate(360deg) scale(1.25) translateY(2px); }
  75% { transform: rotate(340deg) scale(0.9); }
  100% { transform: rotate(360deg) scale(1); }
}

@keyframes starSparkleGlow {
  0% { transform: scale(1); filter: drop-shadow(0 0 0px gold); }
  40% { transform: scale(1.5) rotate(20deg); filter: drop-shadow(0 0 14px #F59E0B) brightness(1.35); }
  100% { transform: scale(1) rotate(0deg); filter: drop-shadow(0 0 0px gold); }
}

.star-tumble {
  animation: starTumble 0.65s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.star-sparkle-glow {
  animation: starSparkleGlow 0.6s ease-out !important;
}

/* Playful Sun Ray & Face Animations */
@keyframes sunRaysRotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes sunRaysPulseLong {
  0% { transform: scale(0.92); opacity: 0.82; }
  50% { transform: scale(1.12); opacity: 1; filter: drop-shadow(0 0 3px rgba(245, 158, 11, 0.6)); }
  100% { transform: scale(0.92); opacity: 0.82; }
}

@keyframes sunRaysPulseShort {
  0% { transform: scale(1.15); opacity: 1; filter: drop-shadow(0 0 3px rgba(251, 146, 60, 0.6)); }
  50% { transform: scale(0.86); opacity: 0.70; }
  100% { transform: scale(1.15); opacity: 1; filter: drop-shadow(0 0 3px rgba(251, 146, 60, 0.6)); }
}

@keyframes sunFaceBreathe {
  0% { transform: scale(0.97) translateY(0.5px); }
  50% { transform: scale(1.03) translateY(-0.5px); }
  100% { transform: scale(0.97) translateY(0.5px); }
}

@keyframes themeArtShimmer {
  0%, 100% {
    filter: drop-shadow(0 0 5px var(--accent-primary)) drop-shadow(0 2px 8px var(--accent-primary));
    transform: scale(0.96);
  }
  50% {
    filter: drop-shadow(0 0 12px var(--accent-primary)) drop-shadow(0 4px 16px var(--accent-primary));
    transform: scale(1.06);
  }
}

@keyframes sakuraSpinRotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes sakuraGentleFloat {
  0%, 100% { transform: translateY(0px) scale(0.98); }
  50% { transform: translateY(-1px) scale(1.02); }
}

.sakura-blossom-animated {
  overflow: visible;
  filter: drop-shadow(0 2px 5px rgba(244, 114, 182, 0.22));
  animation: sakuraGentleFloat 3.2s ease-in-out infinite;
}

.sakura-blossom-animated .sakura-blossom-spin-layer {
  transform-origin: 50px 50px;
  animation: sakuraSpinRotate 18s linear infinite;
}

@keyframes emeraldPlayfulSway {
  0% { transform: rotate(0deg) translateY(0px); }
  25% { transform: rotate(-5deg) translateY(-0.8px); }
  75% { transform: rotate(5deg) translateY(0.8px); }
  100% { transform: rotate(0deg) translateY(0px); }
}

@keyframes emeraldGleam {
  0%, 100% {
    filter: drop-shadow(0 0 5px rgba(34, 197, 94, 0.45)) drop-shadow(0 2px 7px rgba(22, 163, 74, 0.30));
    opacity: 0.95;
  }
  50% {
    filter: drop-shadow(0 0 11px rgba(74, 222, 128, 0.70)) drop-shadow(0 0 16px rgba(34, 197, 94, 0.5));
    opacity: 1;
  }
}

.emerald-gem-animated {
  overflow: visible;
  animation: emeraldGleam 2.2s ease-in-out infinite;
}

.emerald-gem-animated .emerald-sway-layer {
  transform-origin: 50px 50px;
  animation: emeraldPlayfulSway 3s ease-in-out infinite;
}

@keyframes lavenderWindBreeze {
  0% { transform: rotate(0deg) skewX(0deg); }
  25% { transform: rotate(-4.5deg) skewX(-2deg); }
  60% { transform: rotate(4deg) skewX(1.8deg); }
  85% { transform: rotate(-1.5deg) skewX(-0.8deg); }
  100% { transform: rotate(0deg) skewX(0deg); }
}

.lavender-breeze-animated {
  overflow: visible;
  filter: drop-shadow(0 2px 6px rgba(168, 85, 247, 0.28));
}

.lavender-breeze-animated .lavender-breeze-layer {
  transform-origin: 50px 86px;
  animation: lavenderWindBreeze 3.8s ease-in-out infinite;
}

/* Cyber Neon Smooth Rotation & Laser Glint */
@keyframes cyberCoreRotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes cyberLaserGlint {
  0%, 100% {
    opacity: 0.7;
    filter: drop-shadow(0 0 3px #06B6D4);
  }
  50% {
    opacity: 1;
    filter: drop-shadow(0 0 10px #22D3EE);
  }
}

.cyber-neon-animated {
  overflow: visible;
  filter: drop-shadow(0 0 8px rgba(6, 182, 212, 0.45));
}

.cyber-neon-animated .cyber-rotate-layer {
  transform-origin: 50px 50px;
  animation: cyberCoreRotate 16s linear infinite;
}

.cyber-neon-animated .cyber-ray-glint-layer {
  transform-origin: 50px 50px;
  animation: cyberLaserGlint 2.4s ease-in-out infinite;
}

/* Sky Focus Optic Ring Spin & Core Lock Pulse */
@keyframes skyFocusRingSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(-360deg); }
}

@keyframes skyFocusCorePulse {
  0%, 100% {
    transform: scale(0.96);
    filter: drop-shadow(0 0 4px rgba(2, 132, 199, 0.4));
  }
  50% {
    transform: scale(1.04);
    filter: drop-shadow(0 0 10px rgba(56, 189, 248, 0.8));
  }
}

.sky-focus-animated {
  overflow: visible;
  filter: drop-shadow(0 2px 8px rgba(2, 132, 199, 0.25));
}

.sky-focus-animated .sky-focus-ring-layer {
  transform-origin: 50px 50px;
  animation: skyFocusRingSpin 22s linear infinite;
}

.sky-focus-animated .sky-focus-core-layer {
  transform-origin: 50px 50px;
  animation: skyFocusCorePulse 2.6s ease-in-out infinite;
}

.sun-art-animated {
  overflow: visible;
  filter: drop-shadow(0 2px 8px rgba(245, 158, 11, 0.25));
}

.sun-art-animated .sun-rays-spin-layer {
  transform-origin: 50px 50px;
  animation: sunRaysRotate 24s linear infinite;
}

.sun-art-animated .sun-rays-primary {
  transform-origin: 50px 50px;
  animation: sunRaysPulseLong 2.6s ease-in-out infinite;
}

.sun-art-animated .sun-rays-secondary {
  transform-origin: 50px 50px;
  animation: sunRaysPulseShort 2.6s ease-in-out infinite;
}

.sun-art-animated .sun-face-layer {
  transform-origin: 50px 50px;
  animation: sunFaceBreathe 2.6s ease-in-out infinite;
}

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