/* ==========================================================================
   SJ88 Design System — Animations
   Keyframes, utility classes, scroll-reveal, hover effects
   ========================================================================== */

/* --------------------------------------------------------------------------
   KEYFRAMES
   -------------------------------------------------------------------------- */
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fade-in-up {
  from { opacity: 0; transform: translate3d(0, 24px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes fade-in-down {
  from { opacity: 0; transform: translate3d(0, -24px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes fade-in-left {
  from { opacity: 0; transform: translate3d(-24px, 0, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes fade-in-right {
  from { opacity: 0; transform: translate3d(24px, 0, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes slide-up {
  from { transform: translate3d(0, 100%, 0); }
  to   { transform: translate3d(0, 0, 0); }
}

@keyframes slide-in-left {
  from { transform: translate3d(-100%, 0, 0); }
  to   { transform: translate3d(0, 0, 0); }
}

@keyframes slide-in-right {
  from { transform: translate3d(120%, 0, 0); opacity: 0; }
  to   { transform: translate3d(0, 0, 0); opacity: 1; }
}

@keyframes slide-out-right {
  to { transform: translate3d(120%, 0, 0); opacity: 0; }
}

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

@keyframes bounce-in {
  0%   { opacity: 0; transform: scale(0.3); }
  50%  { opacity: 1; transform: scale(1.06); }
  70%  { transform: scale(0.95); }
  100% { transform: scale(1); }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}

@keyframes float-slow {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(20px, -30px) scale(1.05); }
  66%      { transform: translate(-15px, 15px) scale(0.95); }
}

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.4); transform: scale(1); }
  50%      { box-shadow: 0 0 0 16px rgba(99, 102, 241, 0); transform: scale(1.05); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.5; }
}

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

@keyframes gradient-shift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

@keyframes blob {
  0%, 100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
  25%      { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
  50%      { border-radius: 50% 60% 50% 50% / 40% 60% 50% 60%; }
  75%      { border-radius: 60% 40% 60% 40% / 60% 40% 60% 40%; }
}

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

@keyframes ping {
  75%, 100% { transform: scale(2); opacity: 0; }
}

@keyframes ripple {
  to { transform: scale(4); opacity: 0; }
}

@keyframes success-pop {
  0%   { transform: scale(0.6); opacity: 0; }
  50%  { transform: scale(1.15); }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes heart-pulse {
  0%   { transform: scale(1); }
  25%  { transform: scale(1.2); }
  50%  { transform: scale(1); }
  75%  { transform: scale(1.15); }
  100% { transform: scale(1); }
}

@keyframes shake {
  0%, 100%      { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
  20%, 40%, 60%, 80%      { transform: translateX(4px); }
}

@keyframes confetti-fall {
  0%   { transform: translate3d(0, -100vh, 0) rotate(0deg); opacity: 1; }
  100% { transform: translate3d(var(--cx, 0), 100vh, 0) rotate(720deg); opacity: 0; }
}

@keyframes orbit {
  from { transform: rotate(0deg) translateX(var(--orbit-r, 60px)) rotate(0deg); }
  to   { transform: rotate(360deg) translateX(var(--orbit-r, 60px)) rotate(-360deg); }
}

@keyframes count-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes glow-pulse {
  0%, 100% { filter: drop-shadow(0 0 6px rgba(99,102,241,0.4)); }
  50%      { filter: drop-shadow(0 0 18px rgba(99,102,241,0.8)); }
}

@keyframes page-fade-out {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-8px); }
}

@keyframes wiggle {
  0%, 100% { transform: rotate(0); }
  25%      { transform: rotate(-3deg); }
  75%      { transform: rotate(3deg); }
}

@keyframes draw-line {
  to { stroke-dashoffset: 0; }
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.2; }
}

/* --------------------------------------------------------------------------
   ANIMATION UTILITIES
   -------------------------------------------------------------------------- */
.animate-fade-in        { animation: fade-in var(--duration-base) var(--ease-out) both; }
.animate-fade-in-up     { animation: fade-in-up var(--duration-slow) var(--ease-out) both; }
.animate-fade-in-down   { animation: fade-in-down var(--duration-slow) var(--ease-out) both; }
.animate-fade-in-left   { animation: fade-in-left var(--duration-slow) var(--ease-out) both; }
.animate-fade-in-right  { animation: fade-in-right var(--duration-slow) var(--ease-out) both; }
.animate-slide-up       { animation: slide-up var(--duration-slow) var(--ease-spring) both; }
.animate-slide-in-left  { animation: slide-in-left var(--duration-slow) var(--ease-out) both; }
.animate-slide-in-right { animation: slide-in-right var(--duration-slow) var(--ease-out) both; }
.animate-scale-in       { animation: scale-in var(--duration-base) var(--ease-spring) both; }
.animate-bounce-in      { animation: bounce-in var(--duration-slower) var(--ease-bounce) both; }
.animate-float          { animation: float 4s var(--ease-in-out) infinite; }
.animate-float-slow     { animation: float-slow 12s var(--ease-in-out) infinite; }
.animate-pulse          { animation: pulse 2s var(--ease-in-out) infinite; }
.animate-pulse-glow     { animation: pulse-glow 2s var(--ease-in-out) infinite; }
.animate-shimmer        { animation: shimmer 2s linear infinite; }
.animate-gradient       { background-size: 200% 200%; animation: gradient-shift 4s var(--ease-in-out) infinite; }
.animate-blob           { animation: blob 16s var(--ease-in-out) infinite; }
.animate-spin           { animation: spin 0.9s linear infinite; }
.animate-spin-slow      { animation: spin 3s linear infinite; }
.animate-ping           { animation: ping 1.2s var(--ease-out) infinite; }
.animate-shake          { animation: shake 0.5s var(--ease-out); }
.animate-wiggle         { animation: wiggle 0.6s var(--ease-in-out); }
.animate-success-pop    { animation: success-pop var(--duration-slow) var(--ease-spring) both; }
.animate-heart-pulse    { animation: heart-pulse 0.8s var(--ease-out); }
.animate-glow           { animation: glow-pulse 2s var(--ease-in-out) infinite; }
.animate-blink          { animation: blink 1s steps(2, end) infinite; }

/* --------------------------------------------------------------------------
   STAGGER DELAYS — use with animate-* classes
   -------------------------------------------------------------------------- */
.stagger-1  { animation-delay: 60ms; }
.stagger-2  { animation-delay: 120ms; }
.stagger-3  { animation-delay: 180ms; }
.stagger-4  { animation-delay: 240ms; }
.stagger-5  { animation-delay: 300ms; }
.stagger-6  { animation-delay: 360ms; }
.stagger-7  { animation-delay: 420ms; }
.stagger-8  { animation-delay: 480ms; }
.stagger-9  { animation-delay: 540ms; }
.stagger-10 { animation-delay: 600ms; }
.stagger-11 { animation-delay: 660ms; }
.stagger-12 { animation-delay: 720ms; }

/* --------------------------------------------------------------------------
   HOVER EFFECTS
   -------------------------------------------------------------------------- */
.hover-lift {
  transition: transform var(--transition-base), box-shadow var(--transition-base);
  will-change: transform;
}
.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
}

.hover-glow {
  transition: box-shadow var(--transition-base), border-color var(--transition-base);
}
.hover-glow:hover {
  box-shadow: var(--shadow-glow-brand);
  border-color: var(--brand-300);
}

.hover-scale {
  transition: transform var(--transition-base);
  will-change: transform;
}
.hover-scale:hover { transform: scale(1.05); }

.hover-tilt {
  transition: transform var(--transition-base) var(--ease-out);
  will-change: transform;
}
.hover-tilt:hover { transform: perspective(800px) rotateX(4deg) rotateY(-4deg); }

.hover-rotate { transition: transform var(--transition-base); }
.hover-rotate:hover { transform: rotate(4deg) scale(1.05); }

.hover-shine {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.hover-shine::before {
  content: "";
  position: absolute;
  top: 0; left: -120%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  transition: left var(--duration-slower) var(--ease-out);
  pointer-events: none;
  z-index: 1;
}
.hover-shine:hover::before { left: 120%; }

/* --------------------------------------------------------------------------
   SCROLL REVEAL — driven by [data-reveal] + animations.js
   -------------------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition: opacity var(--duration-slow) var(--ease-out),
              transform var(--duration-slow) var(--ease-out);
  will-change: opacity, transform;
}
[data-reveal].is-revealed {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

[data-reveal="fade"]      { transform: none; }
[data-reveal="fade"].is-revealed { transform: none; }

[data-reveal="left"]      { transform: translate3d(-32px, 0, 0); }
[data-reveal="left"].is-revealed { transform: translate3d(0, 0, 0); }

[data-reveal="right"]     { transform: translate3d(32px, 0, 0); }
[data-reveal="right"].is-revealed { transform: translate3d(0, 0, 0); }

[data-reveal="scale"]     { transform: scale(0.92); }
[data-reveal="scale"].is-revealed { transform: scale(1); }

[data-reveal="flip"]      { transform: perspective(800px) rotateX(20deg); transform-origin: top; }
[data-reveal="flip"].is-revealed { transform: perspective(800px) rotateX(0); }

/* --------------------------------------------------------------------------
   3D TILT — driven by [data-tilt] + animations.js
   -------------------------------------------------------------------------- */
[data-tilt] {
  transform-style: preserve-3d;
  transition: transform var(--duration-base) var(--ease-out);
  will-change: transform;
}
[data-tilt] [data-tilt-layer] {
  transform: translateZ(var(--tz, 30px));
}

/* --------------------------------------------------------------------------
   PAGE TRANSITION — fade out on link click
   -------------------------------------------------------------------------- */
.page-leaving { animation: page-fade-out var(--duration-fast) var(--ease-out) forwards; pointer-events: none; }

/* --------------------------------------------------------------------------
   RIPPLE EFFECT — driven by animations.js
   -------------------------------------------------------------------------- */
.ripple {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  background: rgba(255, 255, 255, 0.5);
  pointer-events: none;
  animation: ripple 0.6s var(--ease-out);
  z-index: 0;
}

/* --------------------------------------------------------------------------
   CONFETTI BURST
   -------------------------------------------------------------------------- */
.confetti-piece {
  position: fixed;
  width: 10px; height: 14px;
  top: -20px;
  z-index: var(--z-toast);
  pointer-events: none;
  animation: confetti-fall linear forwards;
  border-radius: 2px;
}

/* --------------------------------------------------------------------------
   REDUCED MOTION — respect user preference
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  [data-tilt]   { transform: none !important; }
  .animate-float, .animate-float-slow, .animate-pulse, .animate-pulse-glow,
  .animate-spin, .animate-spin-slow, .animate-blink, .animate-ping, .animate-glow { animation: none !important; }
}

/* --------------------------------------------------------------------------
   PERFORMANCE HINTS
   -------------------------------------------------------------------------- */
.will-animate { will-change: transform, opacity; }
.will-transform { will-change: transform; }
.will-opacity { will-change: opacity; }