/* CHERRY BLOSSOM DESIGN SYSTEM - COMPREHENSIVE THEME */
/* Based on authentic Japanese cherry blossom cultural aesthetics */

/* Hide all notifications and gradient boxes globally */
div[class*="fixed"][class*="z-50"][class*="space-y-4"][class*="max-w-sm"],
div[class*="fixed"][class*="z-"],
.fixed.top-4.right-4,
.fixed.top-0.left-0,
.fixed.top-4.left-4,
[class*="bg-gradient-to-r"][class*="from-yellow"],
[class*="bg-gradient-to-r"][class*="from-pink"][class*="to-orange"] {
  display: none !important;
}

:root {
  /* === CHERRY CORE IDENTITY === */
  /* Authentic Cherry Blossom Colors */
  --cherry-sakura-pink: #ffb7c5;        /* 桜色 - True sakura color */
  --cherry-shirozakura-white: #fff8f0;   /* 白桜 - White cherry blossom */
  --cherry-benizakura-deep: #e60026;     /* 紅桜 - Deep cherry red */
  --cherry-midori-leaf: #228b22;         /* 緑 - Fresh leaf green */
  --cherry-trunk-brown: #8b4513;         /* 幹 - Cherry tree trunk */
  --cherry-bark-gray: #696969;           /* 樹皮 - Tree bark gray */
  
  /* Cherry Seasonal Depth Colors */
  --cherry-petal-light: #ffe4e6;         /* Light petal tint */
  --cherry-petal-medium: #ffb3ba;        /* Medium petal shade */
  --cherry-petal-dark: #ff8a95;          /* Dark petal accent */
  --cherry-wood-light: #deb887;          /* Light wood tone */
  --cherry-wood-dark: #654321;           /* Dark wood tone */
  
  /* === LEGACY COMPATIBILITY === */
  --cherry-pink: #ec4899;
  --cherry-green: #10b981;
  --cherry-bg: #fdf2f8;
  
  /* OFFICIAL SEASONAL COLOR PALETTES */
  /* Spring Dashboard - "Seedling Growth Interface" */
  --spring-primary: #98FB98;
  --spring-secondary: #FFE4E1;
  --spring-accent: #F0FFF0;
  --spring-bg: linear-gradient(135deg, #FFFBF0 0%, #F0FFF0 100%);
  --spring-card: rgba(152, 251, 152, 0.1);
  
  /* Summer Dashboard - "Full Bloom Excellence Interface" */
  --summer-primary: #FF69B4;
  --summer-secondary: #FFD700;
  --summer-accent: #FFF0F5;
  --summer-bg: linear-gradient(135deg, #FFFFFF 0%, #FFF0F5 100%);
  --summer-card: rgba(255, 105, 180, 0.15);
  
  /* Autumn Dashboard - "Harvest Wisdom Interface" */
  --autumn-primary: #FF7F50;
  --autumn-secondary: #FFBF00;
  --autumn-accent: #FFF8DC;
  --autumn-bg: linear-gradient(135deg, #FFFDD0 0%, #FFF8DC 100%);
  --autumn-card: rgba(255, 127, 80, 0.1);
  
  /* Winter Dashboard - "Renewal Preparation Interface" */
  --winter-primary: #DDA0DD;
  --winter-secondary: #C0C0C0;
  --winter-accent: #E6E6FA;
  --winter-bg: linear-gradient(135deg, #F0F8FF 0%, #E6E6FA 100%);
  --winter-card: rgba(221, 160, 221, 0.08);
  
  /* === CHERRY ORGANIC SPACING SYSTEM === */
  /* Based on natural growth patterns and golden ratio */
  --cherry-space-petal: 0.25rem;         /* 4px - Tiny petal detail */
  --cherry-space-bud: 0.5rem;            /* 8px - Small bud */
  --cherry-space-flower: 1rem;           /* 16px - Full flower */
  --cherry-space-cluster: 1.618rem;      /* 26px - Flower cluster (golden ratio) */
  --cherry-space-branch: 2.618rem;       /* 42px - Branch segment */
  --cherry-space-limb: 4.236rem;         /* 68px - Tree limb */
  --cherry-space-trunk: 6.854rem;        /* 110px - Tree trunk */
  
  /* Organic growth rhythm spacing */
  --cherry-rhythm-micro: 0.125rem;       /* 2px - Micro detail */
  --cherry-rhythm-small: 0.75rem;        /* 12px - Small rhythm */
  --cherry-rhythm-medium: 1.25rem;       /* 20px - Medium rhythm */
  --cherry-rhythm-large: 2rem;           /* 32px - Large rhythm */
  --cherry-rhythm-macro: 3.25rem;        /* 52px - Macro rhythm */
  
  /* Legacy spacing (maintain compatibility) */
  --sakura-space-xs: var(--cherry-space-petal);
  --sakura-space-sm: var(--cherry-space-bud);
  --sakura-space-md: var(--cherry-space-flower);
  --sakura-space-lg: var(--cherry-space-cluster);
  --sakura-space-xl: var(--cherry-space-branch);
  --sakura-space-2xl: var(--cherry-space-limb);
  --sakura-space-3xl: var(--cherry-space-trunk);
  
  /* === CHERRY TYPOGRAPHY HARMONY === */
  /* Inspired by Japanese calligraphy and natural proportions */
  --cherry-text-whisper: 0.75rem;        /* 12px - Subtle annotation */
  --cherry-text-murmur: 0.875rem;        /* 14px - Quiet text */
  --cherry-text-speak: 1rem;             /* 16px - Standard voice */
  --cherry-text-call: 1.125rem;          /* 18px - Clear call */
  --cherry-text-announce: 1.25rem;       /* 20px - Announcement */
  --cherry-text-proclaim: 1.5rem;        /* 24px - Proclamation */
  --cherry-text-declare: 1.875rem;       /* 30px - Declaration */
  --cherry-text-shout: 2.25rem;          /* 36px - Attention */
  --cherry-text-roar: 3rem;              /* 48px - Dominant display */
  --cherry-text-thunder: 4rem;           /* 64px - Hero text */
  
  /* Cherry-specific font weights */
  --cherry-weight-petal: 300;            /* Light as petals */
  --cherry-weight-branch: 400;           /* Regular like branches */
  --cherry-weight-trunk: 500;            /* Medium like trunk */
  --cherry-weight-root: 600;             /* Semibold like roots */
  --cherry-weight-earth: 700;            /* Bold like earth */
  
  /* Legacy typography (maintain compatibility) */
  --sakura-text-xs: var(--cherry-text-whisper);
  --sakura-text-sm: var(--cherry-text-murmur);
  --sakura-text-base: var(--cherry-text-speak);
  --sakura-text-lg: var(--cherry-text-call);
  --sakura-text-xl: var(--cherry-text-announce);
  --sakura-text-2xl: var(--cherry-text-proclaim);
  --sakura-text-3xl: var(--cherry-text-declare);
  --sakura-text-4xl: var(--cherry-text-shout);
  --sakura-text-5xl: var(--cherry-text-roar);
  
  /* === CHERRY NATURAL SHADOWS === */
  /* Inspired by cherry tree canopy shadows and Japanese lighting */
  --cherry-shadow-petal: 0 1px 3px rgba(255, 183, 197, 0.15);   /* Soft petal shadow */
  --cherry-shadow-flower: 0 2px 8px rgba(255, 183, 197, 0.2);   /* Flower shadow */
  --cherry-shadow-cluster: 0 4px 12px rgba(255, 183, 197, 0.25); /* Cluster shadow */
  --cherry-shadow-branch: 0 8px 25px rgba(139, 69, 19, 0.15);   /* Branch shadow */
  --cherry-shadow-canopy: 0 16px 40px rgba(139, 69, 19, 0.2);   /* Tree canopy */
  --cherry-shadow-grove: 0 24px 60px rgba(139, 69, 19, 0.25);   /* Grove shadow */
  
  /* Seasonal shadow variations */
  --cherry-shadow-spring: 0 4px 12px rgba(255, 183, 197, 0.2);  /* Spring bloom */
  --cherry-shadow-summer: 0 6px 16px rgba(34, 139, 34, 0.25);   /* Summer leaves */
  --cherry-shadow-autumn: 0 3px 10px rgba(255, 127, 80, 0.2);   /* Autumn glow */
  --cherry-shadow-winter: 0 2px 6px rgba(105, 105, 105, 0.15);  /* Winter bark */
  
  /* Legacy shadows (maintain compatibility) */
  --sakura-shadow-sm: var(--cherry-shadow-petal);
  --sakura-shadow-md: var(--cherry-shadow-flower);
  --sakura-shadow-lg: var(--cherry-shadow-branch);
  --sakura-shadow-xl: var(--cherry-shadow-canopy);
  
  /* === CHERRY ORGANIC BORDER RADIUS === */
  /* Inspired by natural cherry blossom petal curves */
  --cherry-radius-petal: 0.25rem;        /* 4px - Small petal curve */
  --cherry-radius-bud: 0.375rem;         /* 6px - Bud roundness */
  --cherry-radius-bloom: 0.5rem;         /* 8px - Bloom curve */
  --cherry-radius-flower: 0.75rem;       /* 12px - Full flower */
  --cherry-radius-cluster: 1rem;         /* 16px - Flower cluster */
  --cherry-radius-branch: 1.25rem;       /* 20px - Branch curve */
  --cherry-radius-trunk: 1.5rem;         /* 24px - Trunk curve */
  
  /* Natural asymmetric radius for organic feel */
  --cherry-radius-natural: 0.5rem 0.75rem 0.625rem 0.5rem; /* Slightly irregular */
  --cherry-radius-organic: 0.75rem 1rem 0.875rem 0.75rem;  /* More organic */
  
  /* Legacy radius (maintain compatibility) */
  --sakura-radius-sm: var(--cherry-radius-petal);
  --sakura-radius-md: var(--cherry-radius-bloom);
  --sakura-radius-lg: var(--cherry-radius-flower);
  --sakura-radius-xl: var(--cherry-radius-cluster);
  --sakura-radius-2xl: var(--cherry-radius-branch);
}

/* Base Reset and Typography */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
  line-height: 1.6;
  color: #2d3748;
  background: var(--autumn-bg);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Seasonal Theming Classes */
.season-spring {
  --seasonal-primary: var(--spring-primary);
  --seasonal-secondary: var(--spring-secondary);
  --seasonal-accent: var(--spring-accent);
  --seasonal-bg: var(--spring-bg);
  --seasonal-card: var(--spring-card);
}

.season-summer {
  --seasonal-primary: var(--summer-primary);
  --seasonal-secondary: var(--summer-secondary);
  --seasonal-accent: var(--summer-accent);
  --seasonal-bg: var(--summer-bg);
  --seasonal-card: var(--summer-card);
}

.season-autumn {
  --seasonal-primary: var(--autumn-primary);
  --seasonal-secondary: var(--autumn-secondary);
  --seasonal-accent: var(--autumn-accent);
  --seasonal-bg: var(--autumn-bg);
  --seasonal-card: var(--autumn-card);
}

.season-winter {
  --seasonal-primary: var(--winter-primary);
  --seasonal-secondary: var(--winter-secondary);
  --seasonal-accent: var(--winter-accent);
  --seasonal-bg: var(--winter-bg);
  --seasonal-card: var(--winter-card);
}

/* Apply seasonal background */
body.season-spring,
body.season-summer, 
body.season-autumn,
body.season-winter {
  background: var(--seasonal-bg);
}

/* Professional Layout System */
.sakura-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: var(--sakura-space-lg);
}

.sakura-nav-offset {
  margin-left: 20rem; /* 320px sidebar width */
}

.sakura-nav {
  position: fixed;
  left: 0;
  top: 0;
  width: 20rem;
  height: 100vh;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  border-right: 1px solid rgba(255, 255, 255, 0.2);
  z-index: 1000;
  overflow-y: auto;
  padding: var(--sakura-space-xl);
}

/* Professional Card System */
.sakura-card {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--sakura-radius-xl);
  padding: var(--sakura-space-xl);
  box-shadow: var(--sakura-shadow-md);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.sakura-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sakura-shadow-lg);
  border-color: var(--seasonal-primary);
}

.sakura-card-gradient {
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.9) 0%, 
    var(--seasonal-card) 100%);
}

/* Beautiful Button System */
.sakura-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sakura-space-sm);
  padding: var(--sakura-space-md) var(--sakura-space-xl);
  font-weight: 600;
  font-size: var(--sakura-text-sm);
  border: none;
  border-radius: var(--sakura-radius-lg);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.sakura-btn-primary {
  background: linear-gradient(135deg, var(--seasonal-primary) 0%, var(--seasonal-secondary) 100%);
  color: white;
  box-shadow: var(--sakura-shadow-sm);
}

.sakura-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--sakura-shadow-md);
}

.sakura-btn-primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s;
}

.sakura-btn-primary:hover::before {
  left: 100%;
}

/* Professional Navigation */
.sakura-nav-item {
  display: flex;
  align-items: center;
  gap: var(--sakura-space-md);
  padding: var(--sakura-space-md) var(--sakura-space-lg);
  margin-bottom: var(--sakura-space-sm);
  border-radius: var(--sakura-radius-lg);
  text-decoration: none;
  color: #4a5568;
  font-weight: 500;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: 2px solid transparent;
}

.sakura-nav-item:hover {
  background: var(--seasonal-card);
  color: var(--seasonal-primary);
  transform: translateX(4px);
  border-color: var(--seasonal-primary);
}

.sakura-nav-item.active {
  background: linear-gradient(135deg, var(--seasonal-primary) 0%, var(--seasonal-secondary) 100%);
  color: white;
  box-shadow: var(--sakura-shadow-sm);
}

.sakura-nav-item svg {
  width: 1.25rem;
  height: 1.25rem;
}

/* Headers and Typography */
.sakura-header {
  text-align: center;
  margin-bottom: var(--sakura-space-3xl);
}

.sakura-title {
  font-size: var(--sakura-text-5xl);
  font-weight: 800;
  background: linear-gradient(135deg, var(--seasonal-primary) 0%, var(--seasonal-secondary) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: var(--sakura-space-md);
  line-height: 1.2;
}

.sakura-subtitle {
  font-size: var(--sakura-text-xl);
  color: #718096;
  font-weight: 500;
}

/* Grid System */
.sakura-grid {
  display: grid;
  gap: var(--sakura-space-xl);
}

.sakura-grid-2 {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.sakura-grid-3 {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.sakura-grid-4 {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

/* Metrics and Stats */
.sakura-metric {
  text-align: center;
  padding: var(--sakura-space-lg);
}

.sakura-metric-value {
  font-size: var(--sakura-text-4xl);
  font-weight: 800;
  color: var(--seasonal-primary);
  line-height: 1;
  margin-bottom: var(--sakura-space-sm);
}

.sakura-metric-label {
  font-size: var(--sakura-text-sm);
  color: #718096;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Progress Bars */
.sakura-progress {
  width: 100%;
  height: 8px;
  background: rgba(0, 0, 0, 0.1);
  border-radius: var(--sakura-radius-md);
  overflow: hidden;
  margin: var(--sakura-space-md) 0;
}

.sakura-progress-bar {
  height: 100%;
  background: linear-gradient(135deg, var(--seasonal-primary) 0%, var(--seasonal-secondary) 100%);
  border-radius: var(--sakura-radius-md);
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.sakura-progress-bar::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  animation: sakura-shimmer 2s infinite;
}

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

/* Status Badges */
.sakura-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--sakura-space-xs) var(--sakura-space-md);
  border-radius: var(--sakura-radius-md);
  font-size: var(--sakura-text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.sakura-badge-success {
  background: rgba(72, 187, 120, 0.1);
  color: #38a169;
}

.sakura-badge-warning {
  background: rgba(237, 137, 54, 0.1);
  color: #d69e2e;
}

.sakura-badge-error {
  background: rgba(245, 101, 101, 0.1);
  color: #e53e3e;
}

.sakura-badge-info {
  background: var(--seasonal-card);
  color: var(--seasonal-primary);
}

/* Animations */
.sakura-fade-in {
  animation: sakura-fade-in 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.sakura-slide-in {
  animation: sakura-slide-in 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes sakura-fade-in {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes sakura-slide-in {
  from { opacity: 0; transform: translateX(-20px); }
  to { opacity: 1; transform: translateX(0); }
}

/* Responsive Design */
@media (max-width: 1024px) {
  .sakura-nav {
    width: 16rem;
  }
  
  .sakura-nav-offset {
    margin-left: 16rem;
  }
}

@media (max-width: 768px) {
  .sakura-nav {
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .sakura-nav.open {
    transform: translateX(0);
  }
  
  .sakura-nav-offset {
    margin-left: 0;
  }
  
  .sakura-container {
    padding: var(--sakura-space-md);
  }
}

/* Japanese Cultural Elements */
.sakura-pattern {
  position: relative;
  overflow: hidden;
}

.sakura-pattern::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0.05;
  background-image: radial-gradient(circle at 25% 25%, var(--seasonal-primary) 1px, transparent 1px);
  background-size: 20px 20px;
  pointer-events: none;
}

/* Cherry Pattern Variations */
.cherry-pattern {
  position: relative;
  overflow: hidden;
}

.cherry-pattern::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0.03;
  background-image: 
    radial-gradient(circle at 20% 20%, var(--cherry-sakura-pink) 1px, transparent 1px),
    radial-gradient(circle at 80% 80%, var(--cherry-petal-medium) 1px, transparent 1px);
  background-size: 30px 30px, 25px 25px;
  pointer-events: none;
}

/* Enhanced glass panel effects */
.glass-panel {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Cherry theme integration classes */
.cherry-theme {
  --primary-color: var(--cherry-sakura-pink);
  --secondary-color: var(--cherry-petal-medium);
  --accent-color: var(--cherry-benizakura-deep);
  --background-color: var(--cherry-shirozakura-white);
  --text-color: #2d3748;
  --text-light: #718096;
}

/* Cultural variant classes */
.cultural-traditional {
  font-family: 'Noto Serif JP', serif;
  letter-spacing: 0.02em;
}

.cultural-modern {
  font-family: 'Inter', sans-serif;
  letter-spacing: -0.01em;
}

.cultural-fusion {
  font-family: 'Noto Sans JP', 'Inter', sans-serif;
  letter-spacing: 0;
}

/* Animation intensity classes */
.animation-minimal * {
  transition-duration: 0.1s !important;
  animation-duration: 0.1s !important;
}

.animation-subtle * {
  transition-duration: 0.2s !important;
  animation-duration: 0.2s !important;
}

.animation-moderate * {
  transition-duration: 0.3s !important;
  animation-duration: 0.3s !important;
}

.animation-vibrant * {
  transition-duration: 0.5s !important;
  animation-duration: 0.5s !important;
}

/* Seasonal Cherry Blossom Animation */
.sakura-petals {
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
}

.sakura-petal {
  position: absolute;
  font-size: 1.5rem;
  animation: sakura-fall 8s infinite linear;
  opacity: 0.7;
}

@keyframes sakura-fall {
  0% {
    transform: translateY(-100vh) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 0.7;
  }
  90% {
    opacity: 0.7;
  }
  100% {
    transform: translateY(100vh) rotate(360deg);
    opacity: 0;
  }
}

/* Professional Loading States */
.sakura-loading {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  border: 3px solid rgba(0, 0, 0, 0.1);
  border-top: 3px solid var(--seasonal-primary);
  border-radius: 50%;
  animation: sakura-spin 1s linear infinite;
}

@keyframes sakura-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* SPECTACULAR VISUAL ENHANCEMENTS - EMERGENCY ADDITIONS */

/* Particle System Animation */
.sakura-particle-system {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.sakura-particle {
  position: absolute;
  width: 8px;
  height: 8px;
  background: radial-gradient(circle, var(--seasonal-primary), transparent);
  border-radius: 50%;
  animation: sakura-float 6s infinite ease-in-out;
}

@keyframes sakura-float {
  0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0; }
  50% { transform: translateY(-20px) rotate(180deg); opacity: 1; }
}

/* Pulsing Elements */
.sakura-pulse {
  animation: sakura-pulse 2s infinite ease-in-out;
}

@keyframes sakura-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.05); opacity: 0.9; }
}

/* Live Pulse Animation for Real-time Updates */
.sakura-pulse-live {
  animation: sakura-pulse-live 0.3s ease-out;
  box-shadow: 0 0 15px var(--seasonal-primary), 
              0 0 30px rgba(255, 105, 180, 0.4);
}

@keyframes sakura-pulse-live {
  0% { transform: scale(1); }
  50% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

/* Breathing Animation */
.sakura-breathe {
  animation: sakura-breathe 4s infinite ease-in-out;
}

@keyframes sakura-breathe {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(1.02) rotate(2deg); }
}

/* Glow Effect */
.sakura-glow {
  box-shadow: 0 0 20px var(--seasonal-primary), 
              0 0 40px rgba(255, 105, 180, 0.3),
              0 0 60px rgba(255, 105, 180, 0.1);
  animation: sakura-glow-pulse 3s infinite ease-in-out;
}

@keyframes sakura-glow-pulse {
  0%, 100% { box-shadow: 0 0 20px var(--seasonal-primary), 
                        0 0 40px rgba(255, 105, 180, 0.3),
                        0 0 60px rgba(255, 105, 180, 0.1); }
  50% { box-shadow: 0 0 30px var(--seasonal-primary), 
                    0 0 60px rgba(255, 105, 180, 0.5),
                    0 0 90px rgba(255, 105, 180, 0.2); }
}

/* Rainbow Border Animation */
.sakura-rainbow-border {
  position: relative;
  background: linear-gradient(45deg, #ff006e, #fb5607, #ffbe0b, #8338ec, #3a86ff);
  background-size: 400% 400%;
  animation: sakura-rainbow 4s ease infinite;
  border-radius: var(--sakura-radius-xl);
  padding: 3px;
}

.sakura-rainbow-border > div {
  background: rgba(255, 255, 255, 0.95);
  border-radius: var(--sakura-radius-lg);
  padding: var(--sakura-space-xl);
}

@keyframes sakura-rainbow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Typewriter Effect */
.sakura-typewriter {
  overflow: hidden;
  border-right: 3px solid var(--seasonal-primary);
  white-space: nowrap;
  animation: sakura-typing 4s steps(30, end), sakura-blink-caret 0.75s step-end infinite;
}

@keyframes sakura-typing {
  from { width: 0; }
  to { width: 100%; }
}

@keyframes sakura-blink-caret {
  from, to { border-color: transparent; }
  50% { border-color: var(--seasonal-primary); }
}

/* Ripple Effect */
.sakura-ripple {
  position: relative;
  overflow: hidden;
}

.sakura-ripple::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

.sakura-ripple:hover::after {
  width: 300px;
  height: 300px;
}

/* Floating Elements */
.sakura-float {
  animation: sakura-float-up-down 6s ease-in-out infinite;
}

@keyframes sakura-float-up-down {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-20px); }
}

/* Matrix Rain Effect */
.sakura-matrix {
  position: relative;
  overflow: hidden;
}

.sakura-matrix::before {
  content: '';
  position: absolute;
  top: -50%;
  left: 0;
  width: 100%;
  height: 200%;
  background: repeating-linear-gradient(
    90deg,
    transparent,
    transparent 98px,
    var(--seasonal-primary) 100px
  );
  animation: sakura-matrix-rain 20s linear infinite;
  opacity: 0.1;
}

@keyframes sakura-matrix-rain {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* Scale on Hover */
.sakura-scale-hover {
  transition: transform 0.3s ease;
}

.sakura-scale-hover:hover {
  transform: scale(1.1) rotate(2deg);
}

/* Color Shift Animation */
.sakura-color-shift {
  background: linear-gradient(45deg, #ff006e, #fb5607, #ffbe0b, #8338ec, #3a86ff);
  background-size: 400% 400%;
  animation: sakura-color-shift 8s ease infinite;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

@keyframes sakura-color-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* === COMPREHENSIVE CHERRY BLOSSOM ANIMATIONS === */

/* Cherry Petal Fall Animation */
.cherry-petal-fall {
  animation: cherry-petal-fall 4s ease-in-out infinite;
}

@keyframes cherry-petal-fall {
  0% {
    transform: translateY(-10px) rotate(0deg) scale(1);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  50% {
    transform: translateY(50px) rotate(180deg) scale(0.9);
    opacity: 0.8;
  }
  100% {
    transform: translateY(100px) rotate(360deg) scale(0.7);
    opacity: 0;
  }
}

/* Cherry Bloom Animation */
.cherry-bloom {
  animation: cherry-bloom 1.2s ease-out;
}

@keyframes cherry-bloom {
  0% {
    transform: scale(0) rotate(-10deg);
    opacity: 0;
  }
  50% {
    transform: scale(1.1) rotate(5deg);
    opacity: 0.8;
  }
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}

/* Cherry Branch Sway Animation */
.cherry-branch-sway {
  animation: cherry-branch-sway 6s ease-in-out infinite;
  transform-origin: bottom center;
}

@keyframes cherry-branch-sway {
  0%, 100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(2deg);
  }
  75% {
    transform: rotate(-1deg);
  }
}

/* Cherry Cluster Pulse Animation */
.cherry-cluster-pulse {
  animation: cherry-cluster-pulse 3s ease-in-out infinite;
}

@keyframes cherry-cluster-pulse {
  0%, 100% {
    transform: scale(1);
    filter: brightness(1);
  }
  50% {
    transform: scale(1.05);
    filter: brightness(1.1);
  }
}

/* Cherry Wood Texture Animation */
.cherry-wood-grain {
  position: relative;
  overflow: hidden;
}

.cherry-wood-grain::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, 
    transparent,
    rgba(139, 69, 19, 0.1),
    transparent
  );
  animation: cherry-wood-grain 8s linear infinite;
}

@keyframes cherry-wood-grain {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

/* Cherry Blossom Interaction Animations */
.cherry-hover-bloom {
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.cherry-hover-bloom:hover {
  transform: scale(1.05) rotate(2deg);
  filter: brightness(1.1) saturate(1.2);
  box-shadow: var(--cherry-shadow-cluster);
}

.cherry-hover-float {
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.cherry-hover-float:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: var(--cherry-shadow-canopy);
}

.cherry-hover-sway {
  transition: all 0.3s ease-in-out;
  transform-origin: bottom center;
}

.cherry-hover-sway:hover {
  transform: rotate(1deg) scale(1.01);
}

/* Cherry Loading Animations */
.cherry-loading-bloom {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  border: 3px solid var(--cherry-petal-light);
  border-top: 3px solid var(--cherry-sakura-pink);
  border-radius: 50%;
  animation: cherry-loading-bloom 1.5s ease-in-out infinite;
}

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

/* Cherry Seasonal Transition Animation */
.cherry-season-transition {
  animation: cherry-season-transition 2s ease-in-out;
}

@keyframes cherry-season-transition {
  0% {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
  }
  50% {
    opacity: 0.5;
    transform: translateY(-5px) scale(1.02);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Cherry Micro-interactions */
.cherry-button-press {
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.cherry-button-press:active {
  transform: scale(0.95) translateY(1px);
  box-shadow: var(--cherry-shadow-petal);
}

.cherry-card-lift {
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

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

/* Cherry Accessibility Animations */
@media (prefers-reduced-motion: reduce) {
  .cherry-petal-fall,
  .cherry-bloom,
  .cherry-branch-sway,
  .cherry-cluster-pulse,
  .cherry-wood-grain::before,
  .cherry-season-transition {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
  
  .cherry-hover-bloom:hover,
  .cherry-hover-float:hover,
  .cherry-hover-sway:hover {
    transform: none !important;
  }
}

/* === CHERRY DESIGN SYSTEM UTILITY CLASSES === */

/* Cherry Typography Utilities */
.cherry-text-center { text-align: center; }
.cherry-text-left { text-align: left; }
.cherry-text-right { text-align: right; }
.cherry-text-whisper { font-size: var(--cherry-text-whisper); }
.cherry-text-murmur { font-size: var(--cherry-text-murmur); }
.cherry-text-speak { font-size: var(--cherry-text-speak); }
.cherry-text-call { font-size: var(--cherry-text-call); }
.cherry-text-announce { font-size: var(--cherry-text-announce); }
.cherry-text-proclaim { font-size: var(--cherry-text-proclaim); }
.cherry-text-declare { font-size: var(--cherry-text-declare); }
.cherry-text-shout { font-size: var(--cherry-text-shout); }
.cherry-text-roar { font-size: var(--cherry-text-roar); }
.cherry-text-thunder { font-size: var(--cherry-text-thunder); }

/* Cherry Weight Utilities */
.cherry-weight-petal { font-weight: var(--cherry-weight-petal); }
.cherry-weight-branch { font-weight: var(--cherry-weight-branch); }
.cherry-weight-trunk { font-weight: var(--cherry-weight-trunk); }
.cherry-weight-root { font-weight: var(--cherry-weight-root); }
.cherry-weight-earth { font-weight: var(--cherry-weight-earth); }

/* Cherry Spacing Utilities - Margin Bottom */
.cherry-mb-petal { margin-bottom: var(--cherry-space-petal); }
.cherry-mb-bud { margin-bottom: var(--cherry-space-bud); }
.cherry-mb-flower { margin-bottom: var(--cherry-space-flower); }
.cherry-mb-cluster { margin-bottom: var(--cherry-space-cluster); }
.cherry-mb-branch { margin-bottom: var(--cherry-space-branch); }
.cherry-mb-limb { margin-bottom: var(--cherry-space-limb); }
.cherry-mb-trunk { margin-bottom: var(--cherry-space-trunk); }

/* Cherry Spacing Utilities - Margin Top */
.cherry-mt-petal { margin-top: var(--cherry-space-petal); }
.cherry-mt-bud { margin-top: var(--cherry-space-bud); }
.cherry-mt-flower { margin-top: var(--cherry-space-flower); }
.cherry-mt-cluster { margin-top: var(--cherry-space-cluster); }
.cherry-mt-branch { margin-top: var(--cherry-space-branch); }
.cherry-mt-limb { margin-top: var(--cherry-space-limb); }
.cherry-mt-trunk { margin-top: var(--cherry-space-trunk); }

/* Cherry Spacing Utilities - Padding */
.cherry-p-petal { padding: var(--cherry-space-petal); }
.cherry-p-bud { padding: var(--cherry-space-bud); }
.cherry-p-flower { padding: var(--cherry-space-flower); }
.cherry-p-cluster { padding: var(--cherry-space-cluster); }
.cherry-p-branch { padding: var(--cherry-space-branch); }
.cherry-p-limb { padding: var(--cherry-space-limb); }
.cherry-p-trunk { padding: var(--cherry-space-trunk); }

/* Cherry Shadow Utilities */
.cherry-shadow-petal { box-shadow: var(--cherry-shadow-petal); }
.cherry-shadow-flower { box-shadow: var(--cherry-shadow-flower); }
.cherry-shadow-cluster { box-shadow: var(--cherry-shadow-cluster); }
.cherry-shadow-branch { box-shadow: var(--cherry-shadow-branch); }
.cherry-shadow-canopy { box-shadow: var(--cherry-shadow-canopy); }
.cherry-shadow-grove { box-shadow: var(--cherry-shadow-grove); }

/* Cherry Radius Utilities */
.cherry-radius-petal { border-radius: var(--cherry-radius-petal); }
.cherry-radius-bud { border-radius: var(--cherry-radius-bud); }
.cherry-radius-bloom { border-radius: var(--cherry-radius-bloom); }
.cherry-radius-flower { border-radius: var(--cherry-radius-flower); }
.cherry-radius-cluster { border-radius: var(--cherry-radius-cluster); }
.cherry-radius-branch { border-radius: var(--cherry-radius-branch); }
.cherry-radius-trunk { border-radius: var(--cherry-radius-trunk); }
.cherry-radius-natural { border-radius: var(--cherry-radius-natural); }
.cherry-radius-organic { border-radius: var(--cherry-radius-organic); }

/* Legacy Utility Classes (maintained for compatibility) */
.sakura-text-center { text-align: center; }
.sakura-text-left { text-align: left; }
.sakura-text-right { text-align: right; }

.sakura-mb-xs { margin-bottom: var(--sakura-space-xs); }
.sakura-mb-sm { margin-bottom: var(--sakura-space-sm); }
.sakura-mb-md { margin-bottom: var(--sakura-space-md); }
.sakura-mb-lg { margin-bottom: var(--sakura-space-lg); }
.sakura-mb-xl { margin-bottom: var(--sakura-space-xl); }

.sakura-mt-xs { margin-top: var(--sakura-space-xs); }
.sakura-mt-sm { margin-top: var(--sakura-space-sm); }
.sakura-mt-md { margin-top: var(--sakura-space-md); }
.sakura-mt-lg { margin-top: var(--sakura-space-lg); }
.sakura-mt-xl { margin-top: var(--sakura-space-xl); }

.sakura-p-xs { padding: var(--sakura-space-xs); }
.sakura-p-sm { padding: var(--sakura-space-sm); }
.sakura-p-md { padding: var(--sakura-space-md); }
.sakura-p-lg { padding: var(--sakura-space-lg); }
.sakura-p-xl { padding: var(--sakura-space-xl); }