/* ============================================
   MODERN TEXT REVEAL OVERRIDES
   Overrides React's inline text-reveal styles
   for smoother, more cinematic animations
   ============================================ */

/* Override React TextReveal component spans — they have inline styles
   so we need !important to take control of the animation */
.simple-text-reveal {
    transition-duration: 0.6s !important;
    transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1) !important;
    filter: blur(4px);
    transition-property: opacity, transform, filter !important;
}

/* When revealed, clear the blur */
.simple-text-reveal:not(.opacity-0) {
    filter: blur(0) !important;
}

/* Upgraded stagger-item: smoother easing + blur dissolve */
.stagger-item {
    opacity: 0;
    transform: translate3d(0, 24px, 0) !important;
    transition:
        transform 0.8s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
        filter 0.8s cubic-bezier(0.16, 1, 0.3, 1) !important;
    filter: blur(6px);
    will-change: transform, opacity, filter;
}

.stagger-item.is-visible {
    opacity: 1;
    transform: translateZ(0) !important;
    filter: blur(0) !important;
}

/* Stagger delays — slower, more cinematic spacing */
.stagger-item:nth-child(1) {
    transition-delay: 0.05s !important;
}

.stagger-item:nth-child(2) {
    transition-delay: 0.12s !important;
}

.stagger-item:nth-child(3) {
    transition-delay: 0.20s !important;
}

.stagger-item:nth-child(4) {
    transition-delay: 0.28s !important;
}

.stagger-item:nth-child(5) {
    transition-delay: 0.36s !important;
}

.stagger-item:nth-child(6) {
    transition-delay: 0.44s !important;
}

.stagger-item:nth-child(7) {
    transition-delay: 0.52s !important;
}

.stagger-item:nth-child(8) {
    transition-delay: 0.60s !important;
}

/* Upgraded slide-in animations — smoother, longer, with blur */
@keyframes slideInFromLeft {
    0% {
        opacity: 0;
        transform: translate3d(-40px, 0, 0);
        filter: blur(8px);
    }

    100% {
        opacity: 1;
        transform: translateZ(0);
        filter: blur(0);
    }
}

@keyframes slideInFromRight {
    0% {
        opacity: 0;
        transform: translate3d(40px, 0, 0);
        filter: blur(8px);
    }

    100% {
        opacity: 1;
        transform: translateZ(0);
        filter: blur(0);
    }
}

/* Override existing slide-in classes */
.animate-slide-in-left {
    animation: slideInFromLeft 1s cubic-bezier(0.16, 1, 0.3, 1) both !important;
}

.animate-slide-in-right {
    animation: slideInFromRight 1s cubic-bezier(0.16, 1, 0.3, 1) both !important;
}

/* Upgrade slide-up animation */
.animate-slide-up {
    opacity: 0;
    transform: translate3d(0, 28px, 0) !important;
    transition:
        all 0.8s cubic-bezier(0.16, 1, 0.3, 1) !important;
    filter: blur(4px);
}

.animate-slide-up.is-visible {
    opacity: 1;
    transform: translateZ(0) !important;
    filter: blur(0);
}

/* Upgrade fade-in animation */
.animate-fade-in {
    opacity: 0;
    transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.animate-fade-in.is-visible {
    opacity: 1;
}

/* Upgrade fade-in-up animation */
@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translate3d(0, 32px, 0);
        filter: blur(6px);
    }

    100% {
        opacity: 1;
        transform: translateZ(0);
        filter: blur(0);
    }
}

.animate-fade-in-up {
    animation: fadeInUp 1s cubic-bezier(0.16, 1, 0.3, 1) both !important;
}

/* Image hover — smoother scale */
.image-hover img {
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Section headings — premium text shadow on reveal */
h2.is-visible,
h3.is-visible {
    text-shadow: 0 0 40px rgba(255, 255, 255, 0.05);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {

    .simple-text-reveal,
    .stagger-item,
    .animate-slide-up,
    .animate-fade-in {
        transition: opacity 0.3s ease !important;
        transform: none !important;
        filter: none !important;
    }

    .animate-slide-in-left,
    .animate-slide-in-right,
    .animate-fade-in-up {
        animation: none !important;
        opacity: 1 !important;
    }
}