/**
 * 메인 페이지 (index) 스타일
 */

/* ============================================
   Hero Slider
   ============================================ */
/* 16:9 비율, 최대 높이 400px (min으로 폭에 따른 높이와 400px 중 작은 값 적용) */
.hero-section {
    position: relative;
    width: 100%;
    height: min(56.25vw, 400px);
    min-height: 200px;
}

@media (max-width: 640px) {
    .hero-section {
        height: min(56.25vw, 400px);
        min-height: 180px;
    }
}

.hero-slider {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 1920px;
    height: 100%;
    z-index: 0;
}

.hero-slider img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

@media (max-width: 640px) {
    .hero-slider img {
        object-fit: cover;
        object-position: center top;
    }
}

.hero-content {
    position: relative;
    z-index: 10;
}

.slider-container {
    position: relative;
    width: 100%;
    height: 100%;
}

.slider-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.slider-slide.active {
    opacity: 1;
}

/* ============================================
   Team cards fade-in animation
   ============================================ */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

.team-card {
    animation: fadeIn 0.5s ease-out forwards;
    opacity: 0;
}

.team-card:nth-child(1) { animation-delay: 0.1s; }
.team-card:nth-child(2) { animation-delay: 0.2s; }
.team-card:nth-child(3) { animation-delay: 0.3s; }
.team-card:nth-child(4) { animation-delay: 0.4s; }

.teams-header {
    animation: fadeIn 0.5s ease-out forwards;
    opacity: 0;
}

/* ============================================
   Teams Section
   ============================================ */
.teams-section {
    position: relative;
    overflow: visible;
}

.teams-section > * {
    position: relative;
    z-index: 1;
}

/* ============================================
   Fireflies: Teams 섹션 내 부유하며 반짝이는 효과
   ============================================ */
.fireflies {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: visible;
}

.firefly {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 0.5vw;
    height: 0.5vw;
    margin: -0.25vw 0 0 -0.25vw;
    animation-timing-function: ease;
    animation-direction: alternate;
    animation-iteration-count: infinite;
}

.firefly::before,
.firefly::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    transform-origin: -2vw center;
}

.firefly::before {
    background: rgba(100, 150, 200, 0.35);
    animation: fireflyDrift ease alternate infinite;
}

.firefly::after {
    background: white;
    opacity: 0;
    box-shadow: 0 0 0 0 rgba(255, 230, 180, 0);
    animation: fireflyDrift ease alternate infinite, fireflyFlash ease infinite;
}

@keyframes fireflyDrift {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes fireflyFlash {
    0%, 30%, 100% { opacity: 0; box-shadow: 0 0 0 0 rgba(255, 230, 180, 0); }
    5% { opacity: 1; box-shadow: 0 0 1.5vw 0.3vw rgba(255, 245, 220, 0.6); }
}

/* Firefly 개별 시작 위치(넓게 분산) + 이동 경로 */
.firefly-1 { left: 8%; top: 15%; animation: fireflyMove1 180s ease alternate infinite; }
.firefly-2 { left: 78%; top: 22%; animation: fireflyMove2 220s ease alternate infinite; }
.firefly-3 { left: 35%; top: 8%; animation: fireflyMove3 200s ease alternate infinite; }
.firefly-4 { left: 62%; top: 68%; animation: fireflyMove4 240s ease alternate infinite; }
.firefly-5 { left: 15%; top: 55%; animation: fireflyMove5 190s ease alternate infinite; }
.firefly-6 { left: 85%; top: 42%; animation: fireflyMove6 210s ease alternate infinite; }
.firefly-7 { left: 42%; top: 78%; animation: fireflyMove7 230s ease alternate infinite; }
.firefly-8 { left: 92%; top: 12%; animation: fireflyMove8 170s ease alternate infinite; }
.firefly-9 { left: 5%; top: 85%; animation: fireflyMove9 250s ease alternate infinite; }
.firefly-10 { left: 55%; top: 28%; animation: fireflyMove10 195s ease alternate infinite; }
.firefly-11 { left: 22%; top: 38%; animation: fireflyMove11 215s ease alternate infinite; }
.firefly-12 { left: 70%; top: 88%; animation: fireflyMove12 225s ease alternate infinite; }
.firefly-13 { left: 48%; top: 52%; animation: fireflyMove13 185s ease alternate infinite; }
.firefly-14 { left: 12%; top: 72%; animation: fireflyMove14 205s ease alternate infinite; }
.firefly-15 { left: 88%; top: 58%; animation: fireflyMove15 235s ease alternate infinite; }
.firefly-16 { left: 28%; top: 45%; animation: fireflyMove16 192s ease alternate infinite; }
.firefly-17 { left: 65%; top: 15%; animation: fireflyMove17 218s ease alternate infinite; }
.firefly-18 { left: 95%; top: 65%; animation: fireflyMove18 188s ease alternate infinite; }
.firefly-19 { left: 18%; top: 25%; animation: fireflyMove19 228s ease alternate infinite; }
.firefly-20 { left: 52%; top: 82%; animation: fireflyMove20 198s ease alternate infinite; }
.firefly-21 { left: 38%; top: 35%; animation: fireflyMove21 238s ease alternate infinite; }
.firefly-22 { left: 75%; top: 52%; animation: fireflyMove22 178s ease alternate infinite; }
.firefly-23 { left: 10%; top: 62%; animation: fireflyMove23 208s ease alternate infinite; }
.firefly-24 { left: 58%; top: 8%; animation: fireflyMove24 222s ease alternate infinite; }
.firefly-25 { left: 32%; top: 72%; animation: fireflyMove25 186s ease alternate infinite; }
.firefly-26 { left: 82%; top: 38%; animation: fireflyMove26 212s ease alternate infinite; }
.firefly-27 { left: 45%; top: 48%; animation: fireflyMove27 248s ease alternate infinite; }
.firefly-28 { left: 6%; top: 42%; animation: fireflyMove28 175s ease alternate infinite; }
.firefly-29 { left: 68%; top: 75%; animation: fireflyMove29 232s ease alternate infinite; }
.firefly-30 { left: 25%; top: 92%; animation: fireflyMove30 205s ease alternate infinite; }

.firefly-1::before { animation-duration: 12s; }
.firefly-2::before { animation-duration: 15s; }
.firefly-3::before { animation-duration: 10s; }
.firefly-4::before { animation-duration: 18s; }
.firefly-5::before { animation-duration: 14s; }
.firefly-6::before { animation-duration: 11s; }
.firefly-7::before { animation-duration: 16s; }
.firefly-8::before { animation-duration: 9s; }
.firefly-9::before { animation-duration: 20s; }
.firefly-10::before { animation-duration: 13s; }
.firefly-11::before { animation-duration: 17s; }
.firefly-12::before { animation-duration: 11s; }
.firefly-13::before { animation-duration: 14s; }
.firefly-14::before { animation-duration: 19s; }
.firefly-15::before { animation-duration: 12s; }
.firefly-16::before { animation-duration: 15s; }
.firefly-17::before { animation-duration: 10s; }
.firefly-18::before { animation-duration: 17s; }
.firefly-19::before { animation-duration: 13s; }
.firefly-20::before { animation-duration: 11s; }
.firefly-21::before { animation-duration: 19s; }
.firefly-22::before { animation-duration: 9s; }
.firefly-23::before { animation-duration: 14s; }
.firefly-24::before { animation-duration: 16s; }
.firefly-25::before { animation-duration: 10s; }
.firefly-26::before { animation-duration: 18s; }
.firefly-27::before { animation-duration: 12s; }
.firefly-28::before { animation-duration: 11s; }
.firefly-29::before { animation-duration: 15s; }
.firefly-30::before { animation-duration: 13s; }

.firefly-1::after { animation: fireflyDrift 12s ease alternate infinite, fireflyFlash 6s ease infinite; animation-delay: 0s, 1s; }
.firefly-2::after { animation: fireflyDrift 15s ease alternate infinite, fireflyFlash 8s ease infinite; animation-delay: 0s, 3s; }
.firefly-3::after { animation: fireflyDrift 10s ease alternate infinite, fireflyFlash 5s ease infinite; animation-delay: 0s, 0.5s; }
.firefly-4::after { animation: fireflyDrift 18s ease alternate infinite, fireflyFlash 9s ease infinite; animation-delay: 0s, 4s; }
.firefly-5::after { animation: fireflyDrift 14s ease alternate infinite, fireflyFlash 7s ease infinite; animation-delay: 0s, 2s; }
.firefly-6::after { animation: fireflyDrift 11s ease alternate infinite, fireflyFlash 6s ease infinite; animation-delay: 0s, 5s; }
.firefly-7::after { animation: fireflyDrift 16s ease alternate infinite, fireflyFlash 8s ease infinite; animation-delay: 0s, 2.5s; }
.firefly-8::after { animation: fireflyDrift 9s ease alternate infinite, fireflyFlash 5s ease infinite; animation-delay: 0s, 6s; }
.firefly-9::after { animation: fireflyDrift 20s ease alternate infinite, fireflyFlash 10s ease infinite; animation-delay: 0s, 1.5s; }
.firefly-10::after { animation: fireflyDrift 13s ease alternate infinite, fireflyFlash 7s ease infinite; animation-delay: 0s, 3.5s; }
.firefly-11::after { animation: fireflyDrift 17s ease alternate infinite, fireflyFlash 8s ease infinite; animation-delay: 0s, 4.5s; }
.firefly-12::after { animation: fireflyDrift 11s ease alternate infinite, fireflyFlash 6s ease infinite; animation-delay: 0s, 0.8s; }
.firefly-13::after { animation: fireflyDrift 14s ease alternate infinite, fireflyFlash 7s ease infinite; animation-delay: 0s, 5.5s; }
.firefly-14::after { animation: fireflyDrift 19s ease alternate infinite, fireflyFlash 9s ease infinite; animation-delay: 0s, 2.2s; }
.firefly-15::after { animation: fireflyDrift 12s ease alternate infinite, fireflyFlash 6s ease infinite; animation-delay: 0s, 4.2s; }
.firefly-16::after { animation: fireflyDrift 15s ease alternate infinite, fireflyFlash 7s ease infinite; animation-delay: 0s, 2.3s; }
.firefly-17::after { animation: fireflyDrift 10s ease alternate infinite, fireflyFlash 5s ease infinite; animation-delay: 0s, 6.2s; }
.firefly-18::after { animation: fireflyDrift 17s ease alternate infinite, fireflyFlash 8s ease infinite; animation-delay: 0s, 1.1s; }
.firefly-19::after { animation: fireflyDrift 13s ease alternate infinite, fireflyFlash 7s ease infinite; animation-delay: 0s, 4.8s; }
.firefly-20::after { animation: fireflyDrift 11s ease alternate infinite, fireflyFlash 6s ease infinite; animation-delay: 0s, 3.1s; }
.firefly-21::after { animation: fireflyDrift 19s ease alternate infinite, fireflyFlash 9s ease infinite; animation-delay: 0s, 0.4s; }
.firefly-22::after { animation: fireflyDrift 9s ease alternate infinite, fireflyFlash 5s ease infinite; animation-delay: 0s, 5.7s; }
.firefly-23::after { animation: fireflyDrift 14s ease alternate infinite, fireflyFlash 7s ease infinite; animation-delay: 0s, 2.9s; }
.firefly-24::after { animation: fireflyDrift 16s ease alternate infinite, fireflyFlash 8s ease infinite; animation-delay: 0s, 1.8s; }
.firefly-25::after { animation: fireflyDrift 10s ease alternate infinite, fireflyFlash 6s ease infinite; animation-delay: 0s, 5.3s; }
.firefly-26::after { animation: fireflyDrift 18s ease alternate infinite, fireflyFlash 9s ease infinite; animation-delay: 0s, 3.6s; }
.firefly-27::after { animation: fireflyDrift 12s ease alternate infinite, fireflyFlash 6s ease infinite; animation-delay: 0s, 0.7s; }
.firefly-28::after { animation: fireflyDrift 11s ease alternate infinite, fireflyFlash 5s ease infinite; animation-delay: 0s, 4.4s; }
.firefly-29::after { animation: fireflyDrift 15s ease alternate infinite, fireflyFlash 8s ease infinite; animation-delay: 0s, 2.6s; }
.firefly-30::after { animation: fireflyDrift 13s ease alternate infinite, fireflyFlash 7s ease infinite; animation-delay: 0s, 5.9s; }

/* Firefly 이동 keyframes */
@keyframes fireflyMove1 { 0% { transform: translate(0, 0) scale(0.6); } 25% { transform: translate(-12vw, -8vh) scale(0.8); } 50% { transform: translate(8vw, 5vh) scale(0.5); } 75% { transform: translate(15vw, -10vh) scale(0.7); } 100% { transform: translate(-5vw, 12vh) scale(0.6); } }
@keyframes fireflyMove2 { 0% { transform: translate(0, 0) scale(0.5); } 20% { transform: translate(20vw, 15vh) scale(0.7); } 40% { transform: translate(-15vw, -5vh) scale(0.6); } 60% { transform: translate(-8vw, 18vh) scale(0.4); } 80% { transform: translate(10vw, -12vh) scale(0.8); } 100% { transform: translate(0, 0) scale(0.5); } }
@keyframes fireflyMove3 { 0% { transform: translate(0, 0) scale(0.7); } 33% { transform: translate(-18vw, 10vh) scale(0.5); } 66% { transform: translate(12vw, -15vh) scale(0.9); } 100% { transform: translate(-10vw, -8vh) scale(0.6); } }
@keyframes fireflyMove4 { 0% { transform: translate(0, 0) scale(0.4); } 25% { transform: translate(14vw, -18vh) scale(0.6); } 50% { transform: translate(-20vw, 8vh) scale(0.5); } 75% { transform: translate(-6vw, -12vh) scale(0.7); } 100% { transform: translate(18vw, 14vh) scale(0.4); } }
@keyframes fireflyMove5 { 0% { transform: translate(0, 0) scale(0.8); } 50% { transform: translate(-15vw, -20vh) scale(0.5); } 100% { transform: translate(10vw, 6vh) scale(0.7); } }
@keyframes fireflyMove6 { 0% { transform: translate(0, 0) scale(0.5); } 25% { transform: translate(22vw, 7vh) scale(0.6); } 50% { transform: translate(-8vw, -22vh) scale(0.4); } 75% { transform: translate(-16vw, 16vh) scale(0.8); } 100% { transform: translate(5vw, -3vh) scale(0.5); } }
@keyframes fireflyMove7 { 0% { transform: translate(0, 0) scale(0.6); } 30% { transform: translate(-10vw, 20vh) scale(0.4); } 60% { transform: translate(18vw, -8vh) scale(0.7); } 100% { transform: translate(-5vw, -15vh) scale(0.5); } }
@keyframes fireflyMove8 { 0% { transform: translate(0, 0) scale(0.5); } 20% { transform: translate(8vw, -18vh) scale(0.8); } 40% { transform: translate(-22vw, 5vh) scale(0.5); } 60% { transform: translate(12vw, 12vh) scale(0.6); } 80% { transform: translate(-14vw, -10vh) scale(0.4); } 100% { transform: translate(0, 0) scale(0.5); } }
@keyframes fireflyMove9 { 0% { transform: translate(0, 0) scale(0.4); } 25% { transform: translate(-25vw, -12vh) scale(0.6); } 50% { transform: translate(15vw, 18vh) scale(0.5); } 75% { transform: translate(20vw, -5vh) scale(0.7); } 100% { transform: translate(-18vw, 8vh) scale(0.4); } }
@keyframes fireflyMove10 { 0% { transform: translate(0, 0) scale(0.7); } 33% { transform: translate(16vw, -14vh) scale(0.5); } 66% { transform: translate(-12vw, 10vh) scale(0.8); } 100% { transform: translate(6vw, 20vh) scale(0.6); } }
@keyframes fireflyMove11 { 0% { transform: translate(0, 0) scale(0.5); } 25% { transform: translate(-20vw, 15vh) scale(0.7); } 50% { transform: translate(10vw, -20vh) scale(0.4); } 75% { transform: translate(-8vw, -8vh) scale(0.6); } 100% { transform: translate(22vw, 12vh) scale(0.5); } }
@keyframes fireflyMove12 { 0% { transform: translate(0, 0) scale(0.6); } 50% { transform: translate(-14vw, -22vh) scale(0.4); } 100% { transform: translate(18vw, 8vh) scale(0.7); } }
@keyframes fireflyMove13 { 0% { transform: translate(0, 0) scale(0.8); } 33% { transform: translate(12vw, 12vh) scale(0.5); } 66% { transform: translate(-18vw, -6vh) scale(0.6); } 100% { transform: translate(-5vw, -18vh) scale(0.7); } }
@keyframes fireflyMove14 { 0% { transform: translate(0, 0) scale(0.4); } 25% { transform: translate(-16vw, 18vh) scale(0.7); } 50% { transform: translate(20vw, -12vh) scale(0.5); } 75% { transform: translate(8vw, 15vh) scale(0.6); } 100% { transform: translate(-12vw, -5vh) scale(0.4); } }
@keyframes fireflyMove15 { 0% { transform: translate(0, 0) scale(0.5); } 30% { transform: translate(14vw, -16vh) scale(0.8); } 60% { transform: translate(-20vw, 8vh) scale(0.4); } 100% { transform: translate(10vw, -10vh) scale(0.6); } }
@keyframes fireflyMove16 { 0% { transform: translate(0, 0) scale(0.6); } 25% { transform: translate(18vw, 12vh) scale(0.4); } 50% { transform: translate(-12vw, -16vh) scale(0.7); } 75% { transform: translate(-8vw, 14vh) scale(0.5); } 100% { transform: translate(6vw, -10vh) scale(0.6); } }
@keyframes fireflyMove17 { 0% { transform: translate(0, 0) scale(0.5); } 33% { transform: translate(-14vw, 18vh) scale(0.8); } 66% { transform: translate(16vw, -12vh) scale(0.4); } 100% { transform: translate(-10vw, -8vh) scale(0.6); } }
@keyframes fireflyMove18 { 0% { transform: translate(0, 0) scale(0.4); } 20% { transform: translate(-20vw, -10vh) scale(0.7); } 40% { transform: translate(10vw, 20vh) scale(0.5); } 60% { transform: translate(22vw, -5vh) scale(0.6); } 80% { transform: translate(-15vw, 15vh) scale(0.4); } 100% { transform: translate(0, 0) scale(0.4); } }
@keyframes fireflyMove19 { 0% { transform: translate(0, 0) scale(0.7); } 50% { transform: translate(14vw, -18vh) scale(0.5); } 100% { transform: translate(-16vw, 10vh) scale(0.7); } }
@keyframes fireflyMove20 { 0% { transform: translate(0, 0) scale(0.5); } 25% { transform: translate(-18vw, 8vh) scale(0.8); } 50% { transform: translate(12vw, -14vh) scale(0.4); } 75% { transform: translate(8vw, 16vh) scale(0.6); } 100% { transform: translate(-10vw, -6vh) scale(0.5); } }
@keyframes fireflyMove21 { 0% { transform: translate(0, 0) scale(0.6); } 30% { transform: translate(20vw, -12vh) scale(0.4); } 60% { transform: translate(-14vw, 18vh) scale(0.7); } 100% { transform: translate(-8vw, -14vh) scale(0.5); } }
@keyframes fireflyMove22 { 0% { transform: translate(0, 0) scale(0.4); } 25% { transform: translate(-12vw, -20vh) scale(0.6); } 50% { transform: translate(18vw, 12vh) scale(0.5); } 75% { transform: translate(10vw, -16vh) scale(0.7); } 100% { transform: translate(-6vw, 8vh) scale(0.4); } }
@keyframes fireflyMove23 { 0% { transform: translate(0, 0) scale(0.5); } 33% { transform: translate(16vw, 14vh) scale(0.8); } 66% { transform: translate(-22vw, -8vh) scale(0.4); } 100% { transform: translate(12vw, -12vh) scale(0.6); } }
@keyframes fireflyMove24 { 0% { transform: translate(0, 0) scale(0.6); } 40% { transform: translate(-10vw, -18vh) scale(0.5); } 80% { transform: translate(20vw, 10vh) scale(0.7); } 100% { transform: translate(-8vw, 14vh) scale(0.5); } }
@keyframes fireflyMove25 { 0% { transform: translate(0, 0) scale(0.4); } 25% { transform: translate(14vw, -14vh) scale(0.7); } 50% { transform: translate(-20vw, 8vh) scale(0.5); } 75% { transform: translate(-6vw, -16vh) scale(0.6); } 100% { transform: translate(18vw, 12vh) scale(0.4); } }
@keyframes fireflyMove26 { 0% { transform: translate(0, 0) scale(0.7); } 33% { transform: translate(-16vw, 16vh) scale(0.4); } 66% { transform: translate(10vw, -20vh) scale(0.8); } 100% { transform: translate(14vw, 6vh) scale(0.5); } }
@keyframes fireflyMove27 { 0% { transform: translate(0, 0) scale(0.5); } 25% { transform: translate(22vw, 8vh) scale(0.6); } 50% { transform: translate(-12vw, -18vh) scale(0.7); } 75% { transform: translate(-18vw, 14vh) scale(0.4); } 100% { transform: translate(8vw, -10vh) scale(0.5); } }
@keyframes fireflyMove28 { 0% { transform: translate(0, 0) scale(0.6); } 50% { transform: translate(-14vw, 20vh) scale(0.4); } 100% { transform: translate(18vw, -12vh) scale(0.7); } }
@keyframes fireflyMove29 { 0% { transform: translate(0, 0) scale(0.4); } 30% { transform: translate(12vw, 16vh) scale(0.7); } 60% { transform: translate(-20vw, -10vh) scale(0.5); } 100% { transform: translate(-6vw, -14vh) scale(0.6); } }
@keyframes fireflyMove30 { 0% { transform: translate(0, 0) scale(0.5); } 25% { transform: translate(-18vw, -12vh) scale(0.8); } 50% { transform: translate(16vw, 18vh) scale(0.4); } 75% { transform: translate(10vw, -14vh) scale(0.6); } 100% { transform: translate(-12vw, 8vh) scale(0.5); } }