/**
 * Process Component Styles
 *
 * Section reveal and step animations for the Process timeline
 *
 * @package TeeqCore
 * @since 1.0.0
 */

/* ===== Section Reveal Animations ===== */
@keyframes processSectionFadeIn {
    from {
        opacity: 0;
        transform: translateY(40px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes processLeftColumnReveal {
    from {
        transform: translateX(-30px);
    }

    to {
        transform: translateX(0);
    }
}

@keyframes processRightColumnReveal {
    from {
        transform: translateX(30px);
    }

    to {
        transform: translateX(0);
    }
}

/* RTL variants */
html[dir="rtl"] .process-right-column-reveal {
    animation-name: processLeftColumnReveal;
}

html[dir="rtl"] .process-left-column-reveal {
    animation-name: processRightColumnReveal;
}

/* ===== Step Card Animations ===== */
@keyframes processStepReveal {
    from {
        opacity: 0;
        transform: translateY(24px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes processStepIconPop {
    from {
        opacity: 0;
        transform: scale(0.5);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ===== Timeline Line Animation ===== */
@keyframes processTimelineDraw {
    from {
        transform: scaleY(0);
        transform-origin: top;
    }

    to {
        transform: scaleY(1);
        transform-origin: top;
    }
}

/* ===== Process Section Base ===== */
.process-section {
    position: relative;
}

/* Sticky left column - ensure it sticks when scrolling */
.process-sticky-content {
    position: relative;
}

@media (min-width: 1024px) {
    .process-sticky-content {
        position: sticky;
        top: 6rem;
        /* lg:top-24 = 6rem */
        align-self: flex-start;
    }
}

/* Content column animation - only when section shows in viewport */
.process-section-in-view .process-left-column {
    animation: processLeftColumnReveal 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.process-section-in-view .process-right-column {
    animation: processRightColumnReveal 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.15s forwards;
}

/* RTL column animations */
html[dir="rtl"] .process-section-in-view .process-left-column {
    animation-name: processRightColumnReveal;
}

html[dir="rtl"] .process-section-in-view .process-right-column {
    animation-name: processLeftColumnReveal;
}

/* ===== Step Items - Staggered Reveal ===== */
.process-step-item {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.process-step-item.process-step-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered delay for each step when section becomes visible */
.process-step-item.process-step-visible:nth-child(1) {
    transition-delay: 0.1s;
}

.process-step-item.process-step-visible:nth-child(2) {
    transition-delay: 0.2s;
}

.process-step-item.process-step-visible:nth-child(3) {
    transition-delay: 0.3s;
}

.process-step-item.process-step-visible:nth-child(4) {
    transition-delay: 0.4s;
}

.process-step-item.process-step-visible:nth-child(5) {
    transition-delay: 0.5s;
}

.process-step-item.process-step-visible:nth-child(6) {
    transition-delay: 0.6s;
}

.process-step-item.process-step-visible:nth-child(7) {
    transition-delay: 0.7s;
}

.process-step-item.process-step-visible:nth-child(8) {
    transition-delay: 0.8s;
}

/* ===== Smooth Step Card Transitions ===== */
.process-step-card {
    transition: background-color 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        border-color 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.process-step-icon,
.process-mobile-icon {
    transition: background-color 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        color 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.process-step-card h3,
.process-step-card span,
.process-step-card p {
    transition: color 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Progress bar smooth fill */
.process-progress-bar {
    transition: width 1.5s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ===== Hover & Active Micro-interactions ===== */
.process-step-card:hover {
    transform: translateY(-2px);
}

.process-step-item:hover .process-step-icon {
    transform: scale(1.05);
}

/* Active step subtle lift */
.process-step-card.bg-card {
    transform: translateY(-2px);
}

/* ===== Timeline Line Reveal ===== */
.process-timeline-line {
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1) 0.5s;
}

.process-timeline-line.process-timeline-visible {
    transform: scaleY(1);
}

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

    .process-section-in-view .process-left-column,
    .process-section-in-view .process-right-column {
        animation: none !important;
        transform: none !important;
    }

    .process-step-item,
    .process-step-card,
    .process-step-icon,
    .process-mobile-icon,
    .process-step-card h3,
    .process-step-card span,
    .process-step-card p,
    .process-progress-bar {
        animation: none !important;
        transition: none !important;
    }

    .process-step-item {
        opacity: 1 !important;
        transform: none !important;
    }

    .process-timeline-line.process-timeline-visible {
        transform: scaleY(1) !important;
    }
}