/* ── Page flow: scroll reveals, section rhythm, micro-motion ── */

html {
    scroll-behavior: auto;
}

html.lenis,
html.lenis body {
    height: auto;
}

.lenis.lenis-smooth {
    scroll-behavior: auto !important;
}

/* Reveal primitives — longer, softer ease */
.flow-reveal {
    opacity: 0;
    transform: translate3d(0, 36px, 0);
    transition:
        opacity 1.05s cubic-bezier(0.16, 1, 0.3, 1),
        transform 1.15s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
    transition-delay: 0.04s;
}

.flow-reveal.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.flow-reveal--left {
    transform: translate3d(-32px, 18px, 0);
}

.flow-reveal--left.is-visible {
    transform: translate3d(0, 0, 0);
}

.flow-reveal--right {
    transform: translate3d(32px, 18px, 0);
}

.flow-reveal--right.is-visible {
    transform: translate3d(0, 0, 0);
}

.flow-reveal--scale {
    transform: translate3d(0, 28px, 0) scale(0.96);
}

.flow-reveal--scale.is-visible {
    transform: translate3d(0, 0, 0) scale(1);
}

/* Stagger children inside a revealed group */
.flow-stagger > .flow-reveal:nth-child(1) { transition-delay: 0.05s; }
.flow-stagger > .flow-reveal:nth-child(2) { transition-delay: 0.16s; }
.flow-stagger > .flow-reveal:nth-child(3) { transition-delay: 0.27s; }
.flow-stagger > .flow-reveal:nth-child(4) { transition-delay: 0.38s; }
.flow-stagger > .flow-reveal:nth-child(5) { transition-delay: 0.49s; }
.flow-stagger > .flow-reveal:nth-child(6) { transition-delay: 0.6s; }

/* Section rhythm — softer handoffs between bands */
.page-content,
.work-showcase,
.services-section,
.trust-bar,
.process-strip {
    position: relative;
}

.hero-page + .page-content::before,
.work-showcase + .page-content::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 96px;
    background: linear-gradient(180deg, rgba(10, 12, 16, 0.1), transparent);
    pointer-events: none;
    z-index: 0;
    opacity: calc(0.55 + (var(--flow-progress, 0) * 0.45));
}

.page-content > .container,
.work-showcase > .container {
    position: relative;
    z-index: 1;
}

/* Hero mockup tracks scroll gently */
.hero-mockup {
    translate: 0 var(--flow-parallax, 0);
    transition: translate 0.15s linear;
}

/* Accent line draws in when title is visible */
.section-title.flow-reveal::after,
.section-title.is-visible::after {
    transform-origin: left center;
    animation: none;
}

.section-title.flow-reveal:not(.is-visible)::after {
    transform: scaleX(0);
    opacity: 0;
}

.section-title.is-visible::after {
    transform: scaleX(1);
    opacity: 1;
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.28s,
                opacity 0.55s ease 0.28s;
}

.section-title--center.is-visible::after,
.section-intro:not(.section-intro--left) .section-title.is-visible::after {
    transform-origin: center;
}

/* Interactive lift — buttons & cards */
.btn {
    transition:
        transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.25s ease,
        background 0.25s ease,
        border-color 0.25s ease,
        color 0.25s ease !important;
}

.btn-primary:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 28px rgba(37, 99, 235, 0.28) !important;
}

.btn-secondary:hover {
    transform: translateY(-2px) !important;
}

.service-card,
.feature-block,
.work-card,
.content-card,
.solution-card,
.process-strip__item,
.trust-item {
    transition:
        transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.35s ease,
        border-color 0.35s ease !important;
}

.service-card:hover,
.feature-block:hover,
.content-card:hover,
.solution-card:hover {
    transform: translateY(-5px) !important;
}

.work-card:hover {
    transform: translateY(-6px) !important;
}

.work-card__media img {
    transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.work-card:hover .work-card__media img {
    transform: scale(1.03);
}

.work-card__cta {
    transition: gap 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.work-card:hover .work-card__cta {
    gap: 0.55rem;
}

.trust-item:hover strong {
    color: var(--accent-blue);
}

.process-strip__item {
    position: relative;
}

.process-strip__item::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    background: var(--accent-blue);
    transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.process-strip__item:hover::after {
    width: 2.5rem;
}

/* Nav feel */
.navbar {
    transition: background 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease, backdrop-filter 0.35s ease !important;
}

.navbar--scrolled {
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.nav-links a:not(.nav-cta) {
    position: relative;
    transition: color 0.2s ease;
}

.nav-links a:not(.nav-cta)::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -4px;
    height: 1.5px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
    opacity: 0.7;
}

.nav-links a:not(.nav-cta):hover::after,
.nav-links a.active:not(.nav-cta)::after {
    transform: scaleX(1);
}

/* Footer link glide */
.footer-column a {
    transition: color 0.2s ease, padding-left 0.25s ease;
}

.footer-column a:hover {
    padding-left: 4px;
}

/* Override older “always visible” kill-switch */
.animate-on-scroll {
    opacity: 0 !important;
    visibility: visible !important;
    transform: translate3d(0, 28px, 0);
    transition: opacity 1.05s cubic-bezier(0.16, 1, 0.3, 1),
                transform 1.15s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.animate-on-scroll.animated,
.animate-on-scroll.is-visible,
.animate-on-scroll.animate-in {
    opacity: 1 !important;
    transform: translate3d(0, 0, 0) !important;
}

/* CTA block presence */
.cta-section {
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.cta-section.is-visible {
    box-shadow: 0 18px 50px rgba(15, 23, 42, 0.06);
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .hero-mockup {
        translate: none;
        transition: none;
    }

    .flow-reveal,
    .flow-reveal--left,
    .flow-reveal--right,
    .flow-reveal--scale,
    .animate-on-scroll {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .btn-primary:hover,
    .btn-secondary:hover,
    .service-card:hover,
    .feature-block:hover,
    .work-card:hover,
    .content-card:hover,
    .solution-card:hover {
        transform: none !important;
    }

    .section-title.is-visible::after {
        transition: none !important;
    }
}