/* ==========================================================================
   SMITH PUBLICITY — MOTION LAYER
   Ported VERBATIM from the Agentis design preview's v3 "Editorial + Motion"
   (designs/v3-editorial-animated/assets/css/redesign-ftf-motion.css) per
   Matt 2026-08-07: "keep moving forward with v1, but we do need to add in
   some of the v3 motion."

   Two deliberate departures from the v3 source, both because our v1 build
   keeps its own header system (figma-retrofit-header.css teal->white
   .is-scrolled swap):
     - v3's .ftf-scrolled cream/backdrop-blur header recolor is DROPPED
       (only the soft shadow is kept);
     - v3's scrolled header padding compression is DROPPED (it fought the
       retrofit header's own height).
   Plus one addition: the new blog-archive elements join the underline and
   lift groups (v3 predates that template).

   Original system notes (Fifty Thousand Feet interaction logic):
   - Scroll reveals: opacity 0 + translateY(20px) -> visible, 800ms
     ease-out, IntersectionObserver adds .ftf-visible, staggered via
     --ftf-delay
   - Animated underline: 1px line scaling from the left on hover, 0.3s
   - Page transitions: 180ms cross-fade (native View Transitions API)
   - Reduced motion: everything off under prefers-reduced-motion
   Progressive enhancement: every rule is gated on html.ftfm-on, added by
   redesign-ftf-motion.js. No JS -> no hidden content, ever.
   ========================================================================== */

:root {
    --ftfm-duration: 800ms;
    --ftfm-distance: 20px;
    --ftfm-ease: ease-out;
    --ftfm-page-ease: cubic-bezier(0.76, 0, 0.24, 1);
}

/* 1. SCROLL REVEALS — the fade-in / .visible system */

html.ftfm-on .ftf-reveal {
    opacity: 0;
    transform: translateY(var(--ftfm-distance));
    transition:
        opacity var(--ftfm-duration) var(--ftfm-ease),
        transform var(--ftfm-duration) var(--ftfm-ease);
    transition-delay: var(--ftf-delay, 0ms);
    will-change: opacity, transform;
}

html.ftfm-on .ftf-reveal[data-ftf="fade"] {
    transform: none;
}

html.ftfm-on .ftf-reveal[data-ftf="fade-left"] {
    transform: translateX(var(--ftfm-distance));
}

html.ftfm-on .ftf-reveal[data-ftf="fade-right"] {
    transform: translateX(calc(var(--ftfm-distance) * -1));
}

html.ftfm-on .ftf-reveal.ftf-visible {
    opacity: 1;
    transform: none;
    will-change: auto;
}

/* 2. ANIMATED UNDERLINE (footer + inline "more" links) */

html.ftfm-on .footer-col__links a,
html.ftfm-on .sp-card__more,
html.ftfm-on .latest-posts__card-more,
html.ftfm-on .blog-archive__card-more,
html.ftfm-on .sp-crumbs a {
    text-decoration: none;
    position: relative;
}

html.ftfm-on .footer-col__links a::before,
html.ftfm-on .sp-card__more::before,
html.ftfm-on .latest-posts__card-more::before,
html.ftfm-on .blog-archive__card-more::before,
html.ftfm-on .sp-crumbs a::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -3px;
    height: 1px;
    background-color: currentColor;
    transform: scaleX(0);
    transform-origin: 0 center;
    transition: transform 0.3s ease-in-out;
}

html.ftfm-on .footer-col__links a:hover::before,
html.ftfm-on .sp-card__more:hover::before,
html.ftfm-on .latest-posts__card-more:hover::before,
html.ftfm-on .blog-archive__card-more:hover::before,
html.ftfm-on .sp-crumbs a:hover::before {
    transform: scaleX(1);
}

/* 3. HEADER — keep OUR retrofit teal->white swap; add only the soft
      shadow + eased transitions from v3 */

.site-header {
    transition:
        box-shadow 0.35s var(--ftfm-page-ease),
        background-color 0.35s var(--ftfm-page-ease);
}

html.ftfm-on.ftf-scrolled .site-header {
    box-shadow: 0 6px 18px rgba(14, 27, 68, 0.05);
}

/* 4. PAGE TRANSITIONS — 180ms cross-fade (no-op without support) */

@view-transition {
    navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 180ms;
    animation-timing-function: var(--ftfm-page-ease);
}

/* 5. MICRO-INTERACTIONS */

html.ftfm-on .sp-card__more,
html.ftfm-on .latest-posts__card-more,
html.ftfm-on .blog-archive__card-more {
    transition: color 0.25s ease;
}

html.ftfm-on .card--post,
html.ftfm-on .latest-posts__card,
html.ftfm-on .blog-archive__card,
html.ftfm-on .content-features__item,
html.ftfm-on .block-team__member,
html.ftfm-on .sp-card {
    transition:
        transform 0.45s var(--ftfm-page-ease),
        box-shadow 0.45s var(--ftfm-page-ease);
}

@keyframes ftfm-marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

.ftfm-marquee {
    white-space: nowrap;
    width: 100%;
    position: relative;
    overflow: hidden;
}

.ftfm-marquee__content {
    display: inline-flex;
    gap: 10rem;
    will-change: transform;
    animation: ftfm-marquee 40s linear infinite;
}

.ftfm-marquee:hover .ftfm-marquee__content {
    animation-play-state: paused;
}

/* 6. REDUCED MOTION — hard off-switch */

@media (prefers-reduced-motion: reduce) {
    html.ftfm-on .ftf-reveal {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    ::view-transition-group(*),
    ::view-transition-old(*),
    ::view-transition-new(*) {
        animation: none !important;
    }

    .ftfm-marquee__content {
        animation: none !important;
    }
}