/**
 * How we work — ADGO AnimatedListSection
 * Light theme tokens live in style.css ([data-theme='light'])
 */

[data-theme='light'] .how-we-work-brand-tint {
    background-color: rgb(0 242 255 / 0.06);
}

/* Keep pinned viewport on #eee while scrolling */
#service .how-we-work-track,
#service [data-how-we-work-pin] {
    background-color: #eee;
}

/* Headline wipe */
.how-we-work-headline [data-line-inner] {
    opacity: 0;
}

.how-we-work-headline [data-brand-rect],
.how-we-work-headline [data-fg-rect] {
    transform: scaleX(0);
    transform-origin: left center;
}

.how-we-work-headline.is-revealed [data-line-inner] {
    opacity: 1;
}

.how-we-work-headline.is-revealed [data-brand-rect],
.how-we-work-headline.is-revealed [data-fg-rect] {
    transform: scaleX(0);
}

/* Steps — GSAP drives desktop; CSS fallback */
.how-we-work-step {
    opacity: 0.4;
    transform: translateX(0);
    will-change: opacity, transform;
}

.how-we-work-step[data-active='true'] {
    opacity: 1;
    transform: translateX(48px);
}

.how-we-work-indicator {
    width: 12px;
    height: 12px;
    will-change: transform;
}

.how-we-work-mobile-square {
    width: 12px;
    height: 12px;
}

/* Pinned viewport — GSAP ScrollTrigger pin target */
[data-how-we-work-pin] {
    height: 100vh;
    height: 100dvh;
    width: 100%;
    align-items: flex-start;
    /* Clear fixed header so headline does not sit underneath */
    padding-top: calc(var(--spacing-header, 104px) + 32px);
}

@media (min-width: 1024px) {
    .how-we-work-steps-col {
        margin-top: -8px;
    }

    .how-we-work-step-title {
        font-size: clamp(calc(0.95rem * 1.15), calc(1.15vw * 1.15), calc(1.125rem * 1.15));
        line-height: 1.25;
    }

    .how-we-work-step-desc {
        font-size: clamp(calc(0.8125rem * 1.15), calc(0.95vw * 1.15), calc(0.875rem * 1.15));
        line-height: 1.45;
    }

    .how-we-work-track.is-scroll-locked [data-how-we-work-pin] {
        will-change: transform;
    }
}

/* Image stack — GF flex-col vertical carousel */
#how-we-work-image-stack {
    will-change: transform;
}

#how-we-work-image-stack picture {
    display: block;
    height: 100%;
    width: 100%;
}

#how-we-work-image-stack img {
    object-fit: cover;
}

@media (prefers-reduced-motion: reduce) {
    .how-we-work-track {
        min-height: auto !important;
    }

    [data-how-we-work-pin] {
        height: auto !important;
        min-height: auto !important;
    }

    .how-we-work-step {
        opacity: 1 !important;
        transform: none !important;
    }

    .how-we-work-indicator {
        display: none;
    }

    #how-we-work-image-stack {
        transform: none !important;
    }

    #how-we-work-image-stack > div:not(:first-child) {
        display: none;
    }
}