/* studioram.app motion: the rules motion.js needs.
   Nothing here hides content. motion.js adds `motion` to <html> when it runs, and the
   classes below (`is-hidden`, `is-steps`, `is-drift`, `lenis`) only exist while it does,
   so a page whose scripts never arrive looks exactly as it did before. */

/* ── Glide scrolling (Lenis) ─────────────────────────────────────────────── */
html.lenis,
html.lenis body { height: auto; }
/* styles.css sets scroll-behavior: smooth; two smooth scrollers fight each other. */
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; } /* clip shifted the page in Firefox */
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }

/* Without motion.js (reduced motion, blocked scripts) a jump to #section lands clear of the bar. */
html:not(.motion) { scroll-padding-top: 80px; }

/* ── Menu bar: hides going down, returns going up ────────────────────────── */
html.motion .nav {
    transition: background 0.3s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
html.motion .nav.is-hidden { transform: translateY(-110%); }

/* ── Hero headline: each line rises from behind its own mask ─────────────── */
/* Plain CSS, not a script: the headline is on screen at the first paint and must never
   wait for one. It replaces the fadeInUp that styles.css gives a bare .hero-line. */
.hero-mask {
    display: block;
    overflow: hidden; /* for browsers without overflow: clip */
    overflow: clip;
    padding-bottom: 0.14em;
    margin-bottom: -0.14em;
}
.hero-mask > .hero-line { animation: heroRise 1.1s cubic-bezier(0.22, 1, 0.36, 1) both; }
.hero-mask:nth-child(1) > .hero-line { animation-delay: 0.1s; }
.hero-mask:nth-child(2) > .hero-line { animation-delay: 0.2s; }
@keyframes heroRise {
    from { transform: translateY(110%); }
    to { transform: none; }
}

/* ── Titles that rise from behind a mask (SplitText) ─────────────────────── */
/* Room under each line so the mask does not cut the tails of g, y and p. */
.split-line-mask { padding-bottom: 0.14em; margin-bottom: -0.14em; }

/* ── FAQ: motion.js animates the height, so the max-height trick steps aside ─ */
html.motion .faq-item .faq-answer {
    max-height: none;
    height: 0;
    transition: none;
}
html.motion .faq-item.open .faq-answer { height: auto; }

/* ── Pinned steps (data-steps): one step on screen, the scroll picks which ── */
.is-steps {
    display: grid;
    max-width: 760px;
}
.is-steps > .pipeline-connector { display: none; }
.is-steps > .pipeline-step {
    grid-area: 1 / 1;
    align-self: start;
    /* Not `all`: a CSS transition on transform or opacity would smear the scripted move. */
    transition: border-color 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
    pointer-events: none;
}
.is-steps > .pipeline-step.is-active { pointer-events: auto; }
.is-steps > .pipeline-step:hover { transform: none; }

.steps-progress {
    display: grid;
    grid-template-columns: repeat(var(--steps, 5), 1fr);
    gap: 10px 0;
    max-width: 760px;
    margin: 0 auto 28px;
    font-family: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-align: center;
}
.steps-progress span {
    color: var(--text-muted);
    opacity: 0.45;
    transition: opacity 0.4s var(--ease-out), color 0.4s var(--ease-out);
}
.steps-progress span.is-active { color: var(--cyan); opacity: 1; }
.steps-progress i {
    grid-column: 1 / -1;
    height: 2px;
    border-radius: 2px;
    background: var(--border);
    overflow: hidden;
}
.steps-progress b {
    display: block;
    height: 100%;
    background: var(--cyan);
    transform: scaleX(0);
    transform-origin: 0 50%;
}

/* ── Row that pans with the page (data-drift) ────────────────────────────── */
/* Snapping would pull the row back to a card edge on every frame of the pan. */
.is-drift { scroll-snap-type: none; }

/* ── Reduced motion ──────────────────────────────────────────────────────── */
/* motion.js never loads then. This also stills the page's own CSS intros and loops. */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}

/* /docs: its sticky section bar follows the menu bar up. */
html.motion .docs-mininav { transition: top 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
html.nav-hidden .docs-mininav { top: 0; }

/* The glow behind call-to-action sections sat on top of the /business enquiry form and
   took every click (pre-existing, found 2026-10-14). It is decoration only. */
.cta-section::before { pointer-events: none; }