/* 3D Hero Slider Animations */
/* GPU acceleration */
.slide-title, .slide-desc, .slide-buttons, .slide-visual, .slide-badge {
    will-change: transform, opacity;
    transform: translate3d(0,0,0);
}

/* Perspective container */
.slide-content {
    perspective: 1000px;
    transform-style: preserve-3d;
}

/* === ENTRY ANIMATIONS === */

/* Slide 0: RotateY + TranslateZ */
.slide.active[data-slide="0"] .slide-title {
    animation: entry3d-rotateY 800ms cubic-bezier(0.34, 1.56, 0.64, 1) 200ms both;
}
@keyframes entry3d-rotateY {
    from { transform: rotateY(90deg) translateZ(-100px); opacity: 0; transform-origin: left center; }
    to { transform: rotateY(0) translateZ(0); opacity: 1; transform-origin: left center; }
}

/* Slide 1: RotateX + Scale */
.slide.active[data-slide="1"] .slide-title {
    animation: entry3d-rotateX 850ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 200ms both;
}
@keyframes entry3d-rotateX {
    from { transform: rotateX(-75deg) scale(0.8); opacity: 0; transform-origin: center bottom; }
    to { transform: rotateX(0) scale(1); opacity: 1; transform-origin: center bottom; }
}

/* Slide 2: Perspective Flip */
.slide.active[data-slide="2"] .slide-title {
    animation: entry3d-flip 900ms cubic-bezier(0.68, -0.55, 0.265, 1.55) 200ms both;
}
@keyframes entry3d-flip {
    from { transform: rotateY(-180deg); opacity: 0; filter: blur(10px); transform-origin: right center; }
    to { transform: rotateY(0); opacity: 1; filter: blur(0); transform-origin: right center; }
}

/* Slide 3: RotateZ + Scale */
.slide.active[data-slide="3"] .slide-title {
    animation: entry3d-rotateZ 800ms cubic-bezier(0.34, 1.56, 0.64, 1) 200ms both;
}
@keyframes entry3d-rotateZ {
    from { transform: rotateZ(-10deg) scale(0.7) translateY(40px); opacity: 0; }
    to { transform: rotateZ(0) scale(1) translateY(0); opacity: 1; }
}

/* Slide 4: RotateX + TranslateY */
.slide.active[data-slide="4"] .slide-title {
    animation: entry3d-drop 850ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 200ms both;
}
@keyframes entry3d-drop {
    from { transform: rotateX(90deg) translateY(-60px); opacity: 0; transform-origin: center top; }
    to { transform: rotateX(0) translateY(0); opacity: 1; transform-origin: center top; }
}

/* === STAGGERED ENTRY for other elements === */
.slide.active .slide-badge {
    animation: fadeSlideUp 500ms ease 100ms both;
}
.slide.active .slide-desc {
    animation: fadeSlideUp 600ms ease 400ms both;
}
.slide.active .slide-features {
    animation: fadeSlideUp 600ms ease 500ms both;
}
.slide.active .slide-buttons {
    animation: scaleIn 500ms cubic-bezier(0.34, 1.56, 0.64, 1) 600ms both;
}
.slide.active .slide-visual {
    animation: slideInRight 700ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 300ms both;
}

@keyframes fadeSlideUp {
    from { transform: translateY(24px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
@keyframes scaleIn {
    from { transform: scale(0.85); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}
@keyframes slideInRight {
    from { transform: translateX(60px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

/* === EXIT ANIMATIONS === */
.slide.exiting .slide-title {
    animation: exitScatterDown 400ms ease-in forwards;
}
.slide.exiting .slide-desc {
    animation: exitFadeDown 300ms ease-in 100ms forwards;
}
.slide.exiting .slide-buttons {
    animation: exitScaleDown 250ms ease-in 150ms forwards;
}
.slide.exiting .slide-visual {
    animation: exitSlideRight 350ms ease-in 100ms forwards;
}
.slide.exiting .slide-badge {
    animation: exitFadeDown 250ms ease-in forwards;
}

@keyframes exitScatterDown {
    to { transform: translateY(60px) rotateX(15deg); opacity: 0; }
}
@keyframes exitFadeDown {
    to { transform: translateY(30px); opacity: 0; }
}
@keyframes exitScaleDown {
    to { transform: scale(0.8); opacity: 0; }
}
@keyframes exitSlideRight {
    to { transform: translateX(80px); opacity: 0; }
}

/* === GLOW PULSE on entry === */
.slide.active .slide-title {
    animation-fill-mode: both;
}
.slide.active .slide-title span {
    animation: glowPulse 1.2s ease 900ms both;
}
@keyframes glowPulse {
    0% { text-shadow: 0 0 0 transparent; }
    50% { text-shadow: 0 0 30px rgba(99,102,241,0.4); }
    100% { text-shadow: 0 0 0 transparent; }
}

/* === REDUCED MOTION === */
@media (prefers-reduced-motion: reduce) {
    .slide-title, .slide-desc, .slide-buttons, .slide-visual, .slide-badge, .slide-features {
        animation: simpleFade 300ms ease both !important;
    }
    @keyframes simpleFade {
        from { opacity: 0; }
        to { opacity: 1; }
    }
    .slide.exiting * {
        animation: simpleFadeOut 200ms ease forwards !important;
    }
    @keyframes simpleFadeOut {
        to { opacity: 0; }
    }
}