/* 3D Scene Styles */
.hero-3d-canvas-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

#hero3dContainer canvas {
    width: 100%;
    height: 100%;
    display: block;
}

.card-3d-inner {
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.card-layer-content {
    transform: translateZ(25px);
}

.card-layer-pop {
    transform: translateZ(45px);
}

.glare-card {
    position: relative;
    overflow: hidden;
}

.glare-effect {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background: radial-gradient(circle 200px at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 80%);
    opacity: 0;
    transition: opacity 0.3s ease;
    border-radius: inherit;
    z-index: 10;
}

.glare-card:hover .glare-effect {
    opacity: 1;
}

.stage-3d-wrapper {
    perspective: 1200px;
    margin-bottom: 20px;
}

.stage-3d-pedestal {
    position: relative;
    background: linear-gradient(135deg, rgba(7, 53, 94, 0.95), rgba(11, 79, 138, 0.95));
    border-radius: var(--radius-xl);
    padding: 24px;
    border: 1px solid rgba(0, 180, 216, 0.3);
    box-shadow: 0 25px 50px -12px rgba(11, 79, 138, 0.35), 0 0 30px rgba(0, 180, 216, 0.15);
    transform: rotateX(8deg) rotateY(-4deg);
    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.5s ease;
    transform-style: preserve-3d;
}

.stage-3d-pedestal:hover {
    transform: rotateX(0deg) rotateY(0deg) translateY(-10px) scale(1.02);
    box-shadow: 0 35px 70px -15px rgba(11, 79, 138, 0.5), 0 0 45px rgba(0, 180, 216, 0.3);
    border-color: var(--accent-color);
}

.stage-3d-image-box {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    aspect-ratio: 16/10;
    background: radial-gradient(circle at 50% 50%, #0a3a66 0%, #041c33 100%);
    border: 2px dashed rgba(255, 255, 255, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateZ(30px);
}

.stage-3d-image-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.coverflow-container {
    perspective: 1400px;
    position: relative;
    max-width: 1100px;
    margin: 0 auto;
    padding: 30px 0;
    min-height: 520px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.coverflow-deck {
    position: relative;
    width: 100%;
    height: 490px;
    display: flex;
    justify-content: center;
    align-items: center;
    transform-style: preserve-3d;
}

.coverflow-item {
    position: absolute;
    width: 360px;
    max-width: 90vw;
    transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    transform-style: preserve-3d;
    cursor: pointer;
    user-select: none;
}

.coverflow-item.pos-left-2 {
    transform: translateX(-420px) translateZ(-250px) rotateY(35deg);
    opacity: 0.4;
    z-index: 1;
}

.coverflow-item.pos-left-1 {
    transform: translateX(-240px) translateZ(-120px) rotateY(25deg);
    opacity: 0.8;
    z-index: 2;
}

.coverflow-item.pos-center {
    transform: translateX(0px) translateZ(60px) rotateY(0deg);
    opacity: 1;
    z-index: 10;
    box-shadow: 0 30px 60px rgba(11, 79, 138, 0.35);
}

.coverflow-item.pos-right-1 {
    transform: translateX(240px) translateZ(-120px) rotateY(-25deg);
    opacity: 0.8;
    z-index: 2;
}

.coverflow-item.pos-right-2 {
    transform: translateX(420px) translateZ(-250px) rotateY(-35deg);
    opacity: 0.4;
    z-index: 1;
}

.coverflow-nav-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-top: 15px;
}

.coverflow-btn {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--bg-gradient);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    cursor: pointer;
    border: none;
    box-shadow: 0 8px 20px rgba(11, 79, 138, 0.3);
    transition: var(--transition);
}

.coverflow-btn:hover {
    transform: scale(1.15);
    background: var(--accent-color);
}

/* ==========================================================================
   SCROLL-BASED 3D SLIDE & REVEAL ANIMATIONS
   ========================================================================== */

/* Base hidden state */
.scroll-slide-3d {
    opacity: 0;
    transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1), 
                transform 0.85s cubic-bezier(0.16, 1, 0.3, 1),
                filter 0.85s ease;
    will-change: transform, opacity;
}

/* Slide from Left with 3D rotation */
.scroll-slide-3d.from-left {
    transform: perspective(1200px) translateX(-100px) translateY(30px) rotateY(35deg) scale(0.88);
    filter: blur(4px);
}

/* Slide from Right with 3D rotation */
.scroll-slide-3d.from-right {
    transform: perspective(1200px) translateX(100px) translateY(30px) rotateY(-35deg) scale(0.88);
    filter: blur(4px);
}

/* Slide from Bottom with 3D flip */
.scroll-slide-3d.from-bottom {
    transform: perspective(1200px) translateY(80px) rotateX(25deg) scale(0.9);
    filter: blur(4px);
}

/* Revealed Active State */
.scroll-slide-3d.revealed {
    opacity: 1;
    transform: perspective(1200px) translateX(0px) translateY(0px) rotateX(0deg) rotateY(0deg) scale(1);
    filter: blur(0px);
}

/* Stagger Delays for Grid Children */
.stagger-1 { transition-delay: 0.1s; }
.stagger-2 { transition-delay: 0.25s; }
.stagger-3 { transition-delay: 0.4s; }
.stagger-4 { transition-delay: 0.15s; }
.stagger-5 { transition-delay: 0.3s; }
.stagger-6 { transition-delay: 0.45s; }