/* ============================================
   PREMIUM SCROLL ANIMATIONS V2
   Extra Level Advanced & Cinematic
   ============================================ */

/* Base Animation Setup with Advanced Timing */
[data-anim] {
    opacity: 0;
    will-change: transform, opacity;
    transition: all 1s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-anim].active {
    opacity: 1;
}

/* ============================================
   CINEMATIC ENTRANCE ANIMATIONS
   ============================================ */

/* Slide & Scale from Left */
[data-anim="slideScaleLeft"] {
    transform: translateX(-120px) scale(0.8);
    filter: blur(8px);
}

[data-anim="slideScaleLeft"].active {
    transform: translateX(0) scale(1);
    filter: blur(0);
}

/* Slide & Scale from Right */
[data-anim="slideScaleRight"] {
    transform: translateX(120px) scale(0.8);
    filter: blur(8px);
}

[data-anim="slideScaleRight"].active {
    transform: translateX(0) scale(1);
    filter: blur(0);
}

/* 3D Rotate In Left */
[data-anim="rotate3DLeft"] {
    transform: perspective(1200px) rotateY(-90deg) translateX(-100px);
    transform-origin: right center;
}

[data-anim="rotate3DLeft"].active {
    transform: perspective(1200px) rotateY(0) translateX(0);
}

/* 3D Rotate In Right */
[data-anim="rotate3DRight"] {
    transform: perspective(1200px) rotateY(90deg) translateX(100px);
    transform-origin: left center;
}

[data-anim="rotate3DRight"].active {
    transform: perspective(1200px) rotateY(0) translateX(0);
}

/* Zoom Rotate In */
[data-anim="zoomRotate"] {
    transform: scale(0.4) rotate(-180deg);
    filter: blur(10px);
}

[data-anim="zoomRotate"].active {
    transform: scale(1) rotate(0);
    filter: blur(0);
}

/* ============================================
   ELASTIC & BOUNCE ANIMATIONS
   ============================================ */

/* Elastic Bounce Up */
[data-anim="elasticUp"] {
    transform: translateY(120px) scaleY(1.3);
    transition: all 1.2s cubic-bezier(0.68, -0.6, 0.32, 1.6);
}

[data-anim="elasticUp"].active {
    transform: translateY(0) scaleY(1);
}

/* Elastic Bounce Down */
[data-anim="elasticDown"] {
    transform: translateY(-120px) scaleY(0.7);
    transition: all 1.2s cubic-bezier(0.68, -0.6, 0.32, 1.6);
}

[data-anim="elasticDown"].active {
    transform: translateY(0) scaleY(1);
}

/* Spring Scale */
[data-anim="springScale"] {
    transform: scale(0);
    transition: all 1s cubic-bezier(0.34, 1.56, 0.64, 1);
}

[data-anim="springScale"].active {
    transform: scale(1);
}

/* ============================================
   PERSPECTIVE & 3D EFFECTS
   ============================================ */

/* 3D Flip Card Style */
[data-anim="flip3D"] {
    transform: perspective(1500px) rotateX(-90deg);
    transform-origin: center bottom;
}

[data-anim="flip3D"].active {
    transform: perspective(1500px) rotateX(0);
}

/* 3D Door Open */
[data-anim="doorOpen"] {
    transform: perspective(1500px) rotateY(-100deg);
    transform-origin: left center;
    filter: brightness(0.5);
}

[data-anim="doorOpen"].active {
    transform: perspective(1500px) rotateY(0);
    filter: brightness(1);
}

/* 3D Cube Rotate */
[data-anim="cubeRotate"] {
    transform: perspective(1500px) rotateX(-45deg) rotateY(-45deg) scale(0.7);
}

[data-anim="cubeRotate"].active {
    transform: perspective(1500px) rotateX(0) rotateY(0) scale(1);
}

/* ============================================
   ADVANCED BLUR & REVEAL
   ============================================ */

/* Blur Zoom In */
[data-anim="blurZoom"] {
    filter: blur(30px);
    transform: scale(1.5);
}

[data-anim="blurZoom"].active {
    filter: blur(0);
    transform: scale(1);
}

/* Gradient Wipe */
[data-anim="gradientWipe"] {
    background: linear-gradient(90deg, transparent 0%, currentColor 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    background-size: 0% 100%;
}

[data-anim="gradientWipe"].active {
    background-size: 100% 100%;
    transition: background-size 1.5s ease;
}

/* Mask Reveal Bottom */
[data-anim="maskReveal"] {
    clip-path: inset(100% 0 0 0);
}

[data-anim="maskReveal"].active {
    clip-path: inset(0 0 0 0);
}

/* Split Text Reveal */
[data-anim="splitReveal"] {
    clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
}

[data-anim="splitReveal"].active {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    transition: clip-path 1.2s cubic-bezier(0.77, 0, 0.175, 1);
}

/* ============================================
   WAVE & RIPPLE EFFECTS
   ============================================ */

/* Wave Entrance */
[data-anim="wave"] {
    transform: translateY(100px);
    animation: waveMotion 0.8s ease forwards;
    animation-play-state: paused;
}

[data-anim="wave"].active {
    animation-play-state: running;
}

@keyframes waveMotion {
    0% { transform: translateY(100px) rotate(0deg); }
    25% { transform: translateY(-20px) rotate(5deg); }
    50% { transform: translateY(10px) rotate(-3deg); }
    75% { transform: translateY(-5px) rotate(2deg); }
    100% { transform: translateY(0) rotate(0deg); opacity: 1; }
}

/* Ripple Scale */
[data-anim="ripple"] {
    transform: scale(0);
    animation: rippleOut 1s ease forwards;
    animation-play-state: paused;
}

[data-anim="ripple"].active {
    animation-play-state: running;
}

@keyframes rippleOut {
    0% { transform: scale(0); opacity: 0; }
    50% { transform: scale(1.1); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

/* ============================================
   SECTION-SPECIFIC PREMIUM ANIMATIONS
   ============================================ */

/* Hero Section - Cinematic Entrance */
.hero-content {
    opacity: 0;
    transform: perspective(1200px) translateX(-150px) rotateY(-15deg);
    transition: all 1.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-content.active {
    opacity: 1;
    transform: perspective(1200px) translateX(0) rotateY(0);
}

.hero-content h2 {
    opacity: 0;
    transform: translateY(50px) scale(0.9);
    transition: all 1s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.hero-content.active h2 {
    opacity: 1;
    transform: translateY(0) scale(1);
    transition-delay: 0.2s;
}

.hero-subtitle {
    opacity: 0;
    transform: translateX(-30px);
    transition: all 0.8s ease;
}

.hero-content.active .hero-subtitle {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.4s;
}

.stats-grid {
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.8s ease;
}

.hero-content.active .stats-grid {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.6s;
}

/* Quote Form - 3D Card Entrance */
.quote-form {
    opacity: 0;
    transform: perspective(1500px) translateX(150px) rotateY(20deg) scale(0.9);
    filter: brightness(0.7);
    transition: all 1.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.quote-form.active {
    opacity: 1;
    transform: perspective(1500px) translateX(0) rotateY(0) scale(1);
    filter: brightness(1);
    transition-delay: 0.3s;
}

/* Turnkey Cards - Sequential 3D Flip */
.turnkey-cards {
    perspective: 1500px;
}

.card {
    opacity: 0;
    transform: rotateY(-90deg) translateZ(-100px);
    transform-origin: left center;
    transition: all 1s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.card.active {
    opacity: 1;
    transform: rotateY(0) translateZ(0);
}

.card:nth-child(1).active { transition-delay: 0.1s; }
.card:nth-child(2).active { transition-delay: 0.3s; }
.card:nth-child(3).active { transition-delay: 0.5s; }

/* Card Icon Bounce */
.card .icon-wrapper {
    animation: iconFloat 3s ease-in-out infinite;
}

@keyframes iconFloat {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-15px) scale(1.1); }
}

/* Steps Section - Wave Cascade */
.step-item {
    opacity: 0;
    transform: translateY(80px) scale(0.7) rotate(-10deg);
    transition: all 0.9s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.step-item.active {
    opacity: 1;
    transform: translateY(0) scale(1) rotate(0);
}

.step-item:nth-child(1).active { transition-delay: 0.1s; }
.step-item:nth-child(3).active { transition-delay: 0.2s; }
.step-item:nth-child(5).active { transition-delay: 0.3s; }
.step-item:nth-child(7).active { transition-delay: 0.4s; }
.step-item:nth-child(9).active { transition-delay: 0.5s; }
.step-item:nth-child(11).active { transition-delay: 0.6s; }

/* Work Showcase - Cinematic Pan */
.work-preview {
    opacity: 0;
    transform: perspective(1500px) translateX(-200px) rotateY(-25deg) scale(0.8);
    filter: blur(12px) brightness(0.6);
    transition: all 1.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.work-preview.active {
    opacity: 1;
    transform: perspective(1500px) translateX(0) rotateY(0) scale(1);
    filter: blur(0) brightness(1);
}

.work-content {
    opacity: 0;
    transform: perspective(1500px) translateX(200px) rotateY(25deg);
    transition: all 1.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.work-content.active {
    opacity: 1;
    transform: perspective(1500px) translateX(0) rotateY(0);
    transition-delay: 0.4s;
}

/* Stats Box - Pop In */
.stat-box {
    opacity: 0;
    transform: scale(0) rotate(-180deg);
    transition: all 0.8s cubic-bezier(0.68, -0.6, 0.32, 1.6);
}

.work-content.active .stat-box {
    opacity: 1;
    transform: scale(1) rotate(0);
}

.work-content.active .stat-box:nth-child(1) { transition-delay: 0.6s; }
.work-content.active .stat-box:nth-child(2) { transition-delay: 0.75s; }
.work-content.active .stat-box:nth-child(3) { transition-delay: 0.9s; }

/* Interior Cards - 3D Shuffle */
.interior-card {
    opacity: 0;
    transform: perspective(1200px) rotateX(-45deg) translateY(100px) scale(0.8);
    transform-origin: center bottom;
    transition: all 1s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.interior-card.active {
    opacity: 1;
    transform: perspective(1200px) rotateX(0) translateY(0) scale(1);
}

.interior-card:nth-child(1).active { transition-delay: 0.1s; }
.interior-card:nth-child(2).active { transition-delay: 0.2s; }
.interior-card:nth-child(3).active { transition-delay: 0.3s; }
.interior-card:nth-child(4).active { transition-delay: 0.15s; }
.interior-card:nth-child(5).active { transition-delay: 0.25s; }
.interior-card:nth-child(6).active { transition-delay: 0.35s; }

/* Tour 360 - Orbital Entrance */
.tour-card {
    opacity: 0;
    transform: perspective(1500px) rotateY(-60deg) translateX(-150px) scale(0.7);
    filter: blur(8px);
    transition: all 1.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.tour-card.active {
    opacity: 1;
    transform: perspective(1500px) rotateY(0) translateX(0) scale(1);
    filter: blur(0);
}

.tour-card:nth-child(1).active { transition-delay: 0.1s; }
.tour-card:nth-child(2).active { transition-delay: 0.25s; }
.tour-card:nth-child(3).active { transition-delay: 0.4s; }
.tour-card:nth-child(4).active { transition-delay: 0.55s; }

/* Compare Section - Split Reveal */
.compare-col {
    opacity: 0;
    clip-path: inset(0 50% 0 50%);
    transition: all 1.2s cubic-bezier(0.77, 0, 0.175, 1);
}

.compare-col.active {
    opacity: 1;
    clip-path: inset(0 0 0 0);
}

.compare-col:first-child.active { transition-delay: 0.2s; }
.compare-col:last-child.active { transition-delay: 0.5s; }

/* Compare Rows - Cascade */
.compare-row {
    opacity: 0;
    transform: translateX(-50px);
    transition: all 0.6s ease;
}

.compare-col.active .compare-row {
    opacity: 1;
    transform: translateX(0);
}

.compare-col.active .compare-row:nth-child(1) { transition-delay: 0.4s; }
.compare-col.active .compare-row:nth-child(2) { transition-delay: 0.5s; }
.compare-col.active .compare-row:nth-child(3) { transition-delay: 0.6s; }
.compare-col.active .compare-row:nth-child(4) { transition-delay: 0.7s; }
.compare-col.active .compare-row:nth-child(5) { transition-delay: 0.8s; }
.compare-col.active .compare-row:nth-child(6) { transition-delay: 0.9s; }
.compare-col.active .compare-row:nth-child(7) { transition-delay: 1s; }

/* Team Cards - 3D Cube Reveal */
.team-card {
    opacity: 0;
    transform: perspective(1500px) rotateX(-90deg) translateY(100px);
    transform-origin: center top;
    filter: brightness(0.5);
    transition: all 1.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.team-card.active {
    opacity: 1;
    transform: perspective(1500px) rotateX(0) translateY(0);
    filter: brightness(1);
}

.team-card:nth-child(1).active { transition-delay: 0.2s; }
.team-card:nth-child(2).active { transition-delay: 0.4s; }
.team-card:nth-child(3).active { transition-delay: 0.6s; }

/* Avatar Pulse */
.team-card .avatar {
    animation: avatarPulse 2s ease-in-out infinite;
}

@keyframes avatarPulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255,68,68,0.4); }
    50% { transform: scale(1.05); box-shadow: 0 0 0 20px rgba(255,68,68,0); }
}

/* FAQ - Accordion Slide */
.faq-item {
    opacity: 0;
    transform: translateX(80px) rotateZ(5deg);
    transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.faq-item.active {
    opacity: 1;
    transform: translateX(0) rotateZ(0);
}

.faq-item:nth-child(odd).active { transition-delay: 0.05s; }
.faq-item:nth-child(even).active { transition-delay: 0.15s; }

/* Contact Section - Split Screen */
.contact-image {
    opacity: 0;
    clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
    transition: all 1.4s cubic-bezier(0.77, 0, 0.175, 1);
}

.contact-image.active {
    opacity: 1;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

.contact-form-box {
    opacity: 0;
    clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
    transition: all 1.4s cubic-bezier(0.77, 0, 0.175, 1);
}

.contact-form-box.active {
    opacity: 1;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    transition-delay: 0.3s;
}

/* ============================================
   MOBILE OPTIMIZATIONS
   ============================================ */

@media (max-width: 968px) {
    [data-anim] {
        transition-duration: 0.8s;
    }
    
    /* Simplify 3D effects on mobile */
    [data-anim="rotate3DLeft"],
    [data-anim="rotate3DRight"],
    [data-anim="flip3D"],
    [data-anim="doorOpen"] {
        transform: translateY(60px) scale(0.9);
    }
    
    [data-anim="rotate3DLeft"].active,
    [data-anim="rotate3DRight"].active,
    [data-anim="flip3D"].active,
    [data-anim="doorOpen"].active {
        transform: translateY(0) scale(1);
    }
}