/* ============================================
   VARIANT B: 3D Scroll Cinema
   Scroll-driven 3D transforms, cinematic
   perspective-based section reveals
   ============================================ */

/* Global 3D context */
.cinema-3d {
    perspective: 1200px;
    perspective-origin: 50% 50%;
}

/* Override default reveal for 3D transforms */
.cinema-3d .reveal {
    opacity: 0;
    transition: all 1s var(--ease-out);
    transform-style: preserve-3d;
    will-change: transform, opacity;
}

.cinema-3d .reveal.active {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotateX(0deg) rotateY(0deg) scale(1) !important;
}

/* 3D reveal types */
.cinema-3d .reveal[data-3d="flip-up"] {
    transform: perspective(800px) rotateX(15deg) translateY(60px) scale(0.95);
    transform-origin: center bottom;
}

.cinema-3d .reveal[data-3d="flip-left"] {
    transform: perspective(800px) rotateY(12deg) translateX(-40px) scale(0.97);
    transform-origin: left center;
}

.cinema-3d .reveal[data-3d="flip-right"] {
    transform: perspective(800px) rotateY(-12deg) translateX(40px) scale(0.97);
    transform-origin: right center;
}

.cinema-3d .reveal[data-3d="zoom"] {
    transform: perspective(800px) translateZ(-100px) scale(0.9);
}

.cinema-3d .reveal[data-3d="tilt"] {
    transform: perspective(800px) rotateX(8deg) rotateY(-5deg) translateY(30px);
}

/* Cinematic hero entrance - visual first, text after */
.cinema-3d .hero-visual {
    animation: cinemaHeroVisual 1.2s var(--ease-out) forwards;
    opacity: 0;
}

@keyframes cinemaHeroVisual {
    0% {
        opacity: 0;
        transform: perspective(800px) translateZ(-80px) scale(0.9);
    }
    100% {
        opacity: 1;
        transform: perspective(800px) translateZ(0) scale(1);
    }
}

.cinema-3d .hero-text {
    animation: cinemaHeroText 1.2s var(--ease-out) 0.3s forwards;
    opacity: 0;
}

@keyframes cinemaHeroText {
    0% {
        opacity: 0;
        transform: perspective(800px) translateY(40px) translateZ(-30px);
    }
    100% {
        opacity: 1;
        transform: perspective(800px) translateY(0) translateZ(0);
    }
}

/* 3D tilt on hover for all glass cards */
.cinema-3d .feature-card,
.cinema-3d .sector-card,
.cinema-3d .division-card,
.cinema-3d .partner-card,
.cinema-3d .solution-card,
.cinema-3d .solution-featured,
.cinema-3d .contact-form,
.cinema-3d .solution-link,
.cinema-3d .app-card {
    transform-style: preserve-3d;
    will-change: transform;
    transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out), background 0.5s var(--ease-out), border-color 0.5s var(--ease-out);
}

/* Depth layers inside cards */
.cinema-3d .feature-icon,
.cinema-3d .sector-icon,
.cinema-3d .division-icon {
    transform: translateZ(20px);
    transition: transform 0.4s var(--ease-spring);
}

.cinema-3d .feature-title,
.cinema-3d .sector-name,
.cinema-3d .division-name {
    transform: translateZ(10px);
}

.cinema-3d .feature-card:hover .feature-icon,
.cinema-3d .sector-card:hover .sector-icon,
.cinema-3d .division-card:hover .division-icon {
    transform: translateZ(35px) scale(1.1);
}

/* Section title cinematic entrance */
.cinema-3d .section-title {
    transform-style: preserve-3d;
}

.cinema-3d .section-header.reveal.active .section-title {
    animation: titleZoom 0.9s var(--ease-out) forwards;
}

@keyframes titleZoom {
    from {
        transform: perspective(600px) translateZ(-30px);
        opacity: 0.6;
    }
    to {
        transform: perspective(600px) translateZ(0);
        opacity: 1;
    }
}

/* Scroll-driven nav depth */
.cinema-3d .nav.scrolled {
    box-shadow:
        0 4px 12px var(--shadow-dark),
        0 12px 40px var(--shadow-light);
    transform: translateX(-50%) translateZ(10px);
}

/* Parent card 3D glow */
.cinema-3d .parent-card {
    transform-style: preserve-3d;
}

.cinema-3d .parent-card:hover {
    transform: perspective(600px) rotateX(2deg) translateZ(10px);
    box-shadow:
        0 8px 32px var(--glow-color-subtle),
        0 24px 64px var(--shadow-light);
}

/* Contact section 3D split */
.cinema-3d .contact-grid {
    transform-style: preserve-3d;
}

.cinema-3d .contact-info {
    transition: transform 0.6s var(--ease-out);
}

.cinema-3d .contact-info:hover {
    transform: perspective(600px) rotateY(2deg) translateZ(5px);
}

.cinema-3d .contact-form:hover {
    transform: perspective(600px) rotateY(-2deg) translateZ(5px);
}

/* Scroll progress - subtle side rail */
.scroll-rail {
    position: fixed;
    right: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 120px;
    background: var(--gray-800);
    border-radius: 3px;
    z-index: 9998;
    overflow: hidden;
}

.scroll-rail-fill {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, var(--pit-400), var(--pit-600));
    border-radius: 3px;
    transition: height 0.15s linear;
    will-change: height;
}

/* Sector carousel 3D perspective */
.cinema-3d .sectors-track {
    perspective: 1000px;
}

.cinema-3d .sector-card {
    transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out), background 0.5s var(--ease-out), border-color 0.5s var(--ease-out);
}

.cinema-3d .sector-card:hover {
    transform: perspective(600px) rotateY(-3deg) translateZ(15px) scale(1.02);
    box-shadow:
        0 12px 40px var(--shadow-dark),
        0 4px 12px var(--glow-color-subtle);
}

/* Footer 3D subtle */
.cinema-3d .site-footer {
    transform-style: preserve-3d;
}

.cinema-3d .footer-brand svg {
    transition: transform 0.4s var(--ease-spring);
}

.cinema-3d .footer-brand:hover svg {
    transform: rotateY(15deg) scale(1.05);
}

/* Stagger delays for grid children */
.cinema-3d .features-grid .feature-card:nth-child(1) { transition-delay: 0s; }
.cinema-3d .features-grid .feature-card:nth-child(2) { transition-delay: 0.12s; }
.cinema-3d .features-grid .feature-card:nth-child(3) { transition-delay: 0.24s; }

.cinema-3d .tree-divisions .division-card:nth-child(1) { transition-delay: 0s; }
.cinema-3d .tree-divisions .division-card:nth-child(2) { transition-delay: 0.12s; }
.cinema-3d .tree-divisions .division-card:nth-child(3) { transition-delay: 0.24s; }

.cinema-3d .tree-partners .partner-card:nth-child(1) { transition-delay: 0s; }
.cinema-3d .tree-partners .partner-card:nth-child(2) { transition-delay: 0.08s; }
.cinema-3d .tree-partners .partner-card:nth-child(3) { transition-delay: 0.16s; }
.cinema-3d .tree-partners .partner-card:nth-child(4) { transition-delay: 0.24s; }

/* Inner page card types - 3D tilt + preserve-3d */
.cinema-3d .stat-card,
.cinema-3d .team-card,
.cinema-3d .product-card,
.cinema-3d .process-step,
.cinema-3d .link-card,
.cinema-3d .impact-card,
.cinema-3d .content-split-card,
.cinema-3d .cta-banner {
    transform-style: preserve-3d;
    will-change: transform;
    transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out), background 0.5s var(--ease-out), border-color 0.5s var(--ease-out);
}

/* Depth layers for inner page cards */
.cinema-3d .link-card-icon,
.cinema-3d .impact-icon {
    transform: translateZ(20px);
    transition: transform 0.4s var(--ease-spring);
}

.cinema-3d .link-card-title,
.cinema-3d .impact-title,
.cinema-3d .team-name,
.cinema-3d .product-name {
    transform: translateZ(10px);
}

.cinema-3d .link-card:hover .link-card-icon,
.cinema-3d .impact-card:hover .impact-icon {
    transform: translateZ(35px) scale(1.1);
}

/* Stagger delays for inner page grids */
.cinema-3d .stats-row .stat-card:nth-child(1) { transition-delay: 0s; }
.cinema-3d .stats-row .stat-card:nth-child(2) { transition-delay: 0.1s; }
.cinema-3d .stats-row .stat-card:nth-child(3) { transition-delay: 0.2s; }
.cinema-3d .stats-row .stat-card:nth-child(4) { transition-delay: 0.3s; }

.cinema-3d .team-grid .team-card:nth-child(1) { transition-delay: 0s; }
.cinema-3d .team-grid .team-card:nth-child(2) { transition-delay: 0.1s; }
.cinema-3d .team-grid .team-card:nth-child(3) { transition-delay: 0.2s; }
.cinema-3d .team-grid .team-card:nth-child(4) { transition-delay: 0.3s; }

.cinema-3d .card-grid .link-card:nth-child(1) { transition-delay: 0s; }
.cinema-3d .card-grid .link-card:nth-child(2) { transition-delay: 0.12s; }
.cinema-3d .card-grid .link-card:nth-child(3) { transition-delay: 0.24s; }

.cinema-3d .process-steps .process-step:nth-child(1) { transition-delay: 0s; }
.cinema-3d .process-steps .process-step:nth-child(2) { transition-delay: 0.1s; }
.cinema-3d .process-steps .process-step:nth-child(3) { transition-delay: 0.2s; }
.cinema-3d .process-steps .process-step:nth-child(4) { transition-delay: 0.3s; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .cinema-3d .reveal {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .cinema-3d .hero-text,
    .cinema-3d .hero-visual {
        animation: none !important;
        opacity: 1 !important;
    }

    .scroll-rail {
        display: none;
    }
}

/* Hide rail on mobile */
@media (max-width: 768px) {
    .scroll-rail {
        display: none;
    }
}