/* ==========================================================================
   SAHANA SABHA - SPATIAL 3D & CAMERA SCROLL ENGINE
   Level 100 Spatial Depth, 3D Camera Angles, Holographic Tilt & Cylindrical Drum
   ========================================================================== */

:root {
    --camera-pitch: 0deg;
    --camera-yaw: 0deg;
    --camera-zoom: 1;
    --sabha-gold: #FFCA65;
    --sabha-amber: #F29B48;
    --sabha-coral: #FF7844;
    --sabha-teal: #0EA5E9;
    --sabha-magenta: #D946EF;
}

/* ==========================================================================
   1. 3D CAMERA SCROLL VIEWPORT FOR HERO INTRO TRACK
   ========================================================================== */
.video-sticky-stage {
    perspective: 1300px !important;
    perspective-origin: 50% 50% !important;
    transform-style: preserve-3d !important;
    overflow: hidden;
}

#bgJourneyCanvas {
    transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
    transform-style: preserve-3d;
    will-change: transform;
}

/* 3D Camera Angles for Intro Scenes */
.video-overlay-layer {
    transform-style: preserve-3d;
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Scene 1 Hero Cluster 3D Depth */
#vScene1 .hero-cluster {
    transform-style: preserve-3d;
    will-change: transform;
}

#vScene1 .hero-gradient-title {
    transform: translateZ(40px);
    text-shadow: 0 15px 35px rgba(0, 0, 0, 0.85), 0 0 45px rgba(255, 202, 101, 0.25);
}

#vScene1 .hero-lower-cluster {
    transform: translateZ(25px);
}

/* Scene 2A & 2B: Spatial Amphitheater Wing Tilt */
#vScene2A .scenic-top-block,
#vScene2B .scenic-top-block {
    transform: translateZ(35px);
}

#vScene2A .scenic-wing-left,
#vScene2B .scenic-wing-left {
    transform: perspective(1000px) rotateY(14deg) rotateX(-2deg) translateZ(25px);
    transform-origin: right center;
    box-shadow: 20px 20px 50px rgba(0, 0, 0, 0.8), -5px 0 25px rgba(255, 202, 101, 0.12);
    transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.3s ease;
}

#vScene2A .scenic-wing-right,
#vScene2B .scenic-wing-right {
    transform: perspective(1000px) rotateY(-14deg) rotateX(-2deg) translateZ(25px);
    transform-origin: left center;
    box-shadow: -20px 20px 50px rgba(0, 0, 0, 0.8), 5px 0 25px rgba(255, 120, 68, 0.12);
    transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.3s ease;
}

#vScene2A .scenic-wing-left:hover {
    transform: perspective(1000px) rotateY(6deg) rotateX(0deg) translateZ(45px);
}

#vScene2A .scenic-wing-right:hover {
    transform: perspective(1000px) rotateY(-6deg) rotateX(0deg) translateZ(45px);
}

/* Scene 3: Pedestal 3D Flank */
#vScene3 .wing-card:first-child {
    transform: perspective(1000px) rotateY(16deg) translateZ(20px);
    transform-origin: right center;
}

#vScene3 .wing-card:last-child {
    transform: perspective(1000px) rotateY(-16deg) translateZ(20px);
    transform-origin: left center;
}

@media (max-width: 899px) {
    #vScene3 .wing-card,
    #vScene3 .wing-card:first-child,
    #vScene3 .wing-card:last-child {
        transform: none !important;
        transform-origin: center center !important;
    }

    .scenic-wing-left,
    .scenic-wing-right {
        transform: none !important;
    }

    .tilt-card-3d {
        transform: none !important;
    }

    .drum-item-3d {
        width: 140px !important;
        height: 120px !important;
        padding: 12px 10px !important;
    }

    .drum-rotor-cylinder {
        height: 150px !important;
    }
}

/* ==========================================================================
   2. INTERACTIVE 3D HOLOGRAPHIC TILT ON CARDS
   ========================================================================== */
.tilt-card-3d {
    transform-style: preserve-3d;
    perspective: 1000px;
    position: relative;
    overflow: hidden;
    will-change: transform, box-shadow;
    transition: transform 0.16s ease-out, box-shadow 0.25s ease, border-color 0.25s ease;
}

/* Specular Glare Sheen */
.tilt-card-3d::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    background: radial-gradient(circle 380px at var(--mouse-x, 50%) var(--mouse-y, 50%), 
        rgba(255, 202, 101, 0.35) 0%, 
        rgba(255, 120, 68, 0.14) 40%, 
        transparent 70%);
    opacity: 0;
    transition: opacity 0.3s ease;
    mix-blend-mode: screen;
    z-index: 5;
}

.tilt-card-3d:hover::after {
    opacity: 1;
}

/* 3D Elevated Child Elements */
.tilt-card-3d .tilt-elevate-high {
    transform: translateZ(36px);
    transform-style: preserve-3d;
}

.tilt-card-3d .tilt-elevate-mid {
    transform: translateZ(20px);
    transform-style: preserve-3d;
}

.tilt-card-3d:hover {
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.75), 0 0 35px rgba(255, 202, 101, 0.2) !important;
}

/* ==========================================================================
   4. 3D CYLINDRICAL ROLLING DRUM FOR THE 23 TOOLS
   ========================================================================== */
.drum-rotor-3d-stage {
    position: relative;
    perspective: 1200px;
    perspective-origin: 50% 50%;
    transform-style: preserve-3d;
    padding: 30px 0 10px;
    overflow: visible;
}

.drum-rotor-cylinder {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 180px;
    transform-style: preserve-3d;
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
    will-change: transform;
}

.drum-item-3d {
    position: absolute;
    width: 170px;
    height: 140px;
    padding: 16px 14px;
    box-sizing: border-box;
    background: rgba(18, 24, 38, 0.88);
    border: 1px solid rgba(255, 202, 101, 0.25);
    border-radius: 20px;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    cursor: pointer;
    transform-style: preserve-3d;
    transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), 
                box-shadow 0.3s ease, 
                border-color 0.3s ease, 
                opacity 0.35s ease,
                filter 0.35s ease;
    user-select: none;
}

.drum-item-3d .drum-icon {
    font-size: 34px;
    margin-bottom: 8px;
    color: var(--drum-accent, #FFCA65);
    transition: transform 0.3s ease;
}

.drum-item-3d .drum-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 13.5px;
    font-weight: 700;
    color: #FFFFFF;
    margin: 0 0 4px 0;
    line-height: 1.2;
}

.drum-item-3d .drum-badge {
    font-family: 'Space Mono', monospace;
    font-size: 9.5px;
    font-weight: 700;
    color: var(--drum-accent, #FFCA65);
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

/* Active Forward Face in 3D Cylinder */
.drum-item-3d.active-front {
    background: linear-gradient(135deg, rgba(26, 35, 54, 0.98), rgba(18, 24, 38, 0.98));
    border-color: var(--drum-accent, #FFCA65);
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.8), 0 0 35px var(--drum-glow, rgba(255, 202, 101, 0.45));
    opacity: 1 !important;
    filter: blur(0px) !important;
    z-index: 10;
}

.drum-item-3d.active-front .drum-icon {
    transform: scale(1.15) translateZ(15px);
}

.drum-item-3d:not(.active-front) {
    opacity: 0.65;
    filter: blur(0.5px);
}

.drum-item-3d:hover {
    border-color: var(--drum-accent, #FFCA65);
    opacity: 0.95;
    filter: blur(0px);
}

/* 3D Drum Navigation Controls */
.drum-controls-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 18px;
}

.drum-nav-btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(18, 24, 38, 0.9);
    border: 1px solid rgba(255, 202, 101, 0.3);
    color: var(--sabha-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}

.drum-nav-btn:hover {
    background: var(--gradient-gold, linear-gradient(135deg, #FFCA65 0%, #F29B48 45%, #FF7844 85%, #E65A28 100%));
    color: #120803;
    border-color: transparent;
    transform: scale(1.1);
    box-shadow: 0 8px 24px rgba(230, 90, 40, 0.5);
}