/* CHERRY BLOSSOM ANIMATION LIBRARY */
/* Comprehensive animation system for cherry-themed interactions */
/* Based on authentic Japanese cherry blossom movement patterns */

/* === CORE ANIMATION VARIABLES === */
:root {
  /* Cherry Timing Functions - Natural Movement */
  --cherry-ease-petal: cubic-bezier(0.25, 0.46, 0.45, 0.94);   /* Gentle like falling petals */
  --cherry-ease-breeze: cubic-bezier(0.23, 1, 0.32, 1);        /* Smooth like wind */
  --cherry-ease-water: cubic-bezier(0.4, 0, 0.2, 1);          /* Flowing like water */
  --cherry-ease-bamboo: cubic-bezier(0.68, -0.55, 0.265, 1.55); /* Elastic like bamboo */
  --cherry-ease-wood: cubic-bezier(0.17, 0.67, 0.83, 0.67);    /* Steady like wood */
  
  /* Cherry Duration Scale */
  --cherry-duration-instant: 150ms;
  --cherry-duration-quick: 300ms;
  --cherry-duration-medium: 500ms;
  --cherry-duration-slow: 700ms;
  --cherry-duration-ceremonial: 1000ms;
  --cherry-duration-seasonal: 2000ms;
}

/* === MICRO-INTERACTIONS === */

/* Cherry Button Interactions */
.cherry-button {
  position: relative;
  overflow: hidden;
  transition: all var(--cherry-duration-quick) var(--cherry-ease-petal);
}

.cherry-button::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255, 183, 197, 0.3);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width var(--cherry-duration-medium) var(--cherry-ease-petal),
              height var(--cherry-duration-medium) var(--cherry-ease-petal);
}

.cherry-button:hover::before {
  width: 300px;
  height: 300px;
}

.cherry-button:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: var(--cherry-shadow-flower);
}

.cherry-button:active {
  transform: translateY(0) scale(0.98);
  transition: all var(--cherry-duration-instant) var(--cherry-ease-wood);
}

/* Cherry Card Interactions */
.cherry-card {
  position: relative;
  transition: all var(--cherry-duration-medium) var(--cherry-ease-petal);
  transform-origin: center bottom;
}

.cherry-card:hover {
  transform: translateY(-6px) scale(1.01) rotateX(5deg);
  box-shadow: var(--cherry-shadow-cluster);
}

.cherry-card:hover::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(255, 183, 197, 0.05) 0%, transparent 50%);
  pointer-events: none;
}

/* Cherry Input Interactions */
.cherry-input {
  position: relative;
  transition: all var(--cherry-duration-quick) var(--cherry-ease-water);
  border: 2px solid transparent;
}

.cherry-input::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--cherry-sakura-pink), transparent);
  transform: translateX(-50%);
  transition: width var(--cherry-duration-medium) var(--cherry-ease-petal);
}

.cherry-input:focus::after {
  width: 100%;
}

.cherry-input:focus {
  border-color: var(--cherry-sakura-pink);
  transform: scale(1.02);
}

/* === PARTICLE SYSTEMS === */

/* Falling Cherry Petals */
.cherry-petal-system {
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
}

.cherry-petal {
  position: absolute;
  width: 8px;
  height: 8px;
  background: var(--cherry-sakura-pink);
  border-radius: 50% 0 50% 0;
  opacity: 0.7;
  animation: cherry-petal-drift 8s linear infinite;
}

@keyframes cherry-petal-drift {
  0% {
    transform: translateY(-100vh) translateX(0) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 0.7;
  }
  50% {
    transform: translateY(50vh) translateX(30px) rotate(180deg);
    opacity: 0.5;
  }
  90% {
    opacity: 0.3;
  }
  100% {
    transform: translateY(100vh) translateX(-20px) rotate(360deg);
    opacity: 0;
  }
}

/* Cherry petal variations */
.cherry-petal:nth-child(2n) {
  animation-duration: 10s;
  animation-delay: -2s;
}

.cherry-petal:nth-child(3n) {
  animation-duration: 6s;
  animation-delay: -4s;
  transform: scale(0.8);
}

.cherry-petal:nth-child(4n) {
  animation-duration: 12s;
  animation-delay: -6s;
  transform: scale(1.2);
}

/* Floating Cherry Blossoms */
.cherry-blossom-float {
  position: absolute;
  width: 12px;
  height: 12px;
  background: radial-gradient(circle, var(--cherry-sakura-pink), var(--cherry-petal-light));
  border-radius: 50%;
  animation: cherry-blossom-float 6s ease-in-out infinite;
}

@keyframes cherry-blossom-float {
  0%, 100% {
    transform: translateY(0) rotate(0deg) scale(1);
    opacity: 0.6;
  }
  25% {
    transform: translateY(-20px) rotate(90deg) scale(1.1);
    opacity: 0.8;
  }
  50% {
    transform: translateY(-10px) rotate(180deg) scale(0.9);
    opacity: 1;
  }
  75% {
    transform: translateY(-30px) rotate(270deg) scale(1.05);
    opacity: 0.7;
  }
}

/* === SEASONAL TRANSITIONS === */

/* Cherry Season Change Animation */
.cherry-season-enter {
  animation: cherry-season-enter var(--cherry-duration-seasonal) var(--cherry-ease-petal);
}

@keyframes cherry-season-enter {
  0% {
    opacity: 0;
    transform: translateY(50px) scale(0.9) rotateY(-10deg);
    filter: blur(10px);
  }
  50% {
    opacity: 0.7;
    transform: translateY(-10px) scale(1.05) rotateY(5deg);
    filter: blur(2px);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1) rotateY(0deg);
    filter: blur(0);
  }
}

.cherry-season-exit {
  animation: cherry-season-exit var(--cherry-duration-seasonal) var(--cherry-ease-petal);
}

@keyframes cherry-season-exit {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1) rotateY(0deg);
    filter: blur(0);
  }
  50% {
    opacity: 0.5;
    transform: translateY(-20px) scale(0.95) rotateY(-5deg);
    filter: blur(3px);
  }
  100% {
    opacity: 0;
    transform: translateY(30px) scale(0.8) rotateY(10deg);
    filter: blur(8px);
  }
}

/* === LOADING STATES === */

/* Cherry Blossom Loading Spinner */
.cherry-loading-spinner {
  position: relative;
  width: 40px;
  height: 40px;
  margin: 0 auto;
}

.cherry-loading-spinner::before,
.cherry-loading-spinner::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  background: var(--cherry-sakura-pink);
  border-radius: 50% 0 50% 0;
  animation: cherry-loading-spin 1.5s ease-in-out infinite;
}

.cherry-loading-spinner::after {
  animation-delay: -0.75s;
  transform: rotate(45deg);
}

@keyframes cherry-loading-spin {
  0% {
    transform: rotate(0deg) scale(1);
    opacity: 1;
  }
  50% {
    transform: rotate(180deg) scale(0.8);
    opacity: 0.6;
  }
  100% {
    transform: rotate(360deg) scale(1);
    opacity: 1;
  }
}

/* Cherry Pulse Loading */
.cherry-loading-pulse {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: var(--cherry-sakura-pink);
  border-radius: 50%;
  animation: cherry-loading-pulse 1.5s ease-in-out infinite;
}

@keyframes cherry-loading-pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.3);
    opacity: 0.5;
  }
}

/* === NAVIGATION ANIMATIONS === */

/* Cherry Branch Navigation */
.cherry-nav-branch {
  position: relative;
  transition: all var(--cherry-duration-medium) var(--cherry-ease-bamboo);
}

.cherry-nav-branch::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--cherry-sakura-pink), transparent);
  transform: translateY(-50%);
  transition: width var(--cherry-duration-medium) var(--cherry-ease-petal);
}

.cherry-nav-branch:hover::before,
.cherry-nav-branch.active::before {
  width: 100%;
}

.cherry-nav-branch:hover {
  transform: translateX(8px);
  color: var(--cherry-sakura-pink);
}

/* Cherry Page Transitions */
.cherry-page-enter {
  animation: cherry-page-enter var(--cherry-duration-slow) var(--cherry-ease-petal);
}

@keyframes cherry-page-enter {
  0% {
    opacity: 0;
    transform: translateX(-50px) scale(0.95);
  }
  50% {
    opacity: 0.5;
    transform: translateX(10px) scale(1.02);
  }
  100% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

.cherry-page-exit {
  animation: cherry-page-exit var(--cherry-duration-slow) var(--cherry-ease-petal);
}

@keyframes cherry-page-exit {
  0% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
  50% {
    opacity: 0.5;
    transform: translateX(-10px) scale(0.98);
  }
  100% {
    opacity: 0;
    transform: translateX(50px) scale(0.95);
  }
}

/* === SCROLL ANIMATIONS === */

/* Cherry Parallax Scrolling */
.cherry-parallax {
  transform: translateY(var(--scroll-y, 0px));
  transition: transform var(--cherry-duration-quick) var(--cherry-ease-water);
}

/* Cherry Reveal on Scroll */
.cherry-reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: all var(--cherry-duration-medium) var(--cherry-ease-petal);
}

.cherry-reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Cherry Sticky Elements */
.cherry-sticky {
  position: sticky;
  transition: all var(--cherry-duration-quick) var(--cherry-ease-water);
}

.cherry-sticky.stuck {
  backdrop-filter: blur(10px);
  background: rgba(255, 248, 240, 0.9);
  box-shadow: var(--cherry-shadow-flower);
}

/* === ACCESSIBILITY === */

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  .cherry-petal,
  .cherry-blossom-float,
  .cherry-loading-spinner,
  .cherry-season-enter,
  .cherry-season-exit,
  .cherry-page-enter,
  .cherry-page-exit {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
  
  .cherry-button:hover,
  .cherry-card:hover,
  .cherry-input:focus,
  .cherry-nav-branch:hover {
    transform: none !important;
  }
  
  .cherry-parallax {
    transform: none !important;
  }
}

/* High Contrast Support */
@media (prefers-contrast: high) {
  .cherry-petal,
  .cherry-blossom-float,
  .cherry-loading-pulse {
    background: currentColor;
  }
  
  .cherry-button::before,
  .cherry-card:hover::after {
    background: transparent;
  }
}

/* === UTILITY ANIMATIONS === */

/* Cherry Fade Utilities */
.cherry-fade-in {
  animation: cherry-fade-in var(--cherry-duration-medium) var(--cherry-ease-petal);
}

@keyframes cherry-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.cherry-fade-out {
  animation: cherry-fade-out var(--cherry-duration-medium) var(--cherry-ease-petal);
}

@keyframes cherry-fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

/* Cherry Scale Utilities */
.cherry-scale-in {
  animation: cherry-scale-in var(--cherry-duration-medium) var(--cherry-ease-bamboo);
}

@keyframes cherry-scale-in {
  from { transform: scale(0.8); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.cherry-scale-out {
  animation: cherry-scale-out var(--cherry-duration-medium) var(--cherry-ease-bamboo);
}

@keyframes cherry-scale-out {
  from { transform: scale(1); opacity: 1; }
  to { transform: scale(0.8); opacity: 0; }
}

/* Cherry Slide Utilities */
.cherry-slide-up {
  animation: cherry-slide-up var(--cherry-duration-medium) var(--cherry-ease-petal);
}

@keyframes cherry-slide-up {
  from { transform: translateY(30px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.cherry-slide-down {
  animation: cherry-slide-down var(--cherry-duration-medium) var(--cherry-ease-petal);
}

@keyframes cherry-slide-down {
  from { transform: translateY(-30px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* Cherry Rotation Utilities */
.cherry-rotate-in {
  animation: cherry-rotate-in var(--cherry-duration-slow) var(--cherry-ease-bamboo);
}

@keyframes cherry-rotate-in {
  from { transform: rotate(-10deg) scale(0.9); opacity: 0; }
  to { transform: rotate(0deg) scale(1); opacity: 1; }
}