/* =================================================================
   REUSABLE ANIMATIONS LIBRARY
   비즈니스 섹션에서 사용된 애니메이션들을 재사용 가능하게 정리
   ================================================================= */

/* =================================================================
   1. 기본 플로팅 애니메이션
   ================================================================= */

/* 플로팅 큐브 애니메이션 */
.floating-element {
    position: absolute;
    width: 40px;
    /* 커스텀 가능: 크기 조정 */
    height: 40px;
    /* 커스텀 가능: 크기 조정 */
    border: 2px solid rgba(64, 224, 208, 0.3);
    /* 커스텀 가능: 색상 변경 */
    background: rgba(64, 224, 208, 0.05);
    /* 커스텀 가능: 배경색 변경 */
    transform-style: preserve-3d;
    animation: floatRotate 8s infinite ease-in-out;
    /* 커스텀 가능: 속도 조정 */
}

.floating-element:before {
    content: '';
    position: absolute;
    top: -10px;
    /* 커스텀 가능: 그림자 위치 */
    left: -10px;
    /* 커스텀 가능: 그림자 위치 */
    width: 40px;
    /* 부모와 동일하게 설정 */
    height: 40px;
    /* 부모와 동일하게 설정 */
    border: 2px solid rgba(64, 224, 208, 0.2);
    /* 커스텀 가능: 그림자 색상 */
    background: rgba(64, 224, 208, 0.03);
    /* 커스텀 가능: 그림자 배경 */
    transform: rotateX(45deg) rotateY(45deg);
    /* 커스텀 가능: 회전각도 */
}

@keyframes floatRotate {

    0%,
    100% {
        transform: translateY(0px) rotateX(0deg) rotateY(0deg);
    }

    50% {
        transform: translateY(-20px) rotateX(180deg) rotateY(180deg);
        /* 커스텀 가능: 이동 거리와 회전 */
    }
}

/* 다른 색상 변형 - 사용 예시 */
.floating-element.purple {
    border-color: rgba(147, 51, 234, 0.3);
    background: rgba(147, 51, 234, 0.05);
}

.floating-element.purple:before {
    border-color: rgba(147, 51, 234, 0.2);
    background: rgba(147, 51, 234, 0.03);
}

.floating-element.green {
    border-color: rgba(34, 197, 94, 0.3);
    background: rgba(34, 197, 94, 0.05);
}

.floating-element.green:before {
    border-color: rgba(34, 197, 94, 0.2);
    background: rgba(34, 197, 94, 0.03);
}

/* =================================================================
   2. 펄스 애니메이션
   ================================================================= */

/* 기본 펄스 */
.pulse-element {
    animation: pulse 2s infinite;
    /* 커스텀 가능: 속도 조정 */
}

@keyframes pulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 0.7;
        /* 커스텀 가능: 투명도 범위 */
    }

    50% {
        transform: scale(1.1);
        /* 커스텀 가능: 확대 비율 */
        opacity: 1;
    }
}

/* 부드러운 펄스 */
.soft-pulse {
    animation: softPulse 3s infinite ease-in-out;
    /* 커스텀 가능: 속도 */
}

@keyframes softPulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
        /* 커스텀 가능: 미세한 확대 */
    }
}

/* 뇌파 스타일 펄스 */
.neural-pulse {
    animation: neuralPulse 2s infinite ease-in-out;
}

@keyframes neuralPulse {

    0%,
    100% {
        opacity: 0.3;
        /* 커스텀 가능: 최소 투명도 */
    }

    50% {
        opacity: 1;
        /* 커스텀 가능: 최대 투명도 */
    }
}

/* =================================================================
   3. 통합/연결 애니메이션
   ================================================================= */

/* 통합 박스 펄스 (테두리 색상 변화 포함) */
.integration-pulse {
    animation: integrationPulse 2s infinite ease-in-out;
}

@keyframes integrationPulse {

    0%,
    100% {
        transform: scale(1);
        border-color: rgba(64, 224, 208, 0.4);
        /* 커스텀 가능: 기본 테두리 색상 */
    }

    50% {
        transform: scale(1.05);
        /* 커스텀 가능: 확대 비율 */
        border-color: rgba(64, 224, 208, 0.8);
        /* 커스텀 가능: 강조 테두리 색상 */
    }
}

/* 지연 애니메이션 클래스들 */
.delay-1 {
    animation-delay: 0.5s;
}

.delay-2 {
    animation-delay: 1s;
}

.delay-3 {
    animation-delay: 1.5s;
}

.delay-4 {
    animation-delay: 2s;
}

.delay-5 {
    animation-delay: 2.5s;
}

/* =================================================================
   4. 회전 애니메이션
   ================================================================= */

/* 혁신 원형 회전 */
.innovation-rotate {
    animation: innovationRotate 4s infinite linear;
    /* 커스텀 가능: 속도 조정 */
}

@keyframes innovationRotate {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    100% {
        transform: translate(-50%, -50%) rotate(360deg);
        /* 커스텀 가능: 회전 방향 */
    }
}

/* 일반 회전 (중앙 기준점 없음) */
.simple-rotate {
    animation: simpleRotate 6s infinite linear;
}

@keyframes simpleRotate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* 역방향 회전 */
.reverse-rotate {
    animation: reverseRotate 5s infinite linear;
}

@keyframes reverseRotate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(-360deg);
    }
}

/* =================================================================
   5. 스크롤 기반 나타나기 애니메이션
   ================================================================= */

/* 왼쪽에서 나타나기 */
.fade-in-left {
    opacity: 0;
    transform: translateX(-3.125rem);
    /* 커스텀 가능: 이동 거리 */
    transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
    /* 커스텀 가능: 속도와 이징 */
}

.fade-in-left.visible {
    opacity: 1;
    transform: translateX(0);
}

/* 오른쪽에서 나타나기 */
.fade-in-right {
    opacity: 0;
    transform: translateX(3.125rem);
    /* 커스텀 가능: 이동 거리 */
    transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.fade-in-right.visible {
    opacity: 1;
    transform: translateX(0);
}

/* 위에서 나타나기 */
.fade-in-up {
    opacity: 0;
    transform: translateY(3.125rem) scale(0.9);
    /* 커스텀 가능: 이동 거리와 스케일 */
    transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.fade-in-up.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* 아래에서 나타나기 */
.fade-in-down {
    opacity: 0;
    transform: translateY(-3.125rem) scale(0.9);
    transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.fade-in-down.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* =================================================================
   6. 궤도 애니메이션 (Orbit Animations) - 대관람차/공전 효과
   ================================================================= */

/* 기본 궤도 컨테이너 */
.orbit-container {
    position: relative;
    width: 9.375rem;
    /* 150px - 커스텀 가능: 궤도 크기 */
    height: 9.375rem;
    /* 150px */
    margin: 0 auto;
}

/* 회전하는 궤도 (보이는 원형 경로) */
.orbit-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    border: 3px solid rgba(64, 224, 208, 0.3);
    /* 커스텀 가능: 궤도 색상 */
    border-radius: 50%;
    /* JavaScript로 회전 제어 */
    will-change: transform;
}

/* 궤도 위의 아이콘들 - 대관람차 좌석처럼 항상 똑바로! */
.orbit-icon {
    position: absolute;
    width: 2.5rem;
    /* 40px - 좀 더 크게 */
    height: 2.5rem;
    background: rgba(255, 255, 255, 0.9);
    /* 더 밝게 */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    /* 아이콘 크기 증가 */
    border: 2px solid rgba(64, 224, 208, 0.6);
    /* 더 두껍고 선명하게 */
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2), 0 0 20px rgba(64, 224, 208, 0.3);
    /* 부드러운 위치 전환 */
    transition: box-shadow 0.3s ease, background 0.3s ease;
    will-change: transform;

    /* 대관람차 효과: JS로 위치 제어 */
    pointer-events: auto;
    z-index: 2;
}



/* 궤도 아이콘 호버 효과 강화 */
.orbit-icon:hover {
    background: rgba(64, 224, 208, 0.3);
    border-color: rgba(64, 224, 208, 0.8);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), 0 0 30px rgba(64, 224, 208, 0.5);
    cursor: pointer;
}

/* 궤도 중앙 아이콘 */
.orbit-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2rem;
    /* 더 크게 */
    z-index: 2;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    width: 3.5rem;
    height: 3.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
    border: 2px solid rgba(64, 224, 208, 0.3);
}

/* 궤도 애니메이션은 JavaScript로 제어 */
/* CSS 애니메이션 대신 requestAnimationFrame 사용 */

/* 대관람차 스타일 - 더 화려하게! */
.orbit-container.ferris-wheel {
    width: 12.5rem;
    /* 200px */
    height: 12.5rem;
}

.orbit-container.ferris-wheel .orbit-ring {
    border: 4px solid rgba(64, 224, 208, 0.5);
    box-shadow:
        0 0 20px rgba(64, 224, 208, 0.3),
        inset 0 0 20px rgba(64, 224, 208, 0.2);
}

.orbit-container.ferris-wheel .orbit-icon {
    width: 3rem;
    height: 3rem;
    font-size: 1.5rem;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(64, 224, 208, 0.2));
}

/* 궤도 변형들 */

/* 속도 변형들은 JavaScript에서 처리 */
/* setSpeed() 메서드로 제어 */

/* 큰 궤도 */
.large-orbit {
    width: 12.5rem;
    /* 200px */
    height: 12.5rem;
}

.large-orbit .orbit-icon {
    width: 2.5rem;
    /* 40px */
    height: 2.5rem;
    font-size: 1.25rem;
}

/* 작은 궤도 */
.small-orbit {
    width: 6.25rem;
    /* 100px */
    height: 6.25rem;
}

.small-orbit .orbit-icon {
    width: 1.25rem;
    /* 20px */
    height: 1.25rem;
    font-size: 0.75rem;
}

/* 다층 궤도 시스템 */
.multi-orbit {
    position: relative;
}

.multi-orbit .orbit-container:nth-child(1) {
    animation: orbitRotate 3s infinite linear;
}

.multi-orbit .orbit-container:nth-child(2) {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10rem;
    height: 10rem;
    animation: orbitRotate 5s infinite linear reverse;
}

/* 색상 변형들 */
.orbit-teal .orbit-ring {
    border-color: rgba(64, 224, 208, 0.4);
}

.orbit-teal .orbit-icon {
    border-color: rgba(64, 224, 208, 0.3);
    background: rgba(64, 224, 208, 0.1);
}

.orbit-purple .orbit-ring {
    border-color: rgba(147, 51, 234, 0.4);
}

.orbit-purple .orbit-icon {
    border-color: rgba(147, 51, 234, 0.3);
    background: rgba(147, 51, 234, 0.1);
}

.orbit-red .orbit-ring {
    border-color: rgba(239, 68, 68, 0.4);
}

.orbit-red .orbit-icon {
    border-color: rgba(239, 68, 68, 0.3);
    background: rgba(239, 68, 68, 0.1);
}

/* =================================================================
   7. 호흡 애니메이션 (Breathing Animations)
   ================================================================= */

/* 기본 호흡 효과 */
.breathing-effect {
    animation: breathe 3s infinite ease-in-out;
    /* 커스텀 가능: 속도 조정 */
}

@keyframes breathe {

    0%,
    100% {
        transform: scale(1);
        opacity: 0.8;
        /* 커스텀 가능: 최소 투명도 */
    }

    50% {
        transform: scale(1.1);
        /* 커스텀 가능: 확대 비율 */
        opacity: 1;
        /* 커스텀 가능: 최대 투명도 */
    }
}

/* 부드러운 호흡 효과 */
.soft-breathing {
    animation: softBreathe 4s infinite ease-in-out;
}

@keyframes softBreathe {

    0%,
    100% {
        transform: scale(1);
        filter: brightness(0.9);
        /* 커스텀 가능: 밝기 범위 */
    }

    50% {
        transform: scale(1.03);
        /* 미세한 변화 */
        filter: brightness(1.1);
    }
}

/* 깊은 호흡 효과 */
.deep-breathing {
    animation: deepBreathe 5s infinite ease-in-out;
}

@keyframes deepBreathe {

    0%,
    100% {
        transform: scale(0.95);
        /* 수축 시작 */
        opacity: 0.7;
        filter: blur(0px);
    }

    50% {
        transform: scale(1.15);
        /* 큰 확대 */
        opacity: 1;
        filter: blur(1px);
        /* 약간의 블러 효과 */
    }
}

/* 색상 변화와 함께하는 호흡 */
.color-breathing {
    animation: colorBreathe 6s infinite ease-in-out;
}

@keyframes colorBreathe {

    0%,
    100% {
        transform: scale(1);
        background: rgba(64, 224, 208, 0.3);
        /* 커스텀 가능: 색상 */
        box-shadow: 0 0 1.25rem rgba(64, 224, 208, 0.2);
    }

    33% {
        transform: scale(1.05);
        background: rgba(147, 51, 234, 0.3);
        box-shadow: 0 0 1.875rem rgba(147, 51, 234, 0.3);
    }

    66% {
        transform: scale(1.08);
        background: rgba(239, 68, 68, 0.3);
        box-shadow: 0 0 2.5rem rgba(239, 68, 68, 0.4);
    }
}

/* 글로우 호흡 효과 */
.glow-breathing {
    animation: glowBreathe 4s infinite ease-in-out;
    --color1: rgba(64, 224, 208, 0.6);
    --color2: rgba(64, 224, 208, 0.3);
}

@keyframes glowBreathe {

    0%,
    100% {
        transform: scale(1);
        /* box-shadow: 0 0 1rem rgba(64, 224, 208, 0.3); */
        box-shadow: 0 0 1rem var(--color2);
        filter: brightness(1);
    }

    50% {
        transform: scale(1.05);
        box-shadow: 0 0 2rem var(--color1), 0 0 3rem var(--color2);
        filter: brightness(1.2);
    }
}

/* 크기 변형들 */
.small-breathing {
    animation: smallBreathe 3s infinite ease-in-out;
}

@keyframes smallBreathe {

    0%,
    100% {
        transform: scale(1);
        opacity: 0.9;
    }

    50% {
        transform: scale(1.03);
        opacity: 1;
    }
}

.large-breathing {
    animation: largeBreathe 4s infinite ease-in-out;
}

@keyframes largeBreathe {

    0%,
    100% {
        transform: scale(1);
        opacity: 0.8;
    }

    50% {
        transform: scale(1.2);
        opacity: 1;
    }
}

/* 궤도 + 호흡 조합 */
.breathing-orbit .orbit-center {
    animation: breathe 3s infinite ease-in-out;
}

.glow-orbit .orbit-center {
    animation: glowBreathe 4s infinite ease-in-out;
}

/* =================================================================
   8. 버튼 인터랙션 애니메이션
   ================================================================= */
.slide-button {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    /* 커스텀 가능: 아이콘과 텍스트 간격 */
    padding: 0.75rem 1.5rem;
    /* 커스텀 가능: 내부 여백 */
    background: rgba(64, 224, 208, 0.1);
    /* 커스텀 가능: 배경색 */
    border: 2px solid rgba(64, 224, 208, 0.3);
    /* 커스텀 가능: 테두리 */
    border-radius: 3.125rem;
    /* 커스텀 가능: 둥근 정도 */
    color: #40e0d0;
    /* 커스텀 가능: 텍스트 색상 */
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    /* 커스텀 가능: 전환 속도 */
    cursor: pointer;
}

.slide-button:hover {
    background: rgba(64, 224, 208, 0.2);
    /* 커스텀 가능: 호버 배경 */
    border-color: #40e0d0;
    /* 커스텀 가능: 호버 테두리 */
    transform: translateX(0.3125rem);
    /* 커스텀 가능: 이동 거리 */
}

.slide-button .arrow {
    transition: transform 0.3s ease;
}

.slide-button:hover .arrow {
    transform: translateX(0.3125rem);
    /* 커스텀 가능: 화살표 이동 */
}

/* 클릭 효과 */
.slide-button:active {
    transform: translateX(0.1875rem) scale(0.95);
    /* 커스텀 가능: 클릭 시 효과 */
}

/* =================================================================
   7. 특수 시각 효과
   ================================================================= */

/* 그라디언트 텍스트 */
.gradient-text {
    background: linear-gradient(135deg, #ffffff, #40e0d0);
    /* 커스텀 가능: 그라디언트 색상 */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* 글로우 효과 */
.glow-effect {
    box-shadow: 0 0 20px rgba(64, 224, 208, 0.3);
    /* 커스텀 가능: 글로우 색상과 크기 */
    transition: box-shadow 0.3s ease;
}

.glow-effect:hover {
    box-shadow: 0 0 30px rgba(64, 224, 208, 0.5);
    /* 커스텀 가능: 호버 글로우 */
}

/* =================================================================
   8. 사용 예시 및 조합
   ================================================================= */

/* 
사용 예시:

1. 플로팅 요소:
<div class="floating-element purple delay-2"></div>

2. 펄스 아이콘:
<div class="pulse-element delay-1">💡</div>

3. 스크롤 애니메이션:
<div class="fade-in-left">텍스트 내용</div>
<div class="fade-in-up">이미지나 카드</div>

4. 버튼:
<a href="#" class="slide-button">
    클릭하세요 <span class="arrow">→</span>
</a>

5. 회전하는 로더:
<div class="innovation-rotate">⚙️</div>

6. 그라디언트 제목:
<h1 class="gradient-text">멋진 제목</h1>

커스텀 변수 사용 예시:
:root {
    --primary-color: #40e0d0;
    --primary-alpha-30: rgba(64, 224, 208, 0.3);
    --primary-alpha-10: rgba(64, 224, 208, 0.1);
    --animation-speed: 2s;
    --move-distance: 3.125rem;
}
*/

/* =================================================================
   9. 대관람차 효과 개선 (Ferris Wheel Enhancement)
   ================================================================= */

/* 대관람차 아이콘이 똑바로 서있도록 JS와 연동 */
.orbit-icon[data-angle] {
    /* JS에서 data-angle 속성으로 각도 제어 */
    transition: transform 0.1s ease-out;
}

/* 대관람차 컨테이너 효과 */
.ferris-wheel-container {
    position: relative;
    display: inline-block;
}

.ferris-wheel-container::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120%;
    height: 120%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle at center,
            transparent 40%,
            rgba(64, 224, 208, 0.1) 50%,
            transparent 60%);
    border-radius: 50%;
    animation: pulseGlow 3s ease-in-out infinite;
}

@keyframes pulseGlow {

    0%,
    100% {
        opacity: 0.3;
    }

    50% {
        opacity: 0.7;
    }
}

/* 대관람차 좌석 스타일 */
.ferris-seat {
    position: absolute;
    width: 3rem;
    height: 3rem;
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.95) 0%,
            rgba(64, 224, 208, 0.3) 100%);
    border: 2px solid rgba(64, 224, 208, 0.6);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    box-shadow:
        0 4px 8px rgba(0, 0, 0, 0.2),
        0 0 20px rgba(64, 224, 208, 0.3),
        inset 0 0 10px rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.ferris-seat:hover {
    transform: scale(1.15);
    background: linear-gradient(135deg,
            rgba(64, 224, 208, 0.5) 0%,
            rgba(255, 255, 255, 0.95) 100%);
    box-shadow:
        0 6px 12px rgba(0, 0, 0, 0.3),
        0 0 30px rgba(64, 224, 208, 0.6),
        inset 0 0 15px rgba(255, 255, 255, 0.5);
}

/* 대관람차 지지대 효과 */
.ferris-support {
    position: absolute;
    bottom: -20px;
    left: 50%;
    width: 4px;
    height: 80px;
    background: linear-gradient(to bottom,
            rgba(64, 224, 208, 0.4) 0%,
            rgba(64, 224, 208, 0.1) 100%);
    transform: translateX(-50%);
}

.ferris-support::before,
.ferris-support::after {
    content: '';
    position: absolute;
    bottom: 0;
    width: 3px;
    height: 60px;
    background: rgba(64, 224, 208, 0.3);
}

.ferris-support::before {
    left: -30px;
    transform: rotate(-30deg);
    transform-origin: bottom center;
}

.ferris-support::after {
    right: -30px;
    transform: rotate(30deg);
    transform-origin: bottom center;
}

/* =================================================================
   10. 반응형 애니메이션 조정
   ================================================================= */

@media (max-width: 768px) {

    /* 모바일에서 애니메이션 속도 조정 */
    .floating-element {
        animation-duration: 6s;
        /* 더 빠르게 */
    }

    .pulse-element {
        animation-duration: 1.5s;
        /* 더 빠르게 */
    }

    /* 모바일에서 이동 거리 축소 */
    .fade-in-left {
        transform: translateX(-1.5rem);
    }

    .fade-in-right {
        transform: translateX(1.5rem);
    }

    .fade-in-up {
        transform: translateY(1.5rem) scale(0.95);
    }
}

/* 애니메이션 비활성화 (접근성 고려) */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* =================================================================
   11. 추가 커스텀 애니메이션 모듈
   ================================================================= */
/*플로팅 애니메이션*/
/* 공통 스타일 */
.floating {
    display: inline-block;
    will-change: transform;
    transition: transform 0.3s ease-in-out;
    animation-name: floatUpDown;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

/* 애니메이션 정의 */
@keyframes floatUpDown {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }

    100% {
        transform: translateY(0);
    }
}

/* 각 요소별 속도/딜레이 다르게 지정 */
.floating1 {
    animation-duration: 4s;
    animation-delay: 0s;
}

.floating2 {
    animation-duration: 5s;
    animation-delay: 0.5s;
}

.floating3 {
    animation-duration: 4.5s;
    animation-delay: 1s;
}

.floating4 {
    animation-duration: 6s;
    animation-delay: 0.2s;
}

.floating5 {
    animation-duration: 5.5s;
    animation-delay: 0.8s;
}

.floating6 {
    animation-duration: 4.2s;
    animation-delay: 1.3s;
}