/**
 * animations.css - 영어회화 단어장 애니메이션 스타일
 * 위치: /assets/css/animations.css
 * ANTIGRAVITY 효과 포함:
 * - 유리 흐름 (Glass Flow)
 * - 흔들기 (Shake)
 * - 입자 하트 (Particle Heart)
 * - 분자 춤 (Molecule Dance)
 * - 입자 척력 (Particle Repel)
 * - 입자 큐브 (Particle Cube)
 * - 거품 상승 (Bubble Rise)
 * - 입자 바운스 (Particle Bounce)
 * - 입자 크기 (Particle Size)
 */

/* ========== 기본 애니메이션 ========== */

/* Fade In */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Fade In Up */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Fade In Down */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Fade In Left */
@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Fade In Right */
@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

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

/* Bounce */
@keyframes bounce {
    0%, 20%, 53%, 100% {
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        transform: translateY(0);
    }
    40%, 43% {
        animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        transform: translateY(-15px);
    }
    70% {
        animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        transform: translateY(-7px);
    }
    80% {
        transform: translateY(0);
    }
    90% {
        transform: translateY(-4px);
    }
}

/* Pulse */
@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

/* Pulse Glow */
@keyframes pulseGlow {
    0%, 100% {
        box-shadow: 0 0 20px var(--glow-primary);
    }
    50% {
        box-shadow: 0 0 40px var(--glow-primary), 0 0 60px var(--glow-secondary);
    }
}

/* Float */
@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

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

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

/* ========== ANTIGRAVITY 효과 ========== */

/* 1. 유리 흐름 (Glass Flow) - fluid, hard */
@keyframes glassFlow {
    0% {
        background-position: 0% 50%;
        filter: brightness(1);
    }
    25% {
        filter: brightness(1.05);
    }
    50% {
        background-position: 100% 50%;
        filter: brightness(1.1);
    }
    75% {
        filter: brightness(1.05);
    }
    100% {
        background-position: 0% 50%;
        filter: brightness(1);
    }
}

.glass-flow {
    background: linear-gradient(
        90deg,
        rgba(102, 126, 234, 0.25),
        rgba(240, 147, 251, 0.25),
        rgba(118, 75, 162, 0.25),
        rgba(102, 126, 234, 0.25)
    );
    background-size: 300% 100%;
    animation: glassFlow 8s ease-in-out infinite;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* 2. 흔들기 (Shake) - transition, easy */
@keyframes shake {
    0%, 100% {
        transform: translateX(0);
    }
    10%, 30%, 50%, 70%, 90% {
        transform: translateX(-5px);
    }
    20%, 40%, 60%, 80% {
        transform: translateX(5px);
    }
}

.shake {
    animation: shake 0.6s ease-in-out;
}

.shake-hover:hover {
    animation: shake 0.6s ease-in-out;
}

/* 3. 입자 하트 (Particle Heart) - particle, easy */
@keyframes particleHeart {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.3);
        opacity: 0.8;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.particle-heart {
    position: relative;
}

.particle-heart::before {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    background: var(--accent);
    border-radius: 50%;
    animation: particleHeart 1.5s ease-in-out infinite;
    box-shadow:
        0 0 10px var(--accent-glow),
        20px -10px 0 var(--primary),
        -20px -10px 0 var(--secondary);
}

/* 4. 분자 춤 (Molecule Dance) - particle, medium */
@keyframes moleculeDance {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
    }
    25% {
        transform: translate(10px, -10px) rotate(90deg);
    }
    50% {
        transform: translate(0, -20px) rotate(180deg);
    }
    75% {
        transform: translate(-10px, -10px) rotate(270deg);
    }
}

.molecule-dance {
    animation: moleculeDance 4s ease-in-out infinite;
}

.molecule-container {
    position: relative;
}

.molecule {
    position: absolute;
    width: 8px;
    height: 8px;
    background: var(--primary);
    border-radius: 50%;
    animation: moleculeDance 3s ease-in-out infinite;
}

.molecule:nth-child(2) {
    animation-delay: -0.5s;
    background: var(--secondary);
}

.molecule:nth-child(3) {
    animation-delay: -1s;
    background: var(--accent);
}

.molecule:nth-child(4) {
    animation-delay: -1.5s;
    background: var(--primary-light);
}

/* 5. 입자 척력 (Particle Repel) - particle, medium */
@keyframes particleRepel {
    0% {
        transform: translate(0, 0) scale(1);
    }
    50% {
        transform: translate(var(--repel-x, 20px), var(--repel-y, -20px)) scale(0.8);
    }
    100% {
        transform: translate(0, 0) scale(1);
    }
}

.particle-repel {
    position: relative;
    overflow: visible;
}

.particle-repel .particle {
    position: absolute;
    width: 6px;
    height: 6px;
    background: var(--primary);
    border-radius: 50%;
    opacity: 0.6;
    pointer-events: none;
}

.particle-repel:hover .particle {
    animation: particleRepel 0.5s ease-out forwards;
}

/* 6. 입자 큐브 (Particle Cube) - particle, medium */
@keyframes particleCube {
    0% {
        transform: rotateX(0deg) rotateY(0deg);
    }
    100% {
        transform: rotateX(360deg) rotateY(360deg);
    }
}

.particle-cube {
    width: 60px;
    height: 60px;
    position: relative;
    transform-style: preserve-3d;
    animation: particleCube 8s linear infinite;
}

.particle-cube .face {
    position: absolute;
    width: 60px;
    height: 60px;
    background: rgba(102, 126, 234, 0.2);
    border: 1px solid var(--primary);
    backdrop-filter: blur(5px);
}

.particle-cube .face:nth-child(1) { transform: translateZ(30px); }
.particle-cube .face:nth-child(2) { transform: rotateY(180deg) translateZ(30px); }
.particle-cube .face:nth-child(3) { transform: rotateY(-90deg) translateZ(30px); }
.particle-cube .face:nth-child(4) { transform: rotateY(90deg) translateZ(30px); }
.particle-cube .face:nth-child(5) { transform: rotateX(90deg) translateZ(30px); }
.particle-cube .face:nth-child(6) { transform: rotateX(-90deg) translateZ(30px); }

/* 7. 거품 상승 (Bubble Rise) - particle, easy */
@keyframes bubbleRise {
    0% {
        transform: translateY(100%) scale(0);
        opacity: 0;
    }
    10% {
        opacity: 0.8;
    }
    50% {
        transform: translateY(50%) scale(1);
        opacity: 0.6;
    }
    100% {
        transform: translateY(-100%) scale(0.5);
        opacity: 0;
    }
}

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

.bubble {
    position: absolute;
    bottom: 0;
    width: var(--bubble-size, 20px);
    height: var(--bubble-size, 20px);
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.5), transparent);
    border: 1px solid rgba(102, 126, 234, 0.3);
    border-radius: 50%;
    animation: bubbleRise var(--bubble-duration, 4s) ease-in-out infinite;
    animation-delay: var(--bubble-delay, 0s);
}

/* 8. 입자 바운스 (Particle Bounce) - particle, medium */
@keyframes particleBounce {
    0%, 100% {
        transform: translateY(0) scaleY(1);
    }
    30% {
        transform: translateY(-50px) scaleY(1.1);
    }
    50% {
        transform: translateY(-30px) scaleY(0.95);
    }
    70% {
        transform: translateY(-40px) scaleY(1.05);
    }
    85% {
        transform: translateY(0) scaleY(0.9);
    }
    90% {
        transform: translateY(-10px) scaleY(1);
    }
}

.particle-bounce {
    animation: particleBounce 2s ease-in-out infinite;
}

.bounce-particle {
    width: 12px;
    height: 12px;
    background: var(--gradient-cosmic);
    border-radius: 50%;
    animation: particleBounce 1.5s ease-in-out infinite;
}

.bounce-particle:nth-child(2) { animation-delay: -0.3s; }
.bounce-particle:nth-child(3) { animation-delay: -0.6s; }
.bounce-particle:nth-child(4) { animation-delay: -0.9s; }
.bounce-particle:nth-child(5) { animation-delay: -1.2s; }

/* 9. 입자 크기 (Particle Size) - particle, easy */
@keyframes particleSize {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(var(--max-scale, 1.5));
        opacity: 0.7;
    }
}

.particle-size {
    animation: particleSize 2s ease-in-out infinite;
}

.size-particle {
    width: 10px;
    height: 10px;
    background: var(--primary);
    border-radius: 50%;
    animation: particleSize 2s ease-in-out infinite;
}

.size-particle:nth-child(1) { --max-scale: 1.8; animation-delay: 0s; }
.size-particle:nth-child(2) { --max-scale: 1.4; animation-delay: -0.4s; }
.size-particle:nth-child(3) { --max-scale: 2; animation-delay: -0.8s; }
.size-particle:nth-child(4) { --max-scale: 1.6; animation-delay: -1.2s; }

/* ========== 유틸리티 애니메이션 클래스 ========== */

.animate-fadeIn {
    animation: fadeIn 0.6s ease-out forwards;
}

.animate-fadeInUp {
    animation: fadeInUp 0.6s ease-out forwards;
}

.animate-fadeInDown {
    animation: fadeInDown 0.6s ease-out forwards;
}

.animate-fadeInLeft {
    animation: fadeInLeft 0.6s ease-out forwards;
}

.animate-fadeInRight {
    animation: fadeInRight 0.6s ease-out forwards;
}

.animate-scaleIn {
    animation: scaleIn 0.5s ease-out forwards;
}

.animate-bounce {
    animation: bounce 1s ease-in-out infinite;
}

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

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

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

.animate-spin {
    animation: spin 1s linear infinite;
}

.animate-shimmer {
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.2),
        transparent
    );
    background-size: 200% 100%;
    animation: shimmer 2s linear infinite;
}

/* ========== 지연 클래스 ========== */
.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-400 { animation-delay: 0.4s; }
.delay-500 { animation-delay: 0.5s; }
.delay-600 { animation-delay: 0.6s; }
.delay-700 { animation-delay: 0.7s; }
.delay-800 { animation-delay: 0.8s; }
.delay-900 { animation-delay: 0.9s; }
.delay-1000 { animation-delay: 1s; }

/* ========== 스크롤 기반 애니메이션 ========== */
[data-animate] {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

[data-animate].animated {
    opacity: 1;
    transform: translateY(0);
}

[data-animate="fade"] {
    transform: none;
}

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

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

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

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

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

[data-animate="rotate"] {
    transform: rotate(-10deg);
}

/* ========== 호버 애니메이션 ========== */
.hover-lift {
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.hover-lift:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(102, 126, 234, 0.3);
}

.hover-glow {
    transition: box-shadow var(--transition-normal);
}

.hover-glow:hover {
    box-shadow: 0 0 30px var(--glow-primary);
}

.hover-scale {
    transition: transform var(--transition-normal);
}

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

.hover-rotate {
    transition: transform var(--transition-normal);
}

.hover-rotate:hover {
    transform: rotate(5deg);
}

/* ========== 게임 관련 애니메이션 ========== */
@keyframes correctAnswer {
    0% {
        transform: scale(1);
        background-color: transparent;
    }
    50% {
        transform: scale(1.05);
        background-color: rgba(16, 185, 129, 0.3);
    }
    100% {
        transform: scale(1);
        background-color: rgba(16, 185, 129, 0.2);
    }
}

@keyframes wrongAnswer {
    0%, 100% {
        transform: translateX(0);
        background-color: transparent;
    }
    10%, 30%, 50%, 70%, 90% {
        transform: translateX(-5px);
    }
    20%, 40%, 60%, 80% {
        transform: translateX(5px);
    }
    100% {
        background-color: rgba(239, 68, 68, 0.2);
    }
}

@keyframes timerWarning {
    0%, 100% {
        color: var(--warning);
    }
    50% {
        color: var(--error);
    }
}

@keyframes scorePopup {
    0% {
        opacity: 0;
        transform: translateY(20px) scale(0.8);
    }
    50% {
        opacity: 1;
        transform: translateY(-10px) scale(1.1);
    }
    100% {
        opacity: 0;
        transform: translateY(-30px) scale(1);
    }
}

.animate-correct {
    animation: correctAnswer 0.5s ease-out;
}

.animate-wrong {
    animation: wrongAnswer 0.5s ease-out;
}

.animate-timerWarning {
    animation: timerWarning 0.5s ease-in-out infinite;
}

.animate-scorePopup {
    animation: scorePopup 1s ease-out forwards;
}

/* ========== 타이핑 효과 ========== */
@keyframes typing {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}

@keyframes blinkCursor {
    0%, 100% {
        border-right-color: var(--primary);
    }
    50% {
        border-right-color: transparent;
    }
}

.typing-effect {
    overflow: hidden;
    border-right: 3px solid var(--primary);
    white-space: nowrap;
    animation:
        typing 3s steps(40, end),
        blinkCursor 0.75s step-end infinite;
}

/* ========== 카운터 애니메이션 ========== */
@keyframes countUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.counter-animate {
    animation: countUp 0.5s ease-out forwards;
}

/* ========== 성공/축하 애니메이션 ========== */
@keyframes confetti {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translateY(100vh) rotate(720deg);
        opacity: 0;
    }
}

.confetti-piece {
    position: fixed;
    width: 10px;
    height: 10px;
    animation: confetti 3s ease-out forwards;
}

/* ========== 로딩 애니메이션 ========== */
@keyframes loadingDots {
    0%, 80%, 100% {
        transform: scale(0);
    }
    40% {
        transform: scale(1);
    }
}

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

.loading-dots span {
    width: 12px;
    height: 12px;
    background: var(--primary);
    border-radius: 50%;
    animation: loadingDots 1.4s ease-in-out infinite;
}

.loading-dots span:nth-child(1) { animation-delay: -0.32s; }
.loading-dots span:nth-child(2) { animation-delay: -0.16s; }
.loading-dots span:nth-child(3) { animation-delay: 0s; }

/* ========== 접근성 - 동작 감소 선호 ========== */
@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-animate] {
        opacity: 1;
        transform: none;
    }
}