/*
 * Animation Styles
 * Entrapeer 2026 Theme
 *
 * Only USED animations from HTML sources are included here.
 * Unused animations are intentionally excluded per project rules.
 *
 * Component styles (btn-premium, pillar-card, flip-cards, etc.)
 * are in components.css. Background patterns are in src/tailwind.css.
 */

/* === Entry Animation === */
.animate-enter {
    opacity: 0;
    filter: blur(10px);
    transform: translateY(20px);
    animation: enter-state 0.8s var(--ease-out-expo, cubic-bezier(0.2, 0.8, 0.2, 1)) forwards;
}

@keyframes enter-state {
    to {
        opacity: 1;
        filter: blur(0);
        transform: translateY(0);
    }
}

/* === Animation Delays === */
.delay-100 { animation-delay: 0.1s; }
.delay-150 { animation-delay: 0.15s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-400 { animation-delay: 0.4s; }
.delay-500 { animation-delay: 0.5s; }
.delay-700 { animation-delay: 0.7s; }
.delay-1000 { animation-delay: 1s; }

/* Transition delays (for non-animation elements) */
.td-100 { transition-delay: 100ms; }
.td-200 { transition-delay: 200ms; }
.td-300 { transition-delay: 300ms; }

/* === SVG Beam Animation === */
.beam-path {
    stroke-dasharray: 20;
    animation: beam-flow 3s linear infinite;
}

@keyframes beam-flow {
    0% { stroke-dashoffset: 200; opacity: 0; }
    20% { opacity: 1; }
    80% { opacity: 1; }
    100% { stroke-dashoffset: -200; opacity: 0; }
}

/* === Beam Drop Animation === */
.beam-drop-path {
    stroke-dasharray: 40;
    animation: beam-drop 3s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    animation-delay: 1s;
}

@keyframes beam-drop {
    0% { stroke-dashoffset: 100; opacity: 0; }
    20% { opacity: 1; }
    80% { opacity: 1; }
    100% { stroke-dashoffset: -100; opacity: 0; }
}

/* === Marquee Infinite Scroll === */
.animate-loop-scroll {
    animation: loop-scroll 40s linear infinite;
}

@keyframes loop-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-100%); }
}

/* === Scroll-Triggered Reveals === */

/* Observe fade (Feature Tabs) */
.observe-fade {
    opacity: 0;
    transform: translateY(24px);
    filter: blur(4px);
    transition: opacity 0.8s var(--ease-out-expo, cubic-bezier(0.2, 0.8, 0.2, 1)),
                transform 0.8s var(--ease-out-expo, cubic-bezier(0.2, 0.8, 0.2, 1)),
                filter 0.8s var(--ease-out-expo, cubic-bezier(0.2, 0.8, 0.2, 1));
}

.observe-fade.in-view {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}

/* Reveal view (Product hero) */
.reveal-view {
    opacity: 0;
    transform: translateY(30px);
    filter: blur(10px);
    transition: opacity 0.8s var(--ease-out-expo, cubic-bezier(0.2, 0.8, 0.2, 1)),
                transform 0.8s var(--ease-out-expo, cubic-bezier(0.2, 0.8, 0.2, 1)),
                filter 0.8s var(--ease-out-expo, cubic-bezier(0.2, 0.8, 0.2, 1));
}

.reveal-view.in-view {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}

/* Reveal dark (What You Get section) */
.reveal-dark {
    opacity: 0;
    transform: translateY(24px) scale(0.98);
    filter: blur(8px);
    transition: opacity 0.8s var(--ease-out-expo, cubic-bezier(0.2, 0.8, 0.2, 1)),
                transform 0.8s var(--ease-out-expo, cubic-bezier(0.2, 0.8, 0.2, 1)),
                filter 0.8s var(--ease-out-expo, cubic-bezier(0.2, 0.8, 0.2, 1));
}

.reveal-dark.in-view {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
}

/* Reveal text (What It Is section) */
.reveal-text {
    opacity: 0;
    transform: translateY(24px);
    filter: blur(8px);
    transition: opacity 1s var(--ease-out-expo, cubic-bezier(0.2, 0.8, 0.2, 1)),
                transform 1s var(--ease-out-expo, cubic-bezier(0.2, 0.8, 0.2, 1)),
                filter 1s var(--ease-out-expo, cubic-bezier(0.2, 0.8, 0.2, 1));
}

.reveal-text.in-view {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}

/* Reveal flip (Use Cases, Outcomes) */
.reveal-flip {
    opacity: 0;
    transform: translateY(24px);
    filter: blur(8px);
    transition: opacity 0.8s var(--ease-out-expo, cubic-bezier(0.2, 0.8, 0.2, 1)),
                transform 0.8s var(--ease-out-expo, cubic-bezier(0.2, 0.8, 0.2, 1)),
                filter 0.8s var(--ease-out-expo, cubic-bezier(0.2, 0.8, 0.2, 1));
}

.reveal-flip.in-view {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}

/* Reveal up */
.reveal-up {
    opacity: 0;
    transform: translateY(30px);
    filter: blur(5px);
    transition: opacity 0.8s var(--ease-out-expo, cubic-bezier(0.2, 0.8, 0.2, 1)),
                transform 0.8s var(--ease-out-expo, cubic-bezier(0.2, 0.8, 0.2, 1)),
                filter 0.8s var(--ease-out-expo, cubic-bezier(0.2, 0.8, 0.2, 1));
}

.reveal-up.in-view {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}

/* Reveal blur item (Product cards) */
.reveal-blur-item {
    opacity: 0;
    filter: blur(8px);
    transform: translateY(24px);
    transition: opacity 1s var(--ease-out-expo, cubic-bezier(0.2, 0.8, 0.2, 1)),
                transform 1s var(--ease-out-expo, cubic-bezier(0.2, 0.8, 0.2, 1)),
                filter 1s var(--ease-out-expo, cubic-bezier(0.2, 0.8, 0.2, 1));
}

.reveal-blur-item.is-visible {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
}

/* Feature reveal (Products-Home grid) */
.feature-reveal {
    opacity: 0;
    transform: translateY(20px);
    filter: blur(10px);
    transition: opacity 0.8s var(--ease-out-expo, cubic-bezier(0.2, 0.8, 0.2, 1)),
                transform 0.8s var(--ease-out-expo, cubic-bezier(0.2, 0.8, 0.2, 1)),
                filter 0.8s var(--ease-out-expo, cubic-bezier(0.2, 0.8, 0.2, 1));
}

.feature-reveal.active {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}

/* === Feature Tabs === */
.feature-tab-desc {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: all 0.4s var(--ease-out-quart, cubic-bezier(0.4, 0, 0.2, 1));
}

.feature-tab.active .feature-tab-desc {
    max-height: 200px;
    opacity: 1;
    margin-top: 0.75rem;
}

.feature-slide {
    opacity: 0;
    transform: scale(0.98) translateY(10px);
    pointer-events: none;
    transition: all 0.5s var(--ease-out-quart, cubic-bezier(0.4, 0, 0.2, 1));
    position: absolute;
    inset: 0;
    z-index: 0;
}

.feature-slide.active {
    opacity: 1;
    transform: scale(1) translateY(0);
    pointer-events: auto;
    z-index: 10;
}

/* === Progress Bar (Feature Tabs) === */
.progress-bar {
    height: 100%;
    width: 2px;
    background: #0f172a;
    position: absolute;
    left: 0;
    top: 0;
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.4s ease;
}

.feature-tab.active .progress-bar {
    transform: scaleY(1);
}

/* === Step Progress Bar (Execution Flow) === */
.step-progress-bar {
    transform-origin: left;
    transform: scaleX(0);
    transition: transform 0.1s linear;
}

.active .step-progress-bar {
    animation: progress-fill 5s linear forwards;
}

.step-btn:hover .step-progress-bar {
    animation-play-state: paused;
}

@keyframes progress-fill {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

/* === Slide Enter === */
.slide-enter {
    animation: slide-in 0.8s var(--ease-out-expo, cubic-bezier(0.2, 0.8, 0.2, 1)) forwards;
    opacity: 0;
}

@keyframes slide-in {
    from {
        opacity: 0;
        transform: translateY(24px) scale(0.98);
        filter: blur(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

/* === Enterprise Pillar Animation === */
.animate-pillar {
    opacity: 0;
    animation: enter-blur-up 0.8s var(--ease-out-expo, cubic-bezier(0.2, 0.8, 0.2, 1)) forwards;
    animation-play-state: paused;
}

@keyframes enter-blur-up {
    0% {
        opacity: 0;
        transform: translateY(24px) scale(0.98);
        filter: blur(8px);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

/* === CTA Section Reveal === */
.animate-reveal {
    opacity: 0;
    animation: reveal-up-blur 1.2s var(--ease-out-spring, cubic-bezier(0.16, 1, 0.3, 1)) forwards;
    will-change: transform, opacity, filter;
}

@keyframes reveal-up-blur {
    0% {
        opacity: 0;
        transform: translateY(20px);
        filter: blur(10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

/* === Auto-Play Reveal Up (Legal pages) === */
.animate-item {
    opacity: 0;
    animation: reveal-up 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

@keyframes reveal-up {
    0% {
        opacity: 0;
        transform: translateY(24px);
        filter: blur(8px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

/* === Hero Photo Composition Entry === */
@keyframes blur-slide-up {
    0% {
        opacity: 0;
        transform: translateY(40px) scale(0.98);
        filter: blur(12px);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

.animate-hero-element {
    opacity: 0;
    animation-fill-mode: forwards;
    animation-duration: 1.2s;
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform, opacity, filter;
}

.animate-hero-element.in-view {
    animation-name: blur-slide-up;
}

/* === Feature Animation (Mission Feature) === */
.feature-anim {
    opacity: 0;
    transform: translateY(24px);
    filter: blur(8px);
    transition: opacity 1s cubic-bezier(0.25, 1, 0.5, 1),
                transform 1s cubic-bezier(0.25, 1, 0.5, 1),
                filter 1s cubic-bezier(0.25, 1, 0.5, 1);
}

.feature-anim.in-view {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}

/* === Reveal Card (Team Grid) === */
.reveal-card {
    opacity: 0;
    transform: translateY(24px);
    filter: blur(8px);
    transition: opacity 0.8s var(--ease-out-expo, cubic-bezier(0.2, 0.8, 0.2, 1)),
                transform 0.8s var(--ease-out-expo, cubic-bezier(0.2, 0.8, 0.2, 1)),
                filter 0.8s var(--ease-out-expo, cubic-bezier(0.2, 0.8, 0.2, 1));
}

.reveal-card.in-view {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}

/* === CTA Careers Reveal === */
@keyframes reveal-up-soft {
    0% {
        opacity: 0;
        transform: translateY(30px) scale(0.98);
        filter: blur(8px);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

.animate-reveal-cta {
    opacity: 0;
    animation-fill-mode: forwards;
    animation-duration: 0.8s;
    animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
}

.animate-reveal-cta.in-view {
    animation-name: reveal-up-soft;
}

/* === Parallax Layer (Hero Photo Composition) === */
.parallax-layer {
    will-change: transform;
    transition: transform 0.1s cubic-bezier(0, 0, 0.2, 1);
}

/* === Vertical Scroll Animation (Logo Wall) === */
.animate-scroll-vertical {
    animation: scroll-vertical 40s linear infinite;
}

@keyframes scroll-vertical {
    from { transform: translateY(0); }
    to { transform: translateY(-50%); }
}

.animate-scroll-vertical-reverse {
    animation: scroll-vertical 45s linear infinite reverse;
}

/* === Floating Cards (CTA Careers) === */
.animate-float-slow {
    animation: float-card 8s ease-in-out infinite;
}

@keyframes float-card {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
}

.animate-float-medium {
    animation: float-card 6s ease-in-out infinite reverse;
}

/* === Contact Hero: Horizontal Line Grow === */
.animate-line {
    transform-origin: left;
    transform: scaleX(0);
    opacity: 0;
    animation: grow-line-horizontal 1.1s var(--ease-out-spring, cubic-bezier(0.16, 1, 0.3, 1)) forwards;
    will-change: transform, opacity;
}

@keyframes grow-line-horizontal {
    0% {
        transform: scaleX(0);
        opacity: 0;
    }
    100% {
        transform: scaleX(1);
        opacity: 1;
    }
}

/* === Blog: Scroll-Animate Reveal === */
.scroll-animate {
    opacity: 0;
    transform: translateY(20px);
    filter: blur(4px);
    transition: opacity 0.8s var(--ease-out-expo, cubic-bezier(0.2, 0.8, 0.2, 1)),
                transform 0.8s var(--ease-out-expo, cubic-bezier(0.2, 0.8, 0.2, 1)),
                filter 0.8s var(--ease-out-expo, cubic-bezier(0.2, 0.8, 0.2, 1));
}

.scroll-animate.reveal {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}

/* Scroll-animate delay variants (blog-single) */
.scroll-animate.d-100 { transition-delay: 0.1s; }
.scroll-animate.d-200 { transition-delay: 0.2s; }
.scroll-animate.d-300 { transition-delay: 0.3s; }
.scroll-animate.d-400 { transition-delay: 0.4s; }
.scroll-animate.d-500 { transition-delay: 0.5s; }

/* === FAQ Accordion === */
.faq-item.is-open .faq-chevron {
    transform: rotate(180deg);
}

.faq-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    will-change: max-height;
}