/*
  HomepageWeapon.css — FLUID SCOPED VERSION
  ══════════════════════════════════════════════════════════════════
  3D Carousel styled with dynamic viewport units (vmin, dvh) to 
  ensure perfect scaling and perspective across all devices.
  ══════════════════════════════════════════════════════════════════
*/

:root {
    /* FLUID: dvh adapts dynamically to mobile browser URL bars hiding/showing */
    --carousel-height:         100dvh;
    
    /* FLUID: Perspective shifts based on screen width for a better 3D depth effect on phones */
    --carousel-perspective:    clamp(600px, 90vw, 1200px);
    --carousel-perspective-y:  50%;
    --weapon-section-background-image: url(../assets/HomepageAssets/ArknightsEndfieldLogoMesh.png);
}

/* ── 1. BACKGROUND & SCENE SETUP ── */
#carousel-3D,
#carousel-3D > .carousel-3D {
    background-image: var(--weapon-section-background-image);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

#carousel-3D { background-color: #12121a; }
#carousel-3D > .carousel-3D { min-height: 100%; }

.carousel-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: var(--carousel-height); 
}

.carousel-scene {
    width: 100%;
    /* FLUID: Height dynamically adjusts so buttons are never pushed off-screen */
    height: clamp(50vh, 65dvh, 75vh); 
    perspective: var(--carousel-perspective);
    perspective-origin: 50% var(--carousel-perspective-y);
    position: relative;
}

.carousel-ring {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
}

/* ── 2. THE CARD SIZES ── */
.carousel-card-shell {
    position: absolute;
    left: 50%;
    top: 50%;
    
    /* FLUID MAGIC: vmin ensures the card scales perfectly regardless of landscape or portrait orientation */
    width: clamp(160px, 28vmin, 350px); 
    aspect-ratio: 2 / 3; 
    
    transform: translate(-50%, -50%); 
    transform-style: preserve-3d;
}

/* ── 3. INNER CARD CONTENT ── */
.carousel-card {
    width: 100%;
    height: 100%; 
    /* FLUID: Corner rounding scales with the card size */
    border-radius: clamp(8px, 1.5vmin, 16px);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    cursor: pointer;
    background: transparent; 
}

.carousel-card-content {
    width: 100%;
    height: 100%;
}

.carousel-card-content img {
    width: 100%;
    height: 100%;
    object-fit: contain; 
    display: block;
    /* Added a subtle drop shadow to give the 3D transparent weapon PNGs depth! */
    filter: drop-shadow(0 20px 30px rgba(0,0,0,0.5));
}

/* ── 4. INDICATOR DOTS ── */
.carousel-indicator-dots {
    position: relative;
    z-index: 9999;
    display: flex;
    /* FLUID: Spacing and sizing adjust automatically */
    gap: clamp(6px, 1vw, 10px);
    flex-wrap: wrap;
    justify-content: center;
    margin-top: clamp(10px, 2vh, 20px);
}

.carousel-dot {
    width: clamp(6px, 1.5vw, 10px);
    height: clamp(6px, 1.5vw, 10px);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transition: background 0.3s, transform 0.3s;
    cursor: pointer;
}

.carousel-dot--active {
    background: #00e5c0;
    transform: scale(1.4);
}

/* ── 5. NAVIGATION CONTROLS ── */
.carousel-controls {
    position: relative;
    z-index: 9999;
    display: flex;
    gap: clamp(16px, 3vw, 30px);
    align-items: center;
    margin-top: clamp(16px, 3vh, 30px);
}

.carousel-arrow-button {
    /* FLUID: Buttons are slightly smaller on phones, larger on desktops */
    width: clamp(40px, 5vw, 54px);
    height: clamp(40px, 5vw, 54px);
    border-radius: 50%;
    border: 1px solid rgba(0, 229, 192, 0.4);
    background: rgba(0, 229, 192, 0.1);
    color: #00e5c0;
    font-size: clamp(18px, 2vw, 24px);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    backdrop-filter: blur(4px);
}

.carousel-arrow-button:hover { 
    background: #00e5c0; 
    color: #000;
    box-shadow: 0 0 15px rgba(0, 229, 192, 0.4);
}

.carousel-arrow-button:active { transform: scale(0.92); }

/* ═══════════════════════════════════════════════
   DESKTOP OPTIMIZATION — WEAPON 3D CAROUSEL
═══════════════════════════════════════════════ */

@media screen and (min-width:769px) {
    /* 1. Flatten the extreme "fisheye" 3D distortion on desktop */
    #carousel-3D {
        perspective: 100px !important; 
        overflow: hidden;
    }

    /* 2. Zoom the desktop camera out by 35% */
    .carousel-scene {
        /* Adjust this 0.65 up or down to find the perfect size for your laptop */
        transform: scale(0.65) !important; 
        transform-origin: center center !important;
    }
}

/* ═══════════════════════════════════════════════
   MOBILE OPTIMIZATION — WEAPON 3D CAROUSEL
═══════════════════════════════════════════════ */
@media screen and (max-width: 768px) {
    /* 1. The Main Container */
    #carousel-3D {
        overflow: hidden !important;
        width: 100vw !important;
        height: 60vh !important; 
        min-height: 450px !important;
        padding: 0 !important;
        position: relative !important; 
    }

    /* 2. THE MISSING LINK: Force the inner div to pass the height down */
    .carousel-3D {
        width: 100% !important;
        height: 100% !important;
        position: relative !important;
    }

    /* 3. The Wrapper (Now has actual space to push buttons to the bottom!) */
    .carousel-wrapper {
        position: relative !important;
        width: 100% !important;
        height: 100% !important; 
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-end !important; /* Pushes buttons to the bottom */
        align-items: center !important;
        padding-bottom: 30px !important; 
        perspective: 2000px !important; 
    }

    /* 4. The 3D Scene (Absolutely Centered) */
    .carousel-scene {
        position: absolute !important;
        top: 45% !important; 
        left: 50% !important;
        transform: translate(-50%, -50%) scale(0.22) !important; 
        transform-origin: center center !important;
        margin: 0 !important; 
        z-index: 1 !important;
    }

    /* 5. The Controls (Absolutely Pinned to the Bottom Center) */
    .carousel-indicator-dots {
        position: absolute !important;
        bottom: 70px !important; /* Distance from the bottom of the section */
        left: 50% !important;
        transform: translateX(-50%) !important; /* Guarantees true dead-center */
        margin: 0 !important;
        z-index: 10 !important;
        display: flex !important;
        justify-content: center !important;
        width: 100% !important;
    }

    .carousel-controls {
        position: absolute !important;
        bottom: 20px !important; /* Pinned safely right above the footer */
        left: 50% !important;
        transform: translateX(-50%) !important; /* Guarantees true dead-center */
        margin: 0 !important;
        z-index: 10 !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 40px !important; /* Perfect spacing between < and > arrows */
        width: 100% !important;
    }
}