/**
 * Mobile Performance Optimization CSS
 * GPU 메모리 최적화 및 모바일 성능 개선
 * Created: 2024-12-19
 */

/* ================================
   MOBILE-ONLY OPTIMIZATIONS
   Touch devices with max width 768px
   ================================ */
@media (max-width: 768px) and (hover: none) {
    /* --------------------------------
       Background Particle Reduction
       30개 → 15개로 감소
       -------------------------------- */
    .star:nth-child(n+16) { 
        display: none !important; /* 16번째 이후 숨김 */
    }
    
    /* Meteor 복원 - 모바일 최적화 버전 */
    .meteor {
        /* display: none 제거! 원본 애니메이션 유지 */
        display: block !important;
        
        /* 모바일용 크기 조정 (원본: 3px × 250px) */
        width: 2.5px !important;  /* 살짝 얇게 */
        height: 200px !important;  /* 살짝 짧게 */
        
        /* 원본 그라데이션 유지 (빛줄기 효과) */
        background: linear-gradient(to bottom,
            transparent 0%,
            rgba(255, 255, 255, 0.05) 25%,
            rgba(255, 255, 255, 0.2) 50%,
            rgba(255, 255, 255, 0.5) 75%,
            rgba(255, 255, 255, 0.85) 90%,
            rgba(255, 255, 255, 1) 95%,
            rgba(255, 230, 200, 1) 100%) !important;
        
        /* 모바일용 광원 효과 (원본보다 약간 감소) */
        box-shadow: 
            0 -3px 15px rgba(255, 255, 255, 0.9),
            0 -8px 30px rgba(255, 255, 255, 0.7),
            0 -2px 8px rgba(255, 255, 255, 0.9),
            0 3px 20px rgba(255, 230, 200, 0.5),
            0 8px 25px rgba(255, 220, 180, 0.3) !important;
        
        /* 블러 효과 약간 감소 */
        filter: blur(0.3px) !important;
    }
    
    /* Meteor falling 애니메이션 타이밍 유지 */
    .meteor.falling {
        /* 원본 3.1초 유지 */
        animation: meteorFall 3.1s ease-in forwards !important;
    }
    
    /* Meteor 잔상 효과 (after pseudo-element) */
    .meteor.falling::after {
        content: '';
        position: absolute;
        bottom: -10px;
        left: 50%;
        transform: translateX(-50%);
        width: 15px;  /* 원본: 20px */
        height: 15px;  /* 원본: 20px */
        background: radial-gradient(circle,
            rgba(255, 255, 255, 1) 0%,
            rgba(255, 255, 255, 0.8) 30%,
            rgba(255, 255, 255, 0.4) 60%,
            transparent 100%);
        filter: blur(1px);
        box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
    }
    
    /* meteorGlow 애니메이션 정의 (누락된 부분) */
    @keyframes meteorGlow {
        0% {
            opacity: 0;
            transform: translateX(-50%) scale(0.5);
        }
        50% {
            opacity: 1;
            transform: translateX(-50%) scale(1.2);
        }
        100% {
            opacity: 0;
            transform: translateX(-50%) scale(1.5);
        }
    }
    
    /* Meteor trail (자취) 모바일 버전 */
    .meteor-trail {
        /* 원본보다 짧은 trail */
        width: 100px !important;  /* 원본: 150px */
        height: 2px !important;
        background: linear-gradient(to left,
            transparent,
            rgba(255, 255, 255, 0.3),
            rgba(255, 255, 255, 0.6),
            rgba(255, 255, 255, 0.3),
            transparent) !important;
    }
    
    .cosmic-dust:nth-child(n+6) {
        display: none !important; /* cosmic dust 감소 */
    }
    
    /* --------------------------------
       Animation Optimizations
       품질은 유지하되 GPU 부하 감소
       -------------------------------- */
    * {
        /* 애니메이션 속도는 모두 원본 유지 - 시간 조정 완전 제거 */
        /* animation-duration과 animation-delay는 건드리지 않음 */
        
        /* will-change를 자동 관리로 변경 */
        will-change: auto !important;
        
        /* 3D transforms 비활성화 */
        transform-style: flat !important;
        perspective: none !important;
    }
    
    /* 모든 애니메이션 원본 타이밍 유지 - 조정 제거 */
    /* 시간 관련 설정은 완전히 제거하여 원본 타이밍 사용 */
    
    /* --------------------------------
       Shadow Simplification
       복잡한 그림자를 단순화 (모양은 유지)
       -------------------------------- */
    .card,
    .pipeline-card,
    .moa-phase-card {
        /* 복잡한 다중 그림자를 단순한 단일 그림자로 */
        box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
    }
    
    .btn,
    .cta-button {
        box-shadow: 0 2px 4px rgba(0,0,0,0.15) !important;
    }
    
    /* --------------------------------
       Hover Effects Removal
       모바일에서는 hover 효과 제거
       -------------------------------- */
    *:hover {
        transform: none !important;
    }
    
    .nav-link:hover::after,
    .card:hover,
    .pipeline-card:hover {
        transform: translateY(0) !important;
    }
    
    /* --------------------------------
       Blur Effects Reduction
       Backdrop blur 단순화
       -------------------------------- */
    nav,
    .mobile-menu-overlay,
    .modal-overlay {
        backdrop-filter: blur(10px) !important; /* 20px → 10px */
        -webkit-backdrop-filter: blur(10px) !important;
    }
    
    /* --------------------------------
       Transform Simplification
       3D → 2D 변환
       -------------------------------- */
    .star,
    .particle,
    .floating-element {
        transform: translate(var(--x), var(--y)) !important; /* 3D 제거 */
    }
    
    /* --------------------------------
       Animation Pause for Off-screen
       화면 밖 애니메이션 일시정지
       -------------------------------- */
    .particle:not(.in-viewport),
    .star:not(.in-viewport) {
        animation-play-state: paused !important;
    }
    
    /* --------------------------------
       Font Rendering Optimization
       -------------------------------- */
    body {
        text-rendering: optimizeSpeed !important;
        -webkit-font-smoothing: subpixel-antialiased !important;
    }
    
    /* --------------------------------
       Image Optimization
       -------------------------------- */
    img {
        image-rendering: -webkit-optimize-contrast !important;
        image-rendering: crisp-edges !important;
    }
}

/* ================================
   BATTERY SAVER MODE
   사용자가 배터리 절약 모드 설정 시
   ================================ */
@media (prefers-reduced-motion: reduce) {
    /* 모든 애니메이션 즉시 종료 */
    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
    }
    
    /* Transform 제거 */
    * {
        transform: none !important;
    }
    
    /* 배경 효과 제거 */
    .star,
    .meteor,
    .particle,
    .cosmic-dust {
        display: none !important;
    }
    
    /* Blur 효과 제거 */
    * {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        filter: none !important;
    }
}

/* ================================
   TABLET OPTIMIZATIONS
   768px - 1024px devices
   ================================ */
@media (min-width: 769px) and (max-width: 1024px) {
    /* Particle reduction for tablets */
    .star:nth-child(n+21) {
        display: none !important; /* 30개 → 20개 */
    }
    
    .meteor:nth-child(n+4) {
        display: none !important; /* 5개 → 3개 */
    }
    
    /* Simplified shadows */
    .card {
        box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
    }
}

/* ================================
   LOW-END DEVICE DETECTION
   메모리가 적은 디바이스용
   ================================ */
@media (max-device-memory: 2) {
    /* Aggressive optimization for low-memory devices */
    .star,
    .meteor,
    .cosmic-dust {
        display: none !important;
    }
    
    * {
        animation: none !important;
        transition: opacity 0.3s ease !important;
    }
}

/* ================================
   PERFORMANCE HINTS
   브라우저 렌더링 최적화 힌트
   ================================ */
@supports (contain: layout style paint) {
    .card,
    .pipeline-card,
    .moa-phase-card,
    section {
        contain: layout style paint;
    }
}

@supports (content-visibility: auto) {
    section:not(.in-viewport) {
        content-visibility: auto;
        contain-intrinsic-size: 0 500px; /* 예상 높이 */
    }
}

/* ================================
   GPU LAYER MANAGEMENT
   GPU 레이어 수 제한
   ================================ */
.gpu-layer-optimized {
    /* 필요한 경우에만 GPU 레이어 생성 */
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Remove GPU layers from static elements */
.static-content {
    transform: none !important;
    will-change: auto !important;
}

/* ================================
   PROGRESSIVE ENHANCEMENT
   성능에 따른 점진적 개선
   ================================ */

/* High Performance Mode - 데스크톱 전용 */
@media (min-width: 1025px) and (prefers-reduced-motion: no-preference) {
    /* 데스크톱에서는 모든 효과 활성화 */
    .particle,
    .star,
    .meteor {
        will-change: transform; /* 데스크톱에서만 will-change 사용 */
    }
}

/* ================================
   DEBUG CLASSES (개발용)
   ================================ */
.debug-gpu-layers {
    border: 1px solid red !important;
    background: rgba(255, 0, 0, 0.1) !important;
}

.debug-no-animation {
    animation: none !important;
    transition: none !important;
}