/* ==============================================
   Recenzomat Emotional Design System
   CSS animations, micro-interactions & motion
   ============================================== */

/* --- Easing Tokens --- */
:root {
  --ease-out-expo: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ==============================================
   SCROLL REVEAL
   ============================================== */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 600ms var(--ease-out-expo), transform 600ms var(--ease-out-expo);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger children inside a .reveal-stagger container */
.reveal-stagger > .reveal:nth-child(1) { transition-delay: 0ms; }
.reveal-stagger > .reveal:nth-child(2) { transition-delay: 100ms; }
.reveal-stagger > .reveal:nth-child(3) { transition-delay: 200ms; }
.reveal-stagger > .reveal:nth-child(4) { transition-delay: 300ms; }
.reveal-stagger > .reveal:nth-child(5) { transition-delay: 400ms; }
.reveal-stagger > .reveal:nth-child(6) { transition-delay: 500ms; }
.reveal-stagger > .reveal:nth-child(7) { transition-delay: 600ms; }
.reveal-stagger > .reveal:nth-child(8) { transition-delay: 700ms; }
.reveal-stagger > .reveal:nth-child(9) { transition-delay: 800ms; }
.reveal-stagger > .reveal:nth-child(10) { transition-delay: 900ms; }

/* Explicit delay classes (for non-stagger contexts) */
.reveal-d1 { transition-delay: 100ms; }
.reveal-d2 { transition-delay: 200ms; }
.reveal-d3 { transition-delay: 300ms; }
.reveal-d4 { transition-delay: 400ms; }
.reveal-d5 { transition-delay: 500ms; }
.reveal-d6 { transition-delay: 600ms; }

/* ==============================================
   CARD LIFT (hover)
   ============================================== */
.card-lift {
  transition: transform 250ms var(--ease-out-expo), box-shadow 250ms ease;
}
.card-lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 16px rgba(45, 49, 66, 0.1);
}

/* ==============================================
   BUTTON PRESS (hover + active)
   ============================================== */
.btn-press {
  transition: transform 200ms var(--ease-spring), box-shadow 200ms ease;
}
.btn-press:hover {
  transform: scale(1.04);
}
.btn-press:active {
  transform: scale(0.97);
}

/* ==============================================
   CTA PULSE RING
   ============================================== */
.btn-cta-pulse {
  position: relative;
}
.btn-cta-pulse::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  border: 2px solid #E8735A;
  opacity: 0;
  animation: ctaPulse 2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes ctaPulse {
  0% { opacity: 0; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(1.03); }
  100% { opacity: 0; transform: scale(1.08); }
}

/* ==============================================
   NAV DRAW UNDERLINE
   ============================================== */
.nav-draw-underline {
  position: relative;
}
.nav-draw-underline::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: #E8735A;
  border-radius: 1px;
  transition: width 300ms var(--ease-out-expo);
}
.nav-draw-underline:hover::after {
  width: 100%;
}

/* ==============================================
   GRADIENT ORB (decorative background)
   ============================================== */
.gradient-orb {
  position: absolute;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.2;
  pointer-events: none;
  z-index: 0;
}
.gradient-orb--coral {
  background: radial-gradient(circle, #E8735A 0%, #F4B8AA 50%, transparent 70%);
  animation: orbFloat1 12s ease-in-out infinite alternate;
}
.gradient-orb--amber {
  background: radial-gradient(circle, #F5A623 0%, #FCCF7E 50%, transparent 70%);
  animation: orbFloat2 15s ease-in-out infinite alternate;
}
@keyframes orbFloat1 {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(40px, 30px) scale(1.1); }
  100% { transform: translate(-20px, 50px) scale(0.95); }
}
@keyframes orbFloat2 {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-30px, -40px) scale(1.05); }
  100% { transform: translate(30px, -20px) scale(1.1); }
}

/* ==============================================
   FLOATING STARS
   ============================================== */
.floating-stars {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
.floating-star {
  position: absolute;
  opacity: 0;
  animation: starFloat linear infinite;
}
@keyframes starFloat {
  0% { opacity: 0; transform: translateY(100%) rotate(0deg); }
  10% { opacity: 0.3; }
  90% { opacity: 0.3; }
  100% { opacity: 0; transform: translateY(-100vh) rotate(180deg); }
}

/* ==============================================
   SPARKLE BURST (gold particles)
   ============================================== */
.sparkle {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #F5A623;
  pointer-events: none;
  animation: sparkleOut 600ms var(--ease-out-expo) forwards;
}
@keyframes sparkleOut {
  0% { opacity: 1; transform: translate(0, 0) scale(1); }
  100% { opacity: 0; transform: translate(var(--sx), var(--sy)) scale(0); }
}

/* ==============================================
   SUCCESS CHECKMARK (animated SVG)
   ============================================== */
.success-check {
  width: 56px;
  height: 56px;
}
.success-check circle {
  fill: none;
  stroke: #4CAF82;
  stroke-width: 3;
  stroke-dasharray: 166;
  stroke-dashoffset: 166;
  stroke-linecap: round;
}
.success-check.animate circle {
  animation: checkCircle 500ms var(--ease-out-expo) forwards;
}
.success-check polyline {
  fill: none;
  stroke: #4CAF82;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
}
.success-check.animate polyline {
  animation: checkMark 300ms var(--ease-out-expo) 400ms forwards;
}
@keyframes checkCircle {
  to { stroke-dashoffset: 0; }
}
@keyframes checkMark {
  to { stroke-dashoffset: 0; }
}

/* ==============================================
   FORM VALIDATION STATES
   ============================================== */
.form-valid {
  border-color: #4CAF82 !important;
  box-shadow: 0 0 0 3px #E8F5EE !important;
}
.form-invalid {
  border-color: #D94F4F !important;
  box-shadow: 0 0 0 3px #FDEAEA !important;
}

/* ==============================================
   STAT COUNTER (tabular nums for counting)
   ============================================== */
.stat-counter {
  font-variant-numeric: tabular-nums;
}

/* ==============================================
   WAVE DIVIDER (animated SVG)
   ============================================== */
.wave-divider {
  position: relative;
  height: 80px;
  overflow: hidden;
}
.wave-divider svg {
  position: absolute;
  bottom: 0;
  width: 200%;
  height: 100%;
  animation: waveShift 8s ease-in-out infinite alternate;
}
@keyframes waveShift {
  0% { transform: translateX(0); }
  100% { transform: translateX(-25%); }
}

/* ==============================================
   PENCIL STORY — hand-drawn SVG animations (rough.js)
   ============================================== */

/* Caption text slides up after scene draws */
.pencil-caption {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 500ms var(--ease-out-expo), transform 500ms var(--ease-out-expo);
}

/* ==============================================
   ACCESSIBILITY
   ============================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal {
    opacity: 1;
    transform: none;
  }
  .pencil-caption {
    opacity: 1 !important;
    transform: none !important;
  }
}

@media print {
  .floating-stars,
  .gradient-orb,
  .wave-divider,
  .btn-cta-pulse::before {
    display: none !important;
  }
  .reveal,
  .pencil-caption {
    opacity: 1 !important;
    transform: none !important;
  }
}