/* PC 히어로 섹션 플로팅 요소 스타일 */
.hero-pc-floating-elements {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
}

.floating-element {
    position: absolute;
    font-size: 2rem;
    will-change: transform;
    opacity: 0.8;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
    transition: opacity 0.3s ease;
}

.floating-element:hover {
    opacity: 1;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
}

/* 플로팅 요소 위치 및 애니메이션 */
.element-1 {
    top: 20%;
    left: 20%;
    animation: hero-float1 6s ease-in-out infinite;
}

.element-2 {
    top: 60%;
    right: 20%;
    animation: hero-float2 8s ease-in-out infinite;
}

.element-3 {
    bottom: 20%;
    left: 50%;
    animation: hero-float3 10s ease-in-out infinite;
}

.element-4 {
    top: 30%;
    right: 30%;
    animation: hero-float4 9s ease-in-out infinite;
}

.element-5 {
    bottom: 40%;
    right: 10%;
    animation: hero-float5 11s ease-in-out infinite;
}

/* 플로팅 애니메이션 키프레임 */
@keyframes hero-float1 {
    0%, 100% { 
        transform: translate(0, 0) rotate(0deg); 
        opacity: 0.6;
    }
    25% { 
        transform: translate(40px, -30px) rotate(90deg); 
        opacity: 0.8;
    }
    50% { 
        transform: translate(-20px, 40px) rotate(180deg); 
        opacity: 1;
    }
    75% { 
        transform: translate(30px, 20px) rotate(270deg); 
        opacity: 0.8;
    }
}

@keyframes hero-float2 {
    0%, 100% { 
        transform: translate(0, 0) rotate(0deg); 
        opacity: 0.6;
    }
    33% { 
        transform: translate(-30px, -40px) rotate(120deg); 
        opacity: 0.9;
    }
    66% { 
        transform: translate(40px, 30px) rotate(240deg); 
        opacity: 1;
    }
}

@keyframes hero-float3 {
    0%, 100% { 
        transform: translate(0, 0) rotate(0deg); 
        opacity: 0.6;
    }
    20% { 
        transform: translate(50px, -20px) rotate(72deg); 
        opacity: 0.8;
    }
    40% { 
        transform: translate(-30px, 50px) rotate(144deg); 
        opacity: 1;
    }
    60% { 
        transform: translate(20px, 40px) rotate(216deg); 
        opacity: 0.9;
    }
    80% { 
        transform: translate(-40px, -30px) rotate(288deg); 
        opacity: 0.7;
    }
}

@keyframes hero-float4 {
    0%, 100% { 
        transform: translate(0, 0) rotate(0deg); 
        opacity: 0.6;
    }
    25% { 
        transform: translate(-40px, 30px) rotate(90deg); 
        opacity: 0.8;
    }
    50% { 
        transform: translate(30px, -40px) rotate(180deg); 
        opacity: 1;
    }
    75% { 
        transform: translate(-30px, -30px) rotate(270deg); 
        opacity: 0.8;
    }
}

@keyframes hero-float5 {
    0%, 100% { 
        transform: translate(0, 0) rotate(0deg); 
        opacity: 0.6;
    }
    20% { 
        transform: translate(40px, -30px) rotate(72deg); 
        opacity: 0.8;
    }
    40% { 
        transform: translate(-30px, 40px) rotate(144deg); 
        opacity: 1;
    }
    60% { 
        transform: translate(30px, 30px) rotate(216deg); 
        opacity: 0.9;
    }
    80% { 
        transform: translate(-40px, -40px) rotate(288deg); 
        opacity: 0.7;
    }
}

/* 모바일에서 플로팅 요소 숨기기 */
@media (max-width: 768px) {
    .hero-pc-floating-elements {
        display: none;
    }
}

/* 태블릿에서 플로팅 요소 크기 조정 */
@media (min-width: 769px) and (max-width: 1024px) {
    .floating-element {
        font-size: 1.5rem;
    }
    
    .element-1 { top: 15%; left: 15%; }
    .element-2 { top: 55%; right: 15%; }
    .element-3 { bottom: 15%; left: 45%; }
    .element-4 { top: 25%; right: 25%; }
    .element-5 { bottom: 35%; right: 5%; }
}

/* 대형 화면에서 플로팅 요소 크기 증가 */
@media (min-width: 1200px) {
    .floating-element {
        font-size: 2.5rem;
    }
    
    .element-1 { top: 25%; left: 25%; }
    .element-2 { top: 65%; right: 25%; }
    .element-3 { bottom: 25%; left: 55%; }
    .element-4 { top: 35%; right: 35%; }
    .element-5 { bottom: 45%; right: 15%; }
}