/* Marketing pages (pages/home.html, pages/pricing.html): the dark hero bands, the service ticker and the motion.
   Colours come from the theme variables (partials/tailwind_theme.html). Every animation waits for html.motion, set
   in layouts/public.html only when the visitor allows motion; without it the pages are complete and still. */

/* ── Dark bands: the theme's darkest primary, a soft primary glow from the top and a faint dot grid ─────────── */
.mk-band {
    background-color: var(--brand-950);
    background-image: radial-gradient(56rem 32rem at 50% -10rem, color-mix(in srgb, var(--color-primary) 62%, transparent), transparent 72%);
}
.mk-dots {
    background-image: radial-gradient(rgba(255, 255, 255, 0.16) 1px, transparent 1.3px);
    background-size: 24px 24px;
    -webkit-mask-image: linear-gradient(to bottom, #000, transparent 80%);
    mask-image: linear-gradient(to bottom, #000, transparent 80%);
}
/* The accent underline under the key words of a heading; it wraps with the words. */
.mk-mark {
    background-image: linear-gradient(var(--color-accent), var(--color-accent));
    background-repeat: no-repeat;
    background-position: 0 96%;
    background-size: 100% 0.1em;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

/* ── Service ticker: two rows of pills sliding in opposite directions ─────────────────────────────────────── */
.mk-marquee {
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
.mk-marquee::-webkit-scrollbar { display: none; }
.mk-marquee-track { display: flex; width: max-content; gap: 0.75rem; padding: 0.25rem 0; }
/* The second copy of the pills only exists for the loop. */
html:not(.motion) .mk-marquee-track [data-copy] { display: none; }

/* ── Search demo in the hero ──────────────────────────────────────────────────────────────────────────────── */
.mk-caret { display: inline-block; width: 2px; height: 1.15em; margin-left: 2px; vertical-align: -0.2em; background: var(--color-accent); }
.mk-demo-result { transition: opacity 0.45s ease, transform 0.45s ease; }
.mk-demo-result.is-waiting { opacity: 0.25; transform: translateY(4px); }

/* ── Credit bars on the pricing cards ─────────────────────────────────────────────────────────────────────── */
.mk-meter { width: var(--w, 0%); }

/* ── Key figures of the home page: equal cells, split by diagonals (.mk-diag; .mk-diag-lg only on 4 columns) ── */
.mk-stat {
    position: relative;
    display: flex;
    flex-direction: column-reverse;
    justify-content: center;
    height: 100%;
    min-height: 9.5rem;
    padding: 1.25rem 1rem 1.25rem 2.25rem;
}
.mk-stat:not(.mk-diag) { padding-left: 0; }
.mk-stat-value {
    display: flex;
    align-items: flex-end;
    height: 4rem;
    font-size: 3rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.025em;
    color: var(--color-text);
}
.mk-stat-label { margin-top: 0.75rem; min-height: 2.5rem; font-size: 0.875rem; line-height: 1.25rem; color: var(--color-muted); }
.mk-diag::before,
.mk-diag-lg::before {
    content: "";
    position: absolute;
    left: 0.5rem;
    top: 14%;
    bottom: 14%;
    width: 2px;
    border-radius: 2px;
    background: var(--color-accent);
    transform: rotate(18deg);
}
.mk-diag-lg::before { display: none; }
@media (min-width: 640px) {
    .mk-stat-value { height: 4.5rem; font-size: 3.75rem; }
}
@media (min-width: 1024px) {
    .mk-stat.mk-diag, .mk-stat.mk-diag-lg { padding-left: 3rem; }
    .mk-diag-lg::before { display: block; }
}

@media (prefers-reduced-motion: no-preference) {
    @keyframes mk-rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
    @keyframes mk-fade { from { opacity: 0; } to { opacity: 1; } }
    @keyframes mk-float { from { transform: translateY(0); } to { transform: translateY(-12px); } }
    @keyframes mk-marquee { to { transform: translateX(-50%); } }
    @keyframes mk-underline { from { background-size: 0% 0.1em; } }
    @keyframes mk-blink { 50% { opacity: 0; } }
    @keyframes mk-zoom-out { from { transform: scale(1.12); } to { transform: scale(1); } }

    /* On load: the hero rises in, element by element (--d is the delay). */
    .motion .mk-in { animation: mk-rise 0.95s cubic-bezier(0.2, 0.8, 0.2, 1) both; animation-delay: var(--d, 0ms); }
    .motion .mk-in-fade { animation: mk-fade 1.2s ease both; animation-delay: var(--d, 0ms); }
    .motion .mk-mark { animation: mk-underline 1s cubic-bezier(0.2, 0.8, 0.2, 1) 0.75s both; }
    .motion .mk-zoom { animation: mk-zoom-out 2.4s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
    .motion .mk-float { animation: mk-float 4.8s ease-in-out infinite alternate; animation-delay: var(--f, 0s); }
    .motion .mk-caret { animation: mk-blink 1s steps(1) infinite; }

    /* On scroll: [data-reveal] rises in when it reaches the screen (static/js/public-motion.js adds .is-in). */
    .motion [data-reveal] {
        opacity: 0;
        transform: translateY(32px);
        transition: opacity 0.85s ease, transform 0.85s cubic-bezier(0.2, 0.8, 0.2, 1);
        transition-delay: var(--d, 0ms);
    }
    .motion [data-reveal="left"] { transform: translateX(-40px); }
    .motion [data-reveal="right"] { transform: translateX(40px); }
    .motion [data-reveal="zoom"] { transform: scale(0.94); }
    .motion [data-reveal].is-in { opacity: 1; transform: none; }
    .motion [data-reveal] .mk-photo { transform: scale(1.1); transition: transform 1.8s cubic-bezier(0.2, 0.8, 0.2, 1); }
    .motion [data-reveal].is-in .mk-photo { transform: scale(1); }

    .motion .mk-marquee { overflow: hidden; }
    .motion .mk-marquee-track { animation: mk-marquee var(--speed, 70s) linear infinite; }
    .motion .mk-marquee-track.is-reverse { animation-direction: reverse; }
    .motion .mk-marquee:hover .mk-marquee-track,
    .motion .mk-marquee:focus-within .mk-marquee-track { animation-play-state: paused; }

    .motion .mk-meter { width: 0; transition: width 1.4s cubic-bezier(0.2, 0.8, 0.2, 1) 0.35s; }
    .motion .is-in .mk-meter { width: var(--w, 0%); }

    /* The diagonals between the key figures draw in after their cell. */
    .motion .mk-diag::before,
    .motion .mk-diag-lg::before {
        transform: rotate(18deg) scaleY(0);
        transition: transform 1.1s cubic-bezier(0.2, 0.8, 0.2, 1);
        transition-delay: calc(var(--d, 0ms) + 300ms);
    }
    .motion .mk-diag.is-in::before,
    .motion .mk-diag-lg.is-in::before { transform: rotate(18deg) scaleY(1); }

    /* The line joining the steps fills from the first to the last. */
    .motion .mk-line { transform: scaleY(0); transform-origin: top; transition: transform 1.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.2s; }
    .motion .is-in .mk-line { transform: none; }
    @media (min-width: 1024px) {
        .motion .mk-line { transform: scaleX(0); transform-origin: left; }
    }

    /* "How it works" on wide screens: the section is taller than the screen and its stage stays pinned; the scroll
       position lights the steps one by one (.is-active) and fills the line up to the last one (--line). */
    @media (min-width: 1024px) and (min-height: 640px) {
        .motion .mk-steps { height: 260vh; }
        .motion .mk-steps-stage { position: sticky; top: 72px; display: flex; align-items: center; height: calc(100vh - 72px); }
        .motion .mk-steps [data-step] { transition-delay: 0s; }
        .motion .mk-steps [data-step]:not(.is-active) { opacity: 0; transform: translateY(28px) scale(0.96); }
        .motion .mk-steps [data-step].is-active { opacity: 1; transform: none; }
        .motion .mk-steps .mk-step-icon { transition: background-color 0.5s ease, color 0.5s ease, box-shadow 0.5s ease; }
        .motion .mk-steps [data-step].is-active .mk-step-icon { background-color: var(--color-text); color: #fff; }
        .motion .mk-steps .mk-line,
        .motion .mk-steps .is-in .mk-line { transform: scaleX(var(--line, 0)); transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1); }
        .motion .mk-steps-hint { display: flex; transition: opacity 0.4s ease; }
        .motion .mk-steps.is-done .mk-steps-hint { opacity: 0; }
    }
}