/* ============================================================
   소리튠 자동화 (SoriTune Automation) — Animations & Effects
   Scroll triggers, hover effects, cosmic / antigravity FX
   ============================================================ */

/* ----------------------------------------------------------
   1. Scroll-Triggered Base (.animate-on-scroll)
   Elements start invisible; JS adds .animated when visible.
   ---------------------------------------------------------- */
.animate-on-scroll {
  opacity: 0;
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity, transform;
}

.animate-on-scroll.animated {
  opacity: 1;
  transform: none !important;
}

/* ----------------------------------------------------------
   2. Fade In Variants
   ---------------------------------------------------------- */
/* Fade in (plain) */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.fade-in {
  animation: fadeIn 0.6s ease forwards;
}

/* Fade in up */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}

.fade-in-up { transform: translateY(40px); }
.fade-in-up.animated,
.fade-in-up--instant {
  animation: fadeInUp 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Fade in down */
@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-40px); }
  to   { opacity: 1; transform: translateY(0); }
}

.fade-in-down { transform: translateY(-40px); }
.fade-in-down.animated {
  animation: fadeInDown 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Fade in left */
@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-50px); }
  to   { opacity: 1; transform: translateX(0); }
}

.fade-in-left { transform: translateX(-50px); }
.fade-in-left.animated {
  animation: fadeInLeft 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Fade in right */
@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(50px); }
  to   { opacity: 1; transform: translateX(0); }
}

.fade-in-right { transform: translateX(50px); }
.fade-in-right.animated {
  animation: fadeInRight 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* ----------------------------------------------------------
   3. Slide In Animations
   ---------------------------------------------------------- */
@keyframes slideInUp {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

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

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

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

.slide-in-up    { animation: slideInUp    0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
.slide-in-down  { animation: slideInDown  0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
.slide-in-left  { animation: slideInLeft  0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
.slide-in-right { animation: slideInRight 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards; }

/* ----------------------------------------------------------
   4. Scale In
   ---------------------------------------------------------- */
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.8); }
  to   { opacity: 1; transform: scale(1); }
}

.scale-in { transform: scale(0.8); }
.scale-in.animated {
  animation: scaleIn 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes scaleInBounce {
  0%   { opacity: 0; transform: scale(0.3); }
  50%  { opacity: 1; transform: scale(1.05); }
  70%  { transform: scale(0.95); }
  100% { transform: scale(1); }
}

.scale-in-bounce.animated {
  animation: scaleInBounce 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* ----------------------------------------------------------
   5. Stagger Animation for Grid Items
   ---------------------------------------------------------- */
.stagger-children > * {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

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

.stagger-children.animated > * {
  opacity: 1;
  transform: translateY(0);
}

/* ----------------------------------------------------------
   6. Pulse Glow (CTA Buttons)
   ---------------------------------------------------------- */
@keyframes pulseGlow {
  0%   { box-shadow: 0 0 0 0 rgba(229, 25, 55, 0.5); }
  70%  { box-shadow: 0 0 0 16px rgba(229, 25, 55, 0); }
  100% { box-shadow: 0 0 0 0 rgba(229, 25, 55, 0); }
}

.pulse-glow {
  animation: pulseGlow 2s ease-in-out infinite;
}

@keyframes pulseGlowCosmic {
  0%   { box-shadow: 0 0 0 0 rgba(102, 126, 234, 0.45); }
  70%  { box-shadow: 0 0 0 18px rgba(102, 126, 234, 0); }
  100% { box-shadow: 0 0 0 0 rgba(102, 126, 234, 0); }
}

.pulse-glow-cosmic {
  animation: pulseGlowCosmic 2s ease-in-out infinite;
}

/* ----------------------------------------------------------
   7. Floating Animation (Decorative)
   ---------------------------------------------------------- */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-20px); }
}

.float {
  animation: float 4s ease-in-out infinite;
}

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

.float--fast {
  animation: float 2.5s ease-in-out infinite;
}

@keyframes floatRotate {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25%      { transform: translateY(-12px) rotate(3deg); }
  75%      { transform: translateY(8px) rotate(-3deg); }
}

.float-rotate {
  animation: floatRotate 5s ease-in-out infinite;
}

/* ----------------------------------------------------------
   8. Gradient Shift (Backgrounds)
   ---------------------------------------------------------- */
@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.gradient-shift {
  background-size: 200% 200%;
  animation: gradientShift 6s ease infinite;
}

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

.gradient-shift-slow {
  background-size: 300% 300%;
  animation: gradientShiftSlow 12s ease infinite;
}

/* ----------------------------------------------------------
   9. Text Reveal — Character by Character (Antigravity)
   ---------------------------------------------------------- */
@keyframes revealChar {
  0% {
    opacity: 0;
    transform: translateY(40px) rotateX(90deg);
    filter: blur(4px);
  }
  60% {
    opacity: 1;
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: translateY(0) rotateX(0deg);
    filter: blur(0);
  }
}

.reveal-text .char {
  display: inline-block;
  opacity: 0;
  animation: revealChar 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Dynamic delay applied via JS: .char:nth-child(n) { animation-delay: n*0.03s } */
.reveal-text .char:nth-child(1)  { animation-delay: 0.03s; }
.reveal-text .char:nth-child(2)  { animation-delay: 0.06s; }
.reveal-text .char:nth-child(3)  { animation-delay: 0.09s; }
.reveal-text .char:nth-child(4)  { animation-delay: 0.12s; }
.reveal-text .char:nth-child(5)  { animation-delay: 0.15s; }
.reveal-text .char:nth-child(6)  { animation-delay: 0.18s; }
.reveal-text .char:nth-child(7)  { animation-delay: 0.21s; }
.reveal-text .char:nth-child(8)  { animation-delay: 0.24s; }
.reveal-text .char:nth-child(9)  { animation-delay: 0.27s; }
.reveal-text .char:nth-child(10) { animation-delay: 0.30s; }
.reveal-text .char:nth-child(11) { animation-delay: 0.33s; }
.reveal-text .char:nth-child(12) { animation-delay: 0.36s; }
.reveal-text .char:nth-child(13) { animation-delay: 0.39s; }
.reveal-text .char:nth-child(14) { animation-delay: 0.42s; }
.reveal-text .char:nth-child(15) { animation-delay: 0.45s; }
.reveal-text .char:nth-child(16) { animation-delay: 0.48s; }
.reveal-text .char:nth-child(17) { animation-delay: 0.51s; }
.reveal-text .char:nth-child(18) { animation-delay: 0.54s; }
.reveal-text .char:nth-child(19) { animation-delay: 0.57s; }
.reveal-text .char:nth-child(20) { animation-delay: 0.60s; }

.reveal-text .char.space {
  width: 0.3em;
}

/* ----------------------------------------------------------
   10. Energy Vortex (Rotating Gradient Blur) — Antigravity
   ---------------------------------------------------------- */
@keyframes energyVortex {
  0% {
    transform: rotate(0deg) scale(1);
    filter: blur(40px);
    opacity: 0.6;
  }
  33% {
    transform: rotate(120deg) scale(1.15);
    filter: blur(50px);
    opacity: 0.8;
  }
  66% {
    transform: rotate(240deg) scale(0.9);
    filter: blur(35px);
    opacity: 0.5;
  }
  100% {
    transform: rotate(360deg) scale(1);
    filter: blur(40px);
    opacity: 0.6;
  }
}

.energy-vortex {
  position: absolute;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    #667eea,
    #764ba2,
    #f093fb,
    #E51937,
    #667eea
  );
  animation: energyVortex 8s linear infinite;
  pointer-events: none;
  z-index: 0;
}

.energy-vortex--sm {
  width: 250px;
  height: 250px;
  animation-duration: 6s;
}

.energy-vortex--lg {
  width: 800px;
  height: 800px;
  animation-duration: 12s;
}

@keyframes energyVortexPulse {
  0%, 100% {
    transform: rotate(0deg) scale(1);
    filter: blur(40px);
  }
  25% {
    transform: rotate(90deg) scale(1.2);
    filter: blur(50px);
  }
  50% {
    transform: rotate(180deg) scale(0.85);
    filter: blur(30px);
  }
  75% {
    transform: rotate(270deg) scale(1.1);
    filter: blur(45px);
  }
}

.energy-vortex--pulse {
  animation: energyVortexPulse 10s ease-in-out infinite;
}

/* ----------------------------------------------------------
   11. Dissolve Effect (Pixel Scatter) — Antigravity
   ---------------------------------------------------------- */
@keyframes dissolveParticle {
  0% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
    filter: blur(0);
  }
  50% {
    opacity: 0.6;
    filter: blur(1px);
  }
  100% {
    opacity: 0;
    transform: translate(
      calc((var(--dx, 1) * 120px)),
      calc((var(--dy, -1) * 80px))
    ) scale(0.2);
    filter: blur(4px);
  }
}

.dissolve {
  position: relative;
  overflow: visible;
}

.dissolve.dissolving .dissolve-particle {
  animation: dissolveParticle 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Preset direction variants set via custom properties on each particle */
.dissolve-particle {
  display: inline-block;
  will-change: transform, opacity;
}

/* For CSS-only demo: scatter a few known particles */
.dissolve.dissolving .dissolve-particle:nth-child(odd)  { --dx: 1.3;  --dy: -1.5; }
.dissolve.dissolving .dissolve-particle:nth-child(even) { --dx: -1.1; --dy: -0.8; }
.dissolve.dissolving .dissolve-particle:nth-child(3n)   { --dx: -0.5; --dy: -2;   }
.dissolve.dissolving .dissolve-particle:nth-child(4n)   { --dx: 1.8;  --dy: 0.4;  }
.dissolve.dissolving .dissolve-particle:nth-child(5n)   { --dx: -1.6; --dy: -1.2; }

/* Staggered timing */
.dissolve.dissolving .dissolve-particle:nth-child(1)  { animation-delay: 0s; }
.dissolve.dissolving .dissolve-particle:nth-child(2)  { animation-delay: 0.02s; }
.dissolve.dissolving .dissolve-particle:nth-child(3)  { animation-delay: 0.04s; }
.dissolve.dissolving .dissolve-particle:nth-child(4)  { animation-delay: 0.06s; }
.dissolve.dissolving .dissolve-particle:nth-child(5)  { animation-delay: 0.08s; }
.dissolve.dissolving .dissolve-particle:nth-child(6)  { animation-delay: 0.10s; }
.dissolve.dissolving .dissolve-particle:nth-child(7)  { animation-delay: 0.12s; }
.dissolve.dissolving .dissolve-particle:nth-child(8)  { animation-delay: 0.14s; }
.dissolve.dissolving .dissolve-particle:nth-child(9)  { animation-delay: 0.16s; }
.dissolve.dissolving .dissolve-particle:nth-child(10) { animation-delay: 0.18s; }

/* ----------------------------------------------------------
   12. Parallax Helper Classes
   ---------------------------------------------------------- */
.parallax-container {
  overflow: hidden;
  position: relative;
}

.parallax-layer {
  will-change: transform;
  transition: transform 0.1s linear;
}

.parallax-layer--slow   { /* JS sets translateY based on scroll * 0.3 */ }
.parallax-layer--medium { /* JS sets translateY based on scroll * 0.5 */ }
.parallax-layer--fast   { /* JS sets translateY based on scroll * 0.7 */ }

.parallax-bg {
  position: absolute;
  inset: -20%;
  background-size: cover;
  background-position: center;
  will-change: transform;
}

/* ----------------------------------------------------------
   13. Hover Card Tilt (3D Perspective)
   ---------------------------------------------------------- */
.tilt-card {
  perspective: 1000px;
  transform-style: preserve-3d;
}

.tilt-card__inner {
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  transform-style: preserve-3d;
}

/* JS applies rotateX/rotateY on mousemove. Static fallback: */
.tilt-card:hover .tilt-card__inner {
  transform: rotateX(2deg) rotateY(-2deg) scale(1.02);
  box-shadow: 8px 8px 30px rgba(0, 0, 0, 0.12);
}

.tilt-card__shine {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.25) 0%,
    transparent 50%
  );
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.tilt-card:hover .tilt-card__shine {
  opacity: 1;
}

/* ----------------------------------------------------------
   14. Spinner / Loading Animations
   ---------------------------------------------------------- */
@keyframes spinnerDot {
  0%, 80%, 100% { transform: scale(0); opacity: 0.5; }
  40%           { transform: scale(1); opacity: 1; }
}

.spinner-dots {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
}

.spinner-dots__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--primary);
  animation: spinnerDot 1.4s ease-in-out infinite both;
}

.spinner-dots__dot:nth-child(1) { animation-delay: -0.32s; }
.spinner-dots__dot:nth-child(2) { animation-delay: -0.16s; }
.spinner-dots__dot:nth-child(3) { animation-delay: 0s; }

@keyframes spinnerBar {
  0%   { transform: scaleY(0.4); }
  20%  { transform: scaleY(1); }
  40%  { transform: scaleY(0.4); }
  100% { transform: scaleY(0.4); }
}

.spinner-bars {
  display: flex;
  gap: 4px;
  align-items: center;
  justify-content: center;
  height: 32px;
}

.spinner-bars__bar {
  width: 4px;
  height: 100%;
  background: var(--primary);
  border-radius: 2px;
  animation: spinnerBar 1.2s ease-in-out infinite;
}

.spinner-bars__bar:nth-child(1) { animation-delay: -1.1s; }
.spinner-bars__bar:nth-child(2) { animation-delay: -1.0s; }
.spinner-bars__bar:nth-child(3) { animation-delay: -0.9s; }
.spinner-bars__bar:nth-child(4) { animation-delay: -0.8s; }

/* ----------------------------------------------------------
   15. Counter Count-Up Trigger
   ---------------------------------------------------------- */
.count-up {
  /* JS reads data-target and animates innerText.
     This class just applies a clip for the transition. */
  display: inline-block;
  transition: transform 0.3s ease;
}

.count-up.counting {
  transform: scale(1.05);
}

@keyframes countPop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.15); }
  100% { transform: scale(1); }
}

.count-up.counted {
  animation: countPop 0.4s ease;
}

/* ----------------------------------------------------------
   16. Ripple Effect (Buttons)
   ---------------------------------------------------------- */
@keyframes ripple-effect {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

.ripple-container {
  position: relative;
  overflow: hidden;
}

/* ----------------------------------------------------------
   17. Typing Cursor
   ---------------------------------------------------------- */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0; }
}

.typing-cursor::after {
  content: '|';
  display: inline-block;
  color: var(--primary);
  font-weight: 300;
  animation: blink 0.8s step-end infinite;
  margin-left: 2px;
}

@keyframes typewriter {
  from { width: 0; }
  to   { width: 100%; }
}

.typewriter {
  overflow: hidden;
  white-space: nowrap;
  border-right: 3px solid var(--primary);
  animation:
    typewriter 3s steps(40) forwards,
    blink 0.8s step-end infinite;
  width: 0;
}

/* ----------------------------------------------------------
   18. Shimmer / Skeleton Loading
   ---------------------------------------------------------- */
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.skeleton {
  background: linear-gradient(
    90deg,
    var(--bg-section) 25%,
    var(--bg-light) 50%,
    var(--bg-section) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  border-radius: var(--radius-sm);
}

.skeleton--text {
  height: 16px;
  margin-bottom: 8px;
  width: 80%;
}

.skeleton--title {
  height: 24px;
  margin-bottom: 12px;
  width: 60%;
}

.skeleton--image {
  aspect-ratio: 16 / 10;
  width: 100%;
}

.skeleton--circle {
  width: 48px;
  height: 48px;
  border-radius: 50%;
}

/* ----------------------------------------------------------
   19. Marquee / Infinite Scroll
   ---------------------------------------------------------- */
@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 30s linear infinite;
}

.marquee-track:hover {
  animation-play-state: paused;
}

/* ----------------------------------------------------------
   20. Wobble & Shake (Attention)
   ---------------------------------------------------------- */
@keyframes wobble {
  0%   { transform: translateX(0); }
  15%  { transform: translateX(-10px) rotate(-3deg); }
  30%  { transform: translateX(8px) rotate(2deg); }
  45%  { transform: translateX(-6px) rotate(-1.5deg); }
  60%  { transform: translateX(4px) rotate(1deg); }
  75%  { transform: translateX(-2px) rotate(-0.5deg); }
  100% { transform: translateX(0); }
}

.wobble {
  animation: wobble 0.8s ease-in-out;
}

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

.shake {
  animation: shake 0.5s ease;
}

/* ----------------------------------------------------------
   21. Zoom on Hover (Images)
   ---------------------------------------------------------- */
.zoom-on-hover {
  overflow: hidden;
}

.zoom-on-hover img {
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.zoom-on-hover:hover img {
  transform: scale(1.08);
}

/* ----------------------------------------------------------
   22. Flip Card
   ---------------------------------------------------------- */
.flip-card {
  perspective: 1000px;
  cursor: pointer;
}

.flip-card__inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  transform-style: preserve-3d;
}

.flip-card:hover .flip-card__inner {
  transform: rotateY(180deg);
}

.flip-card__front,
.flip-card__back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border-radius: var(--radius-md);
}

.flip-card__back {
  transform: rotateY(180deg);
}

/* ----------------------------------------------------------
   23. Delay Utility Classes
   ---------------------------------------------------------- */
.delay-100 { animation-delay: 0.1s !important; }
.delay-200 { animation-delay: 0.2s !important; }
.delay-300 { animation-delay: 0.3s !important; }
.delay-400 { animation-delay: 0.4s !important; }
.delay-500 { animation-delay: 0.5s !important; }
.delay-600 { animation-delay: 0.6s !important; }
.delay-700 { animation-delay: 0.7s !important; }
.delay-800 { animation-delay: 0.8s !important; }
.delay-1000 { animation-delay: 1s !important; }

/* Duration utility */
.duration-300 { animation-duration: 0.3s !important; }
.duration-500 { animation-duration: 0.5s !important; }
.duration-700 { animation-duration: 0.7s !important; }
.duration-1000 { animation-duration: 1s !important; }

/* ----------------------------------------------------------
   24. Reduced Motion — Accessibility
   ---------------------------------------------------------- */
@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;
  }

  .animate-on-scroll {
    opacity: 1 !important;
    transform: none !important;
  }

  .stagger-children > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .float,
  .float--slow,
  .float--fast,
  .float-rotate,
  .energy-vortex,
  .gradient-shift,
  .gradient-shift-slow,
  .pulse-glow,
  .pulse-glow-cosmic,
  .marquee-track {
    animation: none !important;
  }

  .parallax-layer,
  .parallax-bg {
    transform: none !important;
  }

  .typewriter {
    width: auto !important;
    border-right: none;
    animation: none !important;
  }

  .typing-cursor::after {
    animation: none !important;
    content: '';
  }

  .hero__bg {
    transform: none !important;
    transition: none !important;
  }

  .tilt-card:hover .tilt-card__inner {
    transform: none;
  }
}

/* ============================================================
   END animations.css
   ============================================================ */