/* ==========================================================================
   1. VIEWPORT & CONTAINER
   ========================================================================== */
.gallery-3d-viewport {
    perspective: 800px !important;
    perspective-origin: 50% 50% !important;
    width: 100% !important;
    height: 88vh !important;
    min-height: 580px !important;
    position: relative !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    touch-action: none !important;
    background: transparent !important;
}

/* ==========================================================================
   2. DESKTOP SPLIT LAYOUT (LEFT: Dynamic Title | RIGHT: Static Motion Text)
   ========================================================================== */

/* Left Side: Active Card Title */
.gallery-active-title {
    position: absolute !important;
    left: 5vw !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: clamp(2.2rem, 4.5vw, 4rem) !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: -0.03em !important;
    color: #ffffff !important;
    z-index: 10 !important;
    pointer-events: none !important;
    white-space: nowrap !important;
}

/* Right Side: Static "Motion" Label */
.gallery-static-label {
    position: absolute !important;
    right: 5vw !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-family: serif, 'Times New Roman', Georgia, serif !important;
    font-size: clamp(2rem, 3.8vw, 3.5rem) !important;
    font-style: italic !important;
    color: #ffffff !important;
    opacity: 0.9 !important;
    z-index: 10 !important;
    pointer-events: none !important;
}

/* ==========================================================================
   3. CENTER COLUMN: CARDS (BIGGER CARD SIZING)
   ========================================================================== */
.gallery-3d-wrapper {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transform-style: preserve-3d !important;
}

/* Prevent any internal text from cluttering the card inside */
.gallery-3d-item * {
    pointer-events: none !important;
}

.gallery-3d-item h1, 
.gallery-3d-item h2, 
.gallery-3d-item h3, 
.gallery-3d-item h4, 
.gallery-3d-item p, 
.gallery-3d-item .title {
    display: none !important;
}

.gallery-3d-item {
    position: absolute !important;
    /* Larger Card Width */
    width: clamp(380px, 58vw, 880px) !important;
    aspect-ratio: 16 / 9 !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;

    /* GPU Hardware Acceleration */
    transform-style: preserve-3d !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
    will-change: transform, opacity !important;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.8) !important;
}

.gallery-3d-item img,
.gallery-3d-item video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    border: none !important;
}

/* ==========================================================================
   4. MOBILE & IPAD RESPONSIVE (<= 1024px)
   Reordered Top-to-Bottom:
   1. TOP: "Motion" Static Text
   2. CENTER: Cards
   3. BOTTOM: Dynamic Card Title
   ========================================================================== */
@media (max-width: 1024px) {
    .gallery-3d-viewport {
        height: 82vh !important;
        padding-top: 50px !important;
        padding-bottom: 50px !important;
    }

    /* 1. TOP: Static "Motion" Text */
    .gallery-static-label {
        top: 25px !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        font-size: clamp(1.5rem, 4vw, 2.2rem) !important;
        text-align: center !important;
    }

    /* 2. CENTER: Responsive Cards */
    .gallery-3d-item {
        width: 88vw !important;
    }

    /* 3. BOTTOM: Dynamic Card Title */
    .gallery-active-title {
        top: auto !important;
        bottom: 25px !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        font-size: clamp(1.4rem, 5vw, 2.2rem) !important;
        text-align: center !important;
        white-space: normal !important;
    }
}