/* ============================================
   TherapyCanvas Animation System
   GPU-accelerated, performant micro-interactions
   ============================================ */

/* ---- KEYFRAMES ---- */

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.92);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

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

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

@keyframes gentleFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-12px) rotate(1deg); }
}

@keyframes gentlePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.02); }
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes successBounce {
  0% { transform: scale(0); opacity: 0; }
  50% { transform: scale(1.15); }
  70% { transform: scale(0.95); }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes checkDraw {
  0% { stroke-dashoffset: 48; }
  100% { stroke-dashoffset: 0; }
}

@keyframes slideStep {
  from {
    opacity: 0;
    transform: translateX(24px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

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

@keyframes modalIn {
  from {
    opacity: 0;
    transform: scale(0.9) translateY(16px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

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

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

@keyframes dotPulse {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
  40% { transform: scale(1); opacity: 1; }
}

@keyframes ripple {
  0% { transform: scale(0); opacity: 0.5; }
  100% { transform: scale(4); opacity: 0; }
}

@keyframes navSlideDown {
  from {
    opacity: 0;
    transform: translateY(-100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes countUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes borderGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(122, 139, 111, 0); }
  50% { box-shadow: 0 0 0 4px rgba(122, 139, 111, 0.12); }
}

/* ---- SCROLL REVEAL BASE ---- */

[data-animate] {
  opacity: 0;
  will-change: transform, opacity;
}

[data-animate="fade-up"] {
  transform: translateY(28px);
}

[data-animate="fade-down"] {
  transform: translateY(-16px);
}

[data-animate="fade-in"] {
  /* just opacity */
}

[data-animate="scale-in"] {
  transform: scale(0.92);
}

[data-animate="slide-left"] {
  transform: translateX(-32px);
}

[data-animate="slide-right"] {
  transform: translateX(32px);
}

/* Revealed state */
[data-animate].revealed {
  opacity: 1;
  transform: translateY(0) translateX(0) scale(1);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Stagger delays */
[data-animate].revealed[data-delay="1"] { transition-delay: 0.08s; }
[data-animate].revealed[data-delay="2"] { transition-delay: 0.16s; }
[data-animate].revealed[data-delay="3"] { transition-delay: 0.24s; }
[data-animate].revealed[data-delay="4"] { transition-delay: 0.32s; }
[data-animate].revealed[data-delay="5"] { transition-delay: 0.4s; }
[data-animate].revealed[data-delay="6"] { transition-delay: 0.48s; }
[data-animate].revealed[data-delay="7"] { transition-delay: 0.56s; }
[data-animate].revealed[data-delay="8"] { transition-delay: 0.64s; }

/* ---- HERO ENTRANCE (immediate, no scroll needed) ---- */

.hero-entrance {
  opacity: 0;
  transform: translateY(24px);
  animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.hero-entrance-1 { animation-delay: 0.1s; }
.hero-entrance-2 { animation-delay: 0.22s; }
.hero-entrance-3 { animation-delay: 0.34s; }
.hero-entrance-4 { animation-delay: 0.46s; }
.hero-entrance-5 { animation-delay: 0.58s; }

/* ---- NAV ENTRANCE ---- */

.nav-entrance {
  animation: navSlideDown 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* ---- FLOATING DECORATIVE ---- */

.animate-float {
  animation: gentleFloat 6s ease-in-out infinite;
}

.animate-float-slow {
  animation: gentleFloat 8s ease-in-out infinite;
}

/* ---- HOVER EFFECTS ---- */

.hover-lift {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
}

.hover-lift-sm {
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.hover-lift-sm:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
}

.hover-scale {
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.hover-scale:hover {
  transform: scale(1.03);
}

.hover-glow {
  transition: box-shadow 0.3s ease;
}

.hover-glow:hover {
  box-shadow: 0 0 0 4px rgba(122, 139, 111, 0.15),
              0 8px 24px rgba(122, 139, 111, 0.12);
}

/* ---- BUTTON INTERACTIONS ---- */

.btn-animate {
  position: relative;
  overflow: hidden;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-animate:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

.btn-animate:active {
  transform: translateY(0) scale(0.97);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition-duration: 0.08s;
}

/* Ripple effect on buttons */
.btn-animate .ripple-effect {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  pointer-events: none;
  animation: ripple 0.6s ease-out forwards;
}

/* ---- FORM FIELD ANIMATIONS ---- */

.field-animate {
  transition: border-color 0.25s ease,
              box-shadow 0.25s ease,
              transform 0.2s ease;
}

.field-animate:focus {
  border-color: var(--sage, #7A8B6F);
  box-shadow: 0 0 0 3px rgba(122, 139, 111, 0.12);
  transform: translateY(-1px);
}

/* Label float animation */
.form-group-animate label {
  transition: color 0.2s ease, transform 0.2s ease;
}

.form-group-animate:focus-within label {
  color: var(--sage, #7A8B6F);
}

/* ---- MODAL ANIMATIONS ---- */

.modal-animate {
  animation: modalIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.backdrop-animate {
  animation: backdropIn 0.25s ease both;
}

/* ---- STEP TRANSITION ---- */

.step-enter {
  animation: slideStep 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.step-enter-back {
  animation: slideStepBack 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Step indicator dot animation */
.step-dot-animate {
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.step-divider-animate {
  position: relative;
  overflow: hidden;
}

.step-divider-animate::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0;
  background: var(--accent, var(--sage, #7A8B6F));
  transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.step-divider-animate.filled::after {
  width: 100%;
}

/* ---- LOADING STATES ---- */

.skeleton {
  background: linear-gradient(90deg,
    rgba(0,0,0,0.04) 25%,
    rgba(0,0,0,0.08) 50%,
    rgba(0,0,0,0.04) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  border-radius: 8px;
}

.spinner {
  width: 24px;
  height: 24px;
  border: 2.5px solid rgba(0, 0, 0, 0.08);
  border-top-color: var(--sage, #7A8B6F);
  border-radius: 50%;
  animation: spinnerRotate 0.7s linear infinite;
}

.spinner-light {
  border-color: rgba(255, 255, 255, 0.2);
  border-top-color: #fff;
}

.dots-loading {
  display: inline-flex;
  gap: 4px;
}

.dots-loading span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sage, #7A8B6F);
  animation: dotPulse 1.2s ease-in-out infinite;
}

.dots-loading span:nth-child(2) { animation-delay: 0.15s; }
.dots-loading span:nth-child(3) { animation-delay: 0.3s; }

/* ---- SUCCESS ANIMATION ---- */

.success-bounce {
  animation: successBounce 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* ---- CARD SELECTION ---- */

.select-animate {
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.select-animate.selected {
  transform: scale(1.01);
  border-color: var(--accent, var(--sage, #7A8B6F));
  box-shadow: 0 0 0 3px rgba(122, 139, 111, 0.12);
}

/* ---- TAG / PILL ANIMATIONS ---- */

.pill-animate {
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.2s ease;
}

.pill-animate:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

/* ---- STAGGERED CHILDREN ---- */

[data-stagger] > * {
  opacity: 0;
  transform: translateY(16px);
}

[data-stagger].revealed > * {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-stagger].revealed > *:nth-child(1) { transition-delay: 0.05s; }
[data-stagger].revealed > *:nth-child(2) { transition-delay: 0.1s; }
[data-stagger].revealed > *:nth-child(3) { transition-delay: 0.15s; }
[data-stagger].revealed > *:nth-child(4) { transition-delay: 0.2s; }
[data-stagger].revealed > *:nth-child(5) { transition-delay: 0.25s; }
[data-stagger].revealed > *:nth-child(6) { transition-delay: 0.3s; }
[data-stagger].revealed > *:nth-child(7) { transition-delay: 0.35s; }
[data-stagger].revealed > *:nth-child(8) { transition-delay: 0.4s; }
[data-stagger].revealed > *:nth-child(9) { transition-delay: 0.45s; }
[data-stagger].revealed > *:nth-child(10) { transition-delay: 0.5s; }
[data-stagger].revealed > *:nth-child(11) { transition-delay: 0.55s; }
[data-stagger].revealed > *:nth-child(12) { transition-delay: 0.6s; }

/* ---- PAGE TRANSITION ---- */

.page-ready body {
  opacity: 1;
}

/* ---- SMOOTH SCROLL ---- */

html {
  scroll-behavior: smooth;
}

/* ---- REDUCED MOTION ---- */

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

  [data-animate] {
    opacity: 1 !important;
    transform: none !important;
  }

  [data-stagger] > * {
    opacity: 1 !important;
    transform: none !important;
  }

  .hero-entrance {
    opacity: 1 !important;
    transform: none !important;
  }
}