/* 
 * パフォーマンス最適化CSS (Issue #81)
 * 美しさを90%維持しながら性能を改善
 */

/* =====================================
   Phase 1: 無限ループアニメーションの制御
   ===================================== */

/* 無限ループアニメーションを制御 */
.ripple,
.inoo-ripple,
.footer-shooting-star,
.starfield-background,
.milky-way,
.shooting-star {
    animation: none !important;
}

/* 南十字星は除外（footerTwinkleアニメーションを許可） */
.footer-star {
    /* アニメーションは維持 */
}

/* プロフィールページの装飾アニメーションも制限 */
.profile-page::before {
    animation-duration: 60s !important; /* 30s → 60s でさらに遅く */
}

.profile-content::before {
    animation: none !important; /* auroraShiftを停止 */
}

/* ビューポート内に入ったら動作 */
.profile-page.in-view::before,
.profile-content.in-view::before {
    animation-play-state: running !important;
}

/* 長時間アニメーションの速度調整 */
.ripple {
    animation-duration: 8s !important; /* 6s → 8s */
}

.inoo-ripple {
    animation-duration: 16s !important; /* 12s → 16s */
}

.footer-shooting-star {
    animation-iteration-count: 3 !important; /* 無限ループを3回に制限 */
}

/* =====================================
   Phase 2: GPU最適化
   ===================================== */

/* 重要な要素にGPUレイヤーを明示的に割り当て */
.profile-content,
.profile-image-wrapper,
.profile-card {
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
}

/* will-changeは必要時のみ */
.profile-image-wrapper {
    will-change: auto;
}

.profile-image-wrapper:hover {
    will-change: transform;
}

/* =====================================
   Phase 3: トランジションの最適化
   ===================================== */

/* transition: all を具体的に */
.profile-image {
    transition: transform 0.6s cubic-bezier(0.23, 1, 0.320, 1),
                box-shadow 0.6s cubic-bezier(0.23, 1, 0.320, 1),
                filter 0.6s cubic-bezier(0.23, 1, 0.320, 1) !important;
}

.profile-lead {
    transition: transform 0.4s cubic-bezier(0.23, 1, 0.320, 1),
                box-shadow 0.4s cubic-bezier(0.23, 1, 0.320, 1) !important;
}

.profile-links a {
    transition: color 0.3s ease,
                background 0.3s ease,
                transform 0.3s ease,
                box-shadow 0.3s ease !important;
}

/* =====================================
   Phase 4: レスポンシブ最適化
   ===================================== */

/* モバイルでは装飾的アニメーションを削減 */
@media (max-width: 768px) {
    .profile-page::before,
    .profile-content::before,
    .profile-content::after {
        display: none !important;
    }
    
    /* アニメーション時間を短縮 */
    * {
        animation-duration: 0.5s !important;
    }
    
    /* backdrop-filterを無効化 */
    .profile-content {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: rgba(255, 255, 255, 0.98) !important;
    }
    
    /* SNSアイコンは透明背景を維持 */
    .social-icon-wrapper {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: rgba(0, 0, 0, 0.3) !important; /* 半透明の黒背景 */
    }
}

/* =====================================
   Phase 5: prefers-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;
    }
    
    /* 装飾的要素を非表示 */
    .profile-page::before,
    .profile-content::before,
    .ripple,
    .shooting-star {
        display: none !important;
    }
}

/* =====================================
   Phase 6: 高解像度ディスプレイ最適化
   ===================================== */

@media (-webkit-min-device-pixel-ratio: 2) and (min-width: 1440px) {
    /* Retinaディスプレイでは複雑なエフェクトを調整 */
    .profile-content {
        box-shadow: 
            0 15px 30px rgba(142, 238, 231, 0.1),
            0 5px 15px rgba(31, 38, 135, 0.05) !important;
    }
    
    .profile-image {
        box-shadow: 
            0 12px 25px rgba(120, 119, 198, 0.1),
            0 0 40px rgba(142,238,231,0.08) !important;
    }
}