/**
 * 서가건설 - Animations Stylesheet
 * 애니메이션 및 효과
 * Antigravity Effects: White Dwarf, Interstellar, Comet Trail
 */

/* ===================================
   Base Animation Variables
   =================================== */
:root {
    --anim-fast: 0.2s;
    --anim-normal: 0.4s;
    --anim-slow: 0.8s;
    --anim-very-slow: 1.5s;
    --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
    --ease-in-out-cubic: cubic-bezier(0.65, 0, 0.35, 1);
    --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* ===================================
   Scroll Animations (Intersection Observer)
   =================================== */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.animate-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}

.animate-on-scroll[data-delay="100"] { transition-delay: 0.1s; }
.animate-on-scroll[data-delay="200"] { transition-delay: 0.2s; }
.animate-on-scroll[data-delay="300"] { transition-delay: 0.3s; }
.animate-on-scroll[data-delay="400"] { transition-delay: 0.4s; }
.animate-on-scroll[data-delay="500"] { transition-delay: 0.5s; }

/* Staggered children animation */
.stagger-children > * {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.stagger-children.visible > *:nth-child(1) { transition-delay: 0.1s; }
.stagger-children.visible > *:nth-child(2) { transition-delay: 0.2s; }
.stagger-children.visible > *:nth-child(3) { transition-delay: 0.3s; }
.stagger-children.visible > *:nth-child(4) { transition-delay: 0.4s; }
.stagger-children.visible > *:nth-child(5) { transition-delay: 0.5s; }
.stagger-children.visible > *:nth-child(6) { transition-delay: 0.6s; }

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

/* ===================================
   Entrance Animations
   =================================== */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

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

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

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

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

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

@keyframes rotateIn {
    from {
        opacity: 0;
        transform: rotate(-10deg) scale(0.9);
    }
    to {
        opacity: 1;
        transform: rotate(0) scale(1);
    }
}

/* Animation Classes */
.anim-fade-in { animation: fadeIn var(--anim-slow) var(--ease-out-expo) forwards; }
.anim-fade-in-up { animation: fadeInUp var(--anim-slow) var(--ease-out-expo) forwards; }
.anim-fade-in-down { animation: fadeInDown var(--anim-slow) var(--ease-out-expo) forwards; }
.anim-fade-in-left { animation: fadeInLeft var(--anim-slow) var(--ease-out-expo) forwards; }
.anim-fade-in-right { animation: fadeInRight var(--anim-slow) var(--ease-out-expo) forwards; }
.anim-scale-in { animation: scaleIn var(--anim-slow) var(--ease-out-expo) forwards; }
.anim-rotate-in { animation: rotateIn var(--anim-slow) var(--ease-out-expo) forwards; }

/* Delay Classes */
.anim-delay-1 { animation-delay: 0.1s; }
.anim-delay-2 { animation-delay: 0.2s; }
.anim-delay-3 { animation-delay: 0.3s; }
.anim-delay-4 { animation-delay: 0.4s; }
.anim-delay-5 { animation-delay: 0.5s; }
.anim-delay-6 { animation-delay: 0.6s; }
.anim-delay-7 { animation-delay: 0.7s; }
.anim-delay-8 { animation-delay: 0.8s; }

/* ===================================
   Hover Animations
   =================================== */
.hover-lift {
    transition: transform var(--anim-normal) var(--ease-out-expo),
                box-shadow var(--anim-normal) var(--ease-out-expo);
}

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

.hover-scale {
    transition: transform var(--anim-fast) ease;
}

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

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

.hover-glow:hover {
    box-shadow: 0 0 30px rgba(102, 126, 234, 0.5);
}

.hover-shine {
    position: relative;
    overflow: hidden;
}

.hover-shine::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.3),
        transparent
    );
    transition: left 0.5s ease;
}

.hover-shine:hover::before {
    left: 100%;
}

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

@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(1.05); }
}

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

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

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

.anim-float { animation: float 3s ease-in-out infinite; }
.anim-pulse { animation: pulse 2s ease-in-out infinite; }
.anim-bounce { animation: bounce 2s ease-in-out infinite; }
.anim-spin { animation: spin 1s linear infinite; }
.anim-ping { animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; }

/* ===================================
   Text Animations
   =================================== */
@keyframes typewriter {
    from { width: 0; }
    to { width: 100%; }
}

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

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

@keyframes textGlow {
    0%, 100% {
        text-shadow: 0 0 10px rgba(102, 126, 234, 0.5),
                     0 0 20px rgba(102, 126, 234, 0.3);
    }
    50% {
        text-shadow: 0 0 20px rgba(102, 126, 234, 0.8),
                     0 0 40px rgba(102, 126, 234, 0.5);
    }
}

.text-glow {
    animation: textGlow 2s ease-in-out infinite;
}

/* Letter by letter reveal */
.letter-reveal {
    display: inline-block;
}

.letter-reveal span {
    display: inline-block;
    opacity: 0;
    transform: translateY(20px);
    animation: letterReveal 0.5s forwards;
}

@keyframes letterReveal {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===================================
   Background Animations
   =================================== */
@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.bg-gradient-animated {
    background: linear-gradient(
        -45deg,
        var(--primary),
        var(--secondary),
        var(--accent),
        var(--primary)
    );
    background-size: 400% 400%;
    animation: gradientShift 15s ease infinite;
}

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

/* ===================================
   Loading Animations
   =================================== */
@keyframes dotPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.5); opacity: 0.5; }
}

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

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

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

/* Progress Bar */
@keyframes progressBar {
    from { width: 0; }
    to { width: 100%; }
}

.progress-bar-animated {
    animation: progressBar 2s ease-out forwards;
}

/* Skeleton Loading */
@keyframes skeleton {
    0% { background-position: -200px 0; }
    100% { background-position: calc(200px + 100%) 0; }
}

.skeleton {
    background: linear-gradient(
        90deg,
        #f0f0f0 25%,
        #e0e0e0 50%,
        #f0f0f0 75%
    );
    background-size: 200px 100%;
    animation: skeleton 1.5s infinite;
}

/* ===================================
   ANTIGRAVITY EFFECTS - White Dwarf
   백색왜성 효과 (Compact Star Glow)
   =================================== */
.antigravity-white-dwarf {
    position: relative;
    overflow: visible;
}

.white-dwarf-core {
    position: absolute;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: radial-gradient(
        circle at 30% 30%,
        #ffffff 0%,
        #e8e8ff 20%,
        #c4c4ff 40%,
        #8888ee 60%,
        transparent 70%
    );
    filter: blur(2px);
    animation: whiteDwarfPulse 4s ease-in-out infinite;
    pointer-events: none;
}

@keyframes whiteDwarfPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.9;
        box-shadow: 0 0 30px rgba(200, 200, 255, 0.6),
                    0 0 60px rgba(150, 150, 255, 0.4),
                    0 0 90px rgba(100, 100, 255, 0.2);
    }
    50% {
        transform: scale(1.1);
        opacity: 1;
        box-shadow: 0 0 50px rgba(200, 200, 255, 0.8),
                    0 0 100px rgba(150, 150, 255, 0.5),
                    0 0 150px rgba(100, 100, 255, 0.3);
    }
}

.white-dwarf-rays {
    position: absolute;
    width: 200px;
    height: 200px;
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        rgba(200, 200, 255, 0.3) 10deg,
        transparent 20deg,
        transparent 90deg,
        rgba(200, 200, 255, 0.3) 100deg,
        transparent 110deg,
        transparent 180deg,
        rgba(200, 200, 255, 0.3) 190deg,
        transparent 200deg,
        transparent 270deg,
        rgba(200, 200, 255, 0.3) 280deg,
        transparent 290deg
    );
    animation: whiteDwarfRotate 20s linear infinite;
    pointer-events: none;
}

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

/* Hero에 백색왜성 효과 적용 */
.hero-cosmic .white-dwarf-effect {
    position: absolute;
    top: 20%;
    right: 10%;
    z-index: 2;
    opacity: 0.6;
}

/* ===================================
   ANTIGRAVITY EFFECTS - Interstellar
   성간 효과 (Space Between Stars)
   =================================== */
.antigravity-interstellar {
    position: relative;
    background: radial-gradient(
        ellipse at 50% 50%,
        transparent 0%,
        rgba(10, 10, 40, 0.3) 50%,
        rgba(5, 5, 20, 0.6) 100%
    );
}

.interstellar-dust {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(1px 1px at 20px 30px, rgba(255, 255, 255, 0.5), transparent),
        radial-gradient(1px 1px at 40px 70px, rgba(255, 255, 255, 0.4), transparent),
        radial-gradient(1px 1px at 50px 160px, rgba(255, 255, 255, 0.5), transparent),
        radial-gradient(1px 1px at 90px 40px, rgba(255, 255, 255, 0.4), transparent),
        radial-gradient(1px 1px at 130px 80px, rgba(255, 255, 255, 0.3), transparent),
        radial-gradient(1.5px 1.5px at 160px 120px, rgba(200, 220, 255, 0.6), transparent),
        radial-gradient(1px 1px at 200px 50px, rgba(255, 255, 255, 0.4), transparent),
        radial-gradient(1px 1px at 220px 150px, rgba(255, 255, 255, 0.3), transparent);
    background-size: 250px 200px;
    animation: interstellarDrift 60s linear infinite;
    pointer-events: none;
}

@keyframes interstellarDrift {
    from {
        transform: translateX(0) translateY(0);
    }
    to {
        transform: translateX(-250px) translateY(-200px);
    }
}

.interstellar-nebula {
    position: absolute;
    width: 300px;
    height: 200px;
    background: radial-gradient(
        ellipse at center,
        rgba(102, 126, 234, 0.2) 0%,
        rgba(118, 75, 162, 0.1) 40%,
        transparent 70%
    );
    filter: blur(30px);
    animation: nebulaFloat 30s ease-in-out infinite;
    pointer-events: none;
}

@keyframes nebulaFloat {
    0%, 100% {
        transform: translate(0, 0) scale(1);
        opacity: 0.5;
    }
    33% {
        transform: translate(50px, -30px) scale(1.1);
        opacity: 0.7;
    }
    66% {
        transform: translate(-30px, 20px) scale(0.9);
        opacity: 0.4;
    }
}

/* ===================================
   ANTIGRAVITY EFFECTS - Comet Trail
   혜성 꼬리 효과
   =================================== */
.antigravity-comet {
    position: absolute;
    pointer-events: none;
}

.comet-particle {
    position: absolute;
    width: 6px;
    height: 6px;
    background: radial-gradient(
        circle at 30% 30%,
        #ffffff 0%,
        #aaccff 50%,
        transparent 70%
    );
    border-radius: 50%;
    animation: cometFly 8s ease-out infinite;
    opacity: 0;
}

@keyframes cometFly {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 0;
    }
    5% {
        opacity: 1;
    }
    100% {
        transform: translate(-400px, 300px) scale(0.2);
        opacity: 0;
    }
}

.comet-trail {
    position: absolute;
    width: 200px;
    height: 4px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(170, 204, 255, 0.1) 20%,
        rgba(170, 204, 255, 0.4) 60%,
        rgba(255, 255, 255, 0.8) 95%,
        #ffffff 100%
    );
    border-radius: 2px;
    transform-origin: right center;
    animation: cometTrailFly 8s ease-out infinite;
    filter: blur(1px);
    opacity: 0;
}

@keyframes cometTrailFly {
    0% {
        transform: translate(100vw, -100px) rotate(35deg) scaleX(0.5);
        opacity: 0;
    }
    5% {
        opacity: 0.8;
    }
    100% {
        transform: translate(-100vw, calc(100vh + 100px)) rotate(35deg) scaleX(1.5);
        opacity: 0;
    }
}

/* Multiple comets with different timings */
.comet-1 { animation-delay: 0s; }
.comet-2 { animation-delay: 3s; top: 20%; }
.comet-3 { animation-delay: 6s; top: 40%; }

/* ===================================
   Cosmic Background Combined
   =================================== */
.cosmic-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
}

.cosmic-stars {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(1px 1px at 10% 20%, rgba(255, 255, 255, 0.8), transparent),
        radial-gradient(1px 1px at 30% 60%, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(1.5px 1.5px at 50% 30%, rgba(255, 255, 255, 0.9), transparent),
        radial-gradient(1px 1px at 70% 80%, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(1px 1px at 90% 10%, rgba(255, 255, 255, 0.5), transparent),
        radial-gradient(2px 2px at 15% 85%, rgba(200, 220, 255, 0.8), transparent),
        radial-gradient(1px 1px at 45% 55%, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(1.5px 1.5px at 80% 45%, rgba(255, 255, 255, 0.7), transparent);
    animation: starsTwinkle 4s ease-in-out infinite alternate;
}

@keyframes starsTwinkle {
    0% { opacity: 0.8; }
    100% { opacity: 1; }
}

.cosmic-gradient-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    animation: cosmicOrbFloat 20s ease-in-out infinite;
    pointer-events: none;
}

.cosmic-orb-1 {
    width: 400px;
    height: 400px;
    background: radial-gradient(
        circle,
        rgba(102, 126, 234, 0.4) 0%,
        transparent 70%
    );
    top: -100px;
    left: -100px;
}

.cosmic-orb-2 {
    width: 500px;
    height: 500px;
    background: radial-gradient(
        circle,
        rgba(118, 75, 162, 0.3) 0%,
        transparent 70%
    );
    bottom: -150px;
    right: -150px;
    animation-delay: 10s;
}

.cosmic-orb-3 {
    width: 300px;
    height: 300px;
    background: radial-gradient(
        circle,
        rgba(240, 147, 251, 0.2) 0%,
        transparent 70%
    );
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation-delay: 5s;
}

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

/* ===================================
   Button Press Effect
   =================================== */
.btn-press {
    transition: transform 0.1s ease;
}

.btn-press:active {
    transform: scale(0.95);
}

/* ===================================
   Ripple Effect
   =================================== */
.ripple {
    position: relative;
    overflow: hidden;
}

.ripple-effect {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    transform: scale(0);
    animation: rippleAnim 0.6s linear;
    pointer-events: none;
}

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

/* ===================================
   Counter Animation
   =================================== */
.counter {
    display: inline-block;
    font-variant-numeric: tabular-nums;
}

/* ===================================
   Parallax Effect
   =================================== */
.parallax {
    transform: translateZ(0);
    will-change: transform;
}

/* ===================================
   Image Reveal
   =================================== */
.img-reveal {
    position: relative;
    overflow: hidden;
}

.img-reveal img {
    transform: scale(1.2);
    transition: transform 0.8s var(--ease-out-expo);
}

.img-reveal.visible img {
    transform: scale(1);
}

.img-reveal::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--primary);
    transform: scaleX(1);
    transform-origin: right;
    transition: transform 0.8s var(--ease-in-out-cubic);
}

.img-reveal.visible::after {
    transform: scaleX(0);
}

/* ===================================
   Magnetic Hover Effect
   =================================== */
.magnetic {
    display: inline-block;
    transition: transform 0.3s ease;
}

/* ===================================
   Cursor Effects (Desktop Only)
   =================================== */
@media (pointer: fine) {
    .cursor-glow {
        position: fixed;
        width: 300px;
        height: 300px;
        pointer-events: none;
        background: radial-gradient(
            circle,
            rgba(102, 126, 234, 0.15) 0%,
            transparent 70%
        );
        transform: translate(-50%, -50%);
        z-index: 9999;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    body:hover .cursor-glow {
        opacity: 1;
    }
}

/* ===================================
   Page Load Animation
   =================================== */
.page-loader {
    position: fixed;
    inset: 0;
    background: linear-gradient(135deg, var(--bg-dark) 0%, var(--bg-darker) 100%);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.page-loader.loaded {
    opacity: 0;
    visibility: hidden;
}

.loader-logo {
    animation: loaderPulse 1.5s ease-in-out infinite;
}

@keyframes loaderPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.1); opacity: 0.7; }
}

/* ===================================
   Reduced Motion
   =================================== */
@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;
        transform: none;
    }

    .cosmic-bg,
    .interstellar-dust,
    .comet-trail,
    .comet-particle {
        display: none;
    }
}