/* ========================================
   3D回転カルーセル - 確実に表示される版（高速化対応）
======================================== */

/* カルーセルコンテナ */
.carousel-3d-container {
    position: relative;
    width: 100%;
    max-width: 100%;
    height: 500px;
    margin: 20px auto;
    perspective: 1000px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: transparent;
}

/* ローディングインジケーター */
.carousel-3d-container::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    border: 4px solid rgba(124, 92, 255, 0.2);
    border-top-color: #7C5CFF;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    z-index: 10;
    opacity: 1;
    transition: opacity 0.3s ease;
}

/* 画像が読み込まれたらスピナーを非表示 */
.carousel-3d-container.loaded::after {
    opacity: 0;
    pointer-events: none;
}

@keyframes spin {
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* 紫グローリング背景 */
.carousel-3d-container::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(124, 92, 255, 0.15) 0%, transparent 70%);
    border-radius: 50%;
    animation: pulseGlow 4s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}

/* パルスアニメーション */
@keyframes pulseGlow {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.6;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.2);
        opacity: 0.8;
    }
}

/* 回転する円形ステージ */
.carousel-3d-stage {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    animation: autoRotate 18s linear infinite;
    z-index: 1;
}

/* 自動回転アニメーション（18秒で1周） */
@keyframes autoRotate {
    from {
        transform: rotateY(0deg);
    }
    to {
        transform: rotateY(360deg);
    }
}

/* ホバーで一時停止 */
.carousel-3d-container:hover .carousel-3d-stage {
    animation-play-state: paused;
}

/* タッチ中も一時停止（スマホ対応） */
.carousel-3d-container.touching .carousel-3d-stage {
    animation-play-state: paused;
}

/* デバイスアイテム */
.carousel-device {
    position: absolute;
    left: 50%;
    top: 50%;
    transform-style: preserve-3d;
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.3));
}

/* 45°間隔で配置（8枚・両面表示）- スマホでも見える距離 */
.carousel-device:nth-child(1) {
    transform: translate(-50%, -50%) rotateY(0deg) translateZ(300px);
}

.carousel-device:nth-child(2) {
    transform: translate(-50%, -50%) rotateY(45deg) translateZ(300px);
}

.carousel-device:nth-child(3) {
    transform: translate(-50%, -50%) rotateY(90deg) translateZ(300px);
}

.carousel-device:nth-child(4) {
    transform: translate(-50%, -50%) rotateY(135deg) translateZ(300px);
}

.carousel-device:nth-child(5) {
    transform: translate(-50%, -50%) rotateY(180deg) translateZ(300px);
}

.carousel-device:nth-child(6) {
    transform: translate(-50%, -50%) rotateY(225deg) translateZ(300px);
}

.carousel-device:nth-child(7) {
    transform: translate(-50%, -50%) rotateY(270deg) translateZ(300px);
}

.carousel-device:nth-child(8) {
    transform: translate(-50%, -50%) rotateY(315deg) translateZ(300px);
}

/* デバイス画像（フレーム込み） */
.device-image {
    max-width: 350px;
    width: 100%;
    height: auto;
    display: block;
    backface-visibility: hidden;
}

/* iPhone画像を同サイズに */
.carousel-device:nth-child(3) .device-image,
.carousel-device:nth-child(4) .device-image,
.carousel-device:nth-child(7) .device-image,
.carousel-device:nth-child(8) .device-image {
    max-width: 350px;
}

/* カルーセルナビゲーション（非表示：自動回転のため） */
.carousel-3d-nav {
    display: none;
}

/* カルーセルインジケーター（非表示：自動回転のため） */
.carousel-3d-indicators {
    display: none;
}

/* パフォーマンス最適化 */
.carousel-3d-stage,
.carousel-device {
    will-change: transform;
}

.carousel-device {
    will-change: transform, filter;
}

/* レスポンシブ対応 - タブレット */
@media (max-width: 1024px) {
    .carousel-3d-container {
        height: 450px;
        perspective: 900px;
    }
    
    .carousel-3d-container::before {
        width: 500px;
        height: 500px;
    }
    
    .device-image {
        max-width: 320px;
    }
    
    .carousel-device:nth-child(3) .device-image,
    .carousel-device:nth-child(4) .device-image,
    .carousel-device:nth-child(7) .device-image,
    .carousel-device:nth-child(8) .device-image {
        max-width: 320px;
    }
    
    .carousel-device:nth-child(1) {
        transform: translate(-50%, -50%) rotateY(0deg) translateZ(280px);
    }
    
    .carousel-device:nth-child(2) {
        transform: translate(-50%, -50%) rotateY(45deg) translateZ(280px);
    }
    
    .carousel-device:nth-child(3) {
        transform: translate(-50%, -50%) rotateY(90deg) translateZ(280px);
    }
    
    .carousel-device:nth-child(4) {
        transform: translate(-50%, -50%) rotateY(135deg) translateZ(280px);
    }
    
    .carousel-device:nth-child(5) {
        transform: translate(-50%, -50%) rotateY(180deg) translateZ(280px);
    }
    
    .carousel-device:nth-child(6) {
        transform: translate(-50%, -50%) rotateY(225deg) translateZ(280px);
    }
    
    .carousel-device:nth-child(7) {
        transform: translate(-50%, -50%) rotateY(270deg) translateZ(280px);
    }
    
    .carousel-device:nth-child(8) {
        transform: translate(-50%, -50%) rotateY(315deg) translateZ(280px);
    }
}

/* レスポンシブ対応 - スマホ */
@media (max-width: 768px) {
    .carousel-3d-container {
        height: 400px;
        perspective: 800px;
        margin: 15px auto;
    }
    
    .carousel-3d-container::before {
        width: 400px;
        height: 400px;
    }
    
    .device-image {
        max-width: 280px;
    }
    
    .carousel-device:nth-child(3) .device-image,
    .carousel-device:nth-child(4) .device-image,
    .carousel-device:nth-child(7) .device-image,
    .carousel-device:nth-child(8) .device-image {
        max-width: 280px;
    }
    
    .carousel-device:nth-child(1) {
        transform: translate(-50%, -50%) rotateY(0deg) translateZ(250px);
    }
    
    .carousel-device:nth-child(2) {
        transform: translate(-50%, -50%) rotateY(45deg) translateZ(250px);
    }
    
    .carousel-device:nth-child(3) {
        transform: translate(-50%, -50%) rotateY(90deg) translateZ(250px);
    }
    
    .carousel-device:nth-child(4) {
        transform: translate(-50%, -50%) rotateY(135deg) translateZ(250px);
    }
    
    .carousel-device:nth-child(5) {
        transform: translate(-50%, -50%) rotateY(180deg) translateZ(250px);
    }
    
    .carousel-device:nth-child(6) {
        transform: translate(-50%, -50%) rotateY(225deg) translateZ(250px);
    }
    
    .carousel-device:nth-child(7) {
        transform: translate(-50%, -50%) rotateY(270deg) translateZ(250px);
    }
    
    .carousel-device:nth-child(8) {
        transform: translate(-50%, -50%) rotateY(315deg) translateZ(250px);
    }
}

/* レスポンシブ対応 - 小型スマホ */
@media (max-width: 480px) {
    .carousel-3d-container {
        height: 350px;
        perspective: 700px;
        margin: 10px auto;
    }
    
    .carousel-3d-container::before {
        width: 300px;
        height: 300px;
    }
    
    .device-image {
        max-width: 220px;
    }
    
    .carousel-device:nth-child(3) .device-image,
    .carousel-device:nth-child(4) .device-image,
    .carousel-device:nth-child(7) .device-image,
    .carousel-device:nth-child(8) .device-image {
        max-width: 220px;
    }
    
    .carousel-device:nth-child(1) {
        transform: translate(-50%, -50%) rotateY(0deg) translateZ(200px);
    }
    
    .carousel-device:nth-child(2) {
        transform: translate(-50%, -50%) rotateY(45deg) translateZ(200px);
    }
    
    .carousel-device:nth-child(3) {
        transform: translate(-50%, -50%) rotateY(90deg) translateZ(200px);
    }
    
    .carousel-device:nth-child(4) {
        transform: translate(-50%, -50%) rotateY(135deg) translateZ(200px);
    }
    
    .carousel-device:nth-child(5) {
        transform: translate(-50%, -50%) rotateY(180deg) translateZ(200px);
    }
    
    .carousel-device:nth-child(6) {
        transform: translate(-50%, -50%) rotateY(225deg) translateZ(200px);
    }
    
    .carousel-device:nth-child(7) {
        transform: translate(-50%, -50%) rotateY(270deg) translateZ(200px);
    }
    
    .carousel-device:nth-child(8) {
        transform: translate(-50%, -50%) rotateY(315deg) translateZ(200px);
    }
}