/* ─── Spring Physics ─── */
.spring { transition: all 600ms cubic-bezier(0.34, 1.56, 0.64, 1); }
.spring-fast { transition: all 300ms cubic-bezier(0.34, 1.56, 0.64, 1); }
.spring-slow { transition: all 1000ms cubic-bezier(0.34, 1.56, 0.64, 1); }

/* ─── Fade ─── */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeInDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeInScale { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }

.fade-in { animation: fadeIn 400ms ease both; }
.fade-in-up { animation: fadeInUp 500ms ease both; }
.fade-in-down { animation: fadeInDown 500ms ease both; }
.fade-in-scale { animation: fadeInScale 400ms cubic-bezier(0.34, 1.56, 0.64, 1) both; }

/* ─── Slide ─── */
@keyframes slideInLeft { from { transform: translateX(-100%); } to { transform: translateX(0); } }
@keyframes slideInRight { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes slideOutLeft { from { transform: translateX(0); } to { transform: translateX(-100%); } }

.slide-in-left { animation: slideInLeft 400ms cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.slide-in-right { animation: slideInRight 400ms cubic-bezier(0.34, 1.56, 0.64, 1) both; }

/* ─── Pulse / Shimmer ─── */
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
@keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.03); } }

.shimmer { background: linear-gradient(90deg, var(--brand-surface) 25%, var(--brand-surface-raised) 50%, var(--brand-surface) 75%); background-size: 200% 100%; animation: shimmer 2s infinite; }
.pulse { animation: pulse 2s ease-in-out infinite; }
.breathe { animation: breathe 3s ease-in-out infinite; }

/* ─── Float / Levitate ─── */
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.float { animation: float 4s ease-in-out infinite; }

/* ─── Rotate ─── */
@keyframes spin { to { transform: rotate(360deg); } }
.spin { animation: spin 2s linear infinite; }

/* ─── Page Transitions ─── */
.page-enter { animation: fadeInScale 500ms cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.page-exit { animation: fadeOut 300ms ease both; }

/* ─── Stagger children ─── */
.stagger > * { opacity: 0; animation: fadeInUp 500ms ease both; }
.stagger > *:nth-child(1) { animation-delay: 0ms; }
.stagger > *:nth-child(2) { animation-delay: 80ms; }
.stagger > *:nth-child(3) { animation-delay: 160ms; }
.stagger > *:nth-child(4) { animation-delay: 240ms; }
.stagger > *:nth-child(5) { animation-delay: 320ms; }
.stagger > *:nth-child(6) { animation-delay: 400ms; }
.stagger > *:nth-child(7) { animation-delay: 480ms; }
.stagger > *:nth-child(8) { animation-delay: 560ms; }

/* ─── Wave Ripple ─── */
.ripple {
  position: relative;
  overflow: hidden;
}
.ripple::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,0.3) 0%, transparent 50%);
  opacity: 0;
  transition: opacity 0.5s;
  pointer-events: none;
}
.ripple:active::after { opacity: 1; transition: opacity 0s; }

/* ─── Glass Effect ─── */
.glass {
  background: rgba(255,255,255,0.05);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.1);
}
.glass-dark {
  background: rgba(0,0,0,0.3);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.05);
}

/* ─── Gradient Text ─── */
.gradient-text {
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-hover));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ─── Neon Glow ─── */
.glow { box-shadow: 0 0 20px var(--brand-primary), 0 0 40px var(--brand-primary); }
.glow-text { text-shadow: 0 0 10px var(--brand-primary), 0 0 20px var(--brand-primary); }

/* ─── Morph ─── */
@keyframes morph { 0% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; } 50% { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; } 100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; } }
.morph { animation: morph 8s ease-in-out infinite; }

/* ─── Stagger animation classes for JS ─── */
[data-stagger] > * { opacity: 0; }
[data-stagger].visible > * { animation: fadeInUp 500ms ease both; }
[data-stagger].visible > *:nth-child(1) { animation-delay: calc(0 * var(--stagger-delay, 80ms)); }
[data-stagger].visible > *:nth-child(2) { animation-delay: calc(1 * var(--stagger-delay, 80ms)); }
[data-stagger].visible > *:nth-child(3) { animation-delay: calc(2 * var(--stagger-delay, 80ms)); }
[data-stagger].visible > *:nth-child(4) { animation-delay: calc(3 * var(--stagger-delay, 80ms)); }
[data-stagger].visible > *:nth-child(5) { animation-delay: calc(4 * var(--stagger-delay, 80ms)); }
[data-stagger].visible > *:nth-child(6) { animation-delay: calc(5 * var(--stagger-delay, 80ms)); }
[data-stagger].visible > *:nth-child(7) { animation-delay: calc(6 * var(--stagger-delay, 80ms)); }
[data-stagger].visible > *:nth-child(8) { animation-delay: calc(7 * var(--stagger-delay, 80ms)); }

/* ─── Intersection observer fade-in ─── */
.observe-fade { opacity: 0; transform: translateY(30px); transition: opacity 600ms ease, transform 600ms ease; }
.observe-fade.visible { opacity: 1; transform: translateY(0); }