/*
 * 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-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);
    }
}