/* ==========================================================================
   Homepage — phones and small tablets: the motion layer
   (assets/js/home/mobile.js). Everything here waits for html.mm-on, which the
   script sets only below 900px and only when motion is allowed; without it
   every section is exactly as it was.
   ========================================================================== */

:root {
    /* The condensed nav bar's height: stacked and pinned things rest below it. */
    --mm-pin: calc(env(safe-area-inset-top, 0px) + 4.4rem);
}

/* The Why Nebulight scroll stretch only exists while the layer is on. */
.mm-wn,
.mm-wn-pin {
    display: contents;
}

.mm-fp-trail,
.mm-fp-comet,
.mm-meter,
.mm-pt-snap,
.vl-ink {
    display: none;
}

@media (max-width: 899px) {
    /* ==========================================================================
       Our Work: each case study's picture opens as it arrives
       ========================================================================== */

    .mm-on .wk-cases {
        gap: 1.5rem;
    }

    /* The shared reveal steps aside: the picture has its own entrance. */
    .mm-on .wk-case.mx-fade {
        opacity: 1;
        transform: none;
    }

    .mm-on .wk-case.mx-fade .wk-mark {
        filter: none;
    }

    /* Each case study sits on a sheet of its own. */
    .mm-on .wk-card {
        padding: 0.7rem 0.7rem 1.35rem;
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 0.85rem;
        background:
            radial-gradient(120% 60% at 50% 0%, rgba(var(--wk-a), 0.1), transparent 70%),
            linear-gradient(180deg, #0b0e22 0%, #070a1a 100%);
        box-shadow: 0 30px 60px -40px rgba(var(--wk-a), 0.45);
    }

    .mm-on .wk-card .wk-meta {
        padding: 1.2rem 0.45rem 0;
    }

    /* The script eases the window, the zoom and the logo from frame to frame,
       so none of the transitions meant for them elsewhere may run (they would
       lag behind it, then lurch to catch up). */
    .mm-on .wk-stage,
    .mm-on .wk-case.mx-fade .wk-stage {
        transition: none;
        will-change: clip-path;
        contain: paint;
    }

    .mm-on .wk-photo img {
        transition: filter 0.9s var(--wk-ease);
        will-change: scale;
    }

    .mm-on .wk-mark,
    .mm-on .wk-case.mx-fade .wk-mark {
        transition: none;
        will-change: transform, opacity;
    }

    /* ==========================================================================
       Partners: the testimonials turn in 3D as they pass
       ========================================================================== */

    /* The turned cards reach a little above and below the row. Room for
       them inside it (the margins keep the layout), and no scrolling on that
       axis, so a vertical swipe over the row always moves the page. */
    .mm-on .pt-track {
        position: relative;
        overflow-y: hidden;
        padding-top: 2rem;
        padding-bottom: 2.5rem;
        margin-top: -1.5rem;
        margin-bottom: -1rem;
    }

    /* The row snaps to unturned markers (set by the script), not the cards. */
    .mm-on .pt-card {
        scroll-snap-align: none;
    }

    .mm-on .mm-pt-snap {
        position: absolute;
        top: 0;
        /* Until the script places them: at the row's start, never past the
           last card, where Safari would snap the row to the end. */
        left: 0;
        display: block;
        height: 1px;
        pointer-events: none;
        scroll-snap-align: start;
    }

    .mm-on .pt-card {
        will-change: transform, opacity;
        backface-visibility: hidden;
    }

    /* The quote mark drifts against the card as it turns. */
    .mm-on .pt-card::before {
        translate: calc(var(--mm-d, 0) * -2.2rem) 0;
    }

    .mm-on .pt-card.is-front {
        border-color: rgba(var(--pt-a), 0.45);
        box-shadow: 0 30px 60px -36px rgba(var(--pt-a), 0.7);
    }

    /* Arriving: the cards fly in from the right, one after another. */
    .mm-on .pt-card {
        transition: border-color 0.5s ease, box-shadow 0.5s ease, translate 1.1s var(--hx-ease), scale 1.1s var(--hx-ease);
    }

    .mm-on .pt:not(.mm-in) .pt-card {
        translate: 70vw 0;
        scale: 0.9;
    }

    .mm-on .pt.mm-in .pt-card:nth-child(2) { transition-delay: 0s, 0s, 0.08s, 0.08s; }
    .mm-on .pt.mm-in .pt-card:nth-child(3) { transition-delay: 0s, 0s, 0.16s, 0.16s; }
    .mm-on .pt.mm-in .pt-card:nth-child(4) { transition-delay: 0s, 0s, 0.24s, 0.24s; }
    .mm-on .pt.mm-in .pt-card:nth-child(5) { transition-delay: 0s, 0s, 0.32s, 0.32s; }
    .mm-on .pt.mm-in .pt-card:nth-child(6) { transition-delay: 0s, 0s, 0.4s, 0.4s; }

    /* ==========================================================================
       Our Values: each word fills with ink as it crosses the screen
       ========================================================================== */

    .mm-on .vl-inked .vl-word {
        position: relative;
        color: transparent;
        -webkit-text-stroke: 1.25px #8b88a0;
        /* A wider glide than on desktop (still clear of the screen's edge). */
        transform: translate3d(calc(var(--mx-x, 0px) * 1.8), 0, 0);
    }

    /* The full stop waits for the ink (it drops in once the word is full). */
    .mm-on .vl-inked .vl-word > .vl-dot {
        color: transparent;
        -webkit-text-stroke: 0;
    }

    /* The ink: a filled copy over the outline, wiped in from the left with a
       band of the value's colour at its leading edge. */
    .mm-on .vl-ink {
        --edge: calc(var(--vl-f, 0) * 118%);
        position: absolute;
        display: block;
        inset: 0;
        padding-bottom: 0.18em;
        color: transparent;
        -webkit-text-stroke: 0;
        background: linear-gradient(90deg,
            var(--st-ink) 0,
            var(--st-ink) calc(var(--edge) - 22%),
            rgb(var(--vl-c)) calc(var(--edge) - 4%),
            rgb(var(--vl-c)) var(--edge));
        -webkit-background-clip: text;
        background-clip: text;
        clip-path: inset(-0.2em calc((1 - var(--vl-f, 0)) * 100%) -0.3em -0.1em);
        pointer-events: none;
    }

    .mm-on .vl-ink .vl-dot {
        display: inline-block;
        color: rgb(var(--vl-c));
        -webkit-text-fill-color: rgb(var(--vl-c));
        transform-origin: 50% 80%;
    }

    /* Once the word is full, its full stop drops in. */
    .mm-on .vl-item.is-full .vl-ink .vl-dot {
        animation: mm-dot 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    }

    @keyframes mm-dot {
        0% { transform: translateY(-0.55em) scale(0.4); }
        60% { transform: translateY(0.04em) scale(1.15); }
        100% { transform: none; }
    }

    /* The words beneath follow the ink in. */
    .mm-on .vl-inked .vl-text {
        opacity: calc(0.28 + var(--vl-f, 0) * 0.72);
        translate: calc((1 - var(--vl-f, 0)) * 1.6rem) 0;
    }

    /* ==========================================================================
       The Flight Path: a comet rides the timeline
       ========================================================================== */

    .mm-on .mm-fp-trail {
        position: absolute;
        z-index: 1;
        left: calc(0.4rem - 0.5px);
        display: block;
        width: 2px;
        border-radius: 2px;
        background: linear-gradient(180deg, #7c3aed, #a78bfa 35%, #f472b6 70%, #0ea5e9);
        box-shadow: 0 0 12px rgba(124, 58, 237, 0.8);
        pointer-events: none;
    }

    .mm-on .mm-fp-comet {
        --mm-tail: 2.4rem;
        position: absolute;
        z-index: 2;
        top: 0;
        left: calc(0.4rem + 0.5px);
        display: block;
        width: 0;
        height: 0;
        pointer-events: none;
        will-change: transform;
    }

    /* The head: a bright core in a soft halo. */
    .mm-on .mm-fp-comet::before {
        content: "";
        position: absolute;
        left: -0.55rem;
        top: -0.55rem;
        width: 1.1rem;
        height: 1.1rem;
        border-radius: 50%;
        background: radial-gradient(circle, #fff 0 22%, rgba(186, 230, 253, 0.9) 34%, rgba(56, 189, 248, 0.35) 60%, transparent 72%);
        box-shadow: 0 0 22px 6px rgba(56, 189, 248, 0.45), 0 0 50px 12px rgba(124, 58, 237, 0.35);
        animation: mm-comet 1.6s ease-in-out infinite;
    }

    /* The tail streams behind it, longer the faster you scroll. */
    .mm-on .mm-fp-comet::after {
        content: "";
        position: absolute;
        left: -1.5px;
        bottom: 0;
        width: 3px;
        height: var(--mm-tail);
        border-radius: 3px;
        background: linear-gradient(0deg, rgba(255, 255, 255, 0.9), rgba(56, 189, 248, 0.5) 30%, rgba(124, 58, 237, 0));
        filter: blur(0.5px);
        transition: height 0.25s ease;
    }

    /* Scrolling back up, the tail trails below instead. */
    .mm-on .mm-fp-comet.is-up::after {
        top: 0;
        bottom: auto;
        transform: rotate(180deg);
        transform-origin: 50% 0;
    }

    @keyframes mm-comet {
        50% { transform: scale(1.25); }
    }

    /* Each stage the comet reaches: its node bursts and its number lights. */
    .mm-on .fp-stage.mm-hit .fp-node {
        animation: mm-burst 0.9s ease-out both;
    }

    .mm-on .fp-stage.mm-hit .fp-num {
        animation: mm-count 0.8s var(--hx-ease) both;
    }

    @keyframes mm-burst {
        0% { box-shadow: 0 0 0 0 rgba(var(--fp-c), 0.9), 0 0 16px rgba(var(--fp-c), 0.9); }
        100% { box-shadow: 0 0 0 1.6rem rgba(var(--fp-c), 0), 0 0 16px rgba(var(--fp-c), 0.7); }
    }

    @keyframes mm-count {
        0% { transform: translateX(-0.35rem) scale(0.9); filter: blur(4px); }
        100% { transform: none; filter: none; }
    }

    /* The telemetry grid streams past (its position is set by the script). */
    .mm-on .fp-grid {
        background-size: 4rem 4rem;
        -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 50%, #000 25%, transparent 80%);
        mask-image: radial-gradient(ellipse 90% 70% at 50% 50%, #000 25%, transparent 80%);
    }

    /* ==========================================================================
       Why Nebulight: the panels hold the screen and open one into the next
       ========================================================================== */

    /* Only when the script could pin them (.mm-pinned: the browser has
       overflow: clip and svh). Clip without becoming a scroll box, so the
       panels can pin. */
    .mm-on .wn.mm-pinned {
        overflow: clip;
    }

    .mm-on .mm-wn {
        display: block;
        position: relative;
        height: calc(100svh + (var(--count, 4) - 1) * 45svh);
    }

    .mm-on .mm-wn-pin {
        position: sticky;
        top: calc(var(--mm-pin) + 0.75rem);
        display: block;
        height: calc(100svh - var(--mm-pin) - 1.75rem);
    }

    .mm-on .mm-pinned.wn-live .wn-panels {
        height: 100%;
    }

    /* The scroll drives the opening; no timer, no lag behind the finger. */
    .mm-on .mm-pinned.wn-live .wn-panel {
        transition:
            box-shadow 0.95s var(--hx-ease),
            opacity 0.8s ease calc(var(--i, 0) * 0.1s),
            transform 1.1s var(--hx-ease) calc(var(--i, 0) * 0.1s);
    }

    .mm-on .mm-pinned.wn-live .wn-panel-img,
    .mm-on .mm-pinned.wn-live .wn-panel.is-open .wn-panel-img {
        transition: none;
    }

    .mm-on .mm-pinned.wn-live .wn-panel-bar span,
    .mm-on .mm-pinned.wn-live .wn-panel.is-open .wn-panel-bar span {
        animation: none;
    }

    /* The opened panel's words arrive quickly (in about half a second, not
       1.3s), so each principle is read as it opens. */
    .mm-on .wn-live .wn-panel.is-open .wn-panel-body > * {
        transition: opacity 0.4s ease 0.1s, transform 0.5s var(--hx-ease) 0.1s;
    }

    .mm-on .wn-live .wn-panel.is-open .wn-item-body {
        transition-delay: 0.18s;
    }

    /* ==========================================================================
       Our Reach: the photograph follows the finger
       ========================================================================== */

    .mm-on .rc-slide {
        transition: opacity 1.1s var(--hx-ease), translate 0.7s var(--hx-ease);
    }

    .mm-on .rc.mm-dragging .rc-slide {
        transition: opacity 1.1s var(--hx-ease);
    }

    .mm-on .rc-coords {
        font-variant-numeric: tabular-nums;
    }

    /* ==========================================================================
       Contact: a signal meter, and the form powering up
       ========================================================================== */

    /* The horizon at the top (contact.css) draws out from the middle as the
       section arrives; its comet waits until the line is there. */
    .mm-on .ct::before {
        transition: transform 1.4s var(--hx-ease), opacity 0.8s ease;
    }

    .mm-on .ct:not(.mm-horizon)::before {
        opacity: 0;
        transform: scaleX(0);
    }

    .mm-on .ct:not(.mm-horizon)::after {
        animation: none;
    }

    .mm-on .mm-meter {
        display: inline-flex;
        align-items: center;
        gap: 0.55rem;
        margin: 0;
        font-family: "Space Grotesk", sans-serif;
        font-size: 0.66rem;
        font-weight: 700;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: rgba(222, 224, 240, 0.6);
        transition: color 0.4s ease;
    }

    .mm-meter-bars {
        display: inline-flex;
        align-items: flex-end;
        gap: 3px;
        height: 0.9rem;
    }

    .mm-meter-bars i {
        display: block;
        width: 4px;
        border-radius: 1px;
        background: rgba(255, 255, 255, 0.16);
        transition: background-color 0.35s ease, box-shadow 0.35s ease, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .mm-meter-bars i:nth-child(1) { height: 35%; }
    .mm-meter-bars i:nth-child(2) { height: 55%; }
    .mm-meter-bars i:nth-child(3) { height: 75%; }
    .mm-meter-bars i:nth-child(4) { height: 100%; }

    .mm-meter-bars i.is-lit {
        background: linear-gradient(180deg, #38bdf8, #7c3aed);
        box-shadow: 0 0 8px rgba(56, 189, 248, 0.6);
        animation: mm-bar 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    @keyframes mm-bar {
        0% { transform: scaleY(0.3); }
    }

    .mm-meter.is-locked {
        color: #7fd3f7;
    }

    .mm-meter.is-locked .mm-meter-bars i {
        background: linear-gradient(180deg, #a5f3fc, #38bdf8);
        box-shadow: 0 0 10px rgba(56, 189, 248, 0.85);
    }

    /* A focused field glows, its label lit. */
    .mm-on .ct-field:focus-within .ct-label {
        color: #7fd3f7;
    }

    .mm-on .ct-input:focus {
        box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.3), 0 0 24px -4px rgba(56, 189, 248, 0.45);
    }

    /* Each part of the form powers up as it arrives, a scan line crossing it. */
    .mm-on .ct-group,
    .mm-on .ct-submit-row {
        position: relative;
        transition: opacity 0.8s ease, translate 1s var(--hx-ease);
    }

    .mm-on .ct-group:not(.mm-in),
    .mm-on .ct-submit-row:not(.mm-in) {
        opacity: 0;
        translate: 0 1.75rem;
    }

    .mm-on .ct-group.mm-in::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(56, 189, 248, 0.9), transparent);
        box-shadow: 0 0 12px rgba(56, 189, 248, 0.7);
        opacity: 0;
        pointer-events: none;
        animation: mm-scan 1.2s ease-out 0.2s both;
    }

    @keyframes mm-scan {
        0% { top: 0; opacity: 0; }
        15% { opacity: 1; }
        100% { top: 100%; opacity: 0; }
    }

    /* ==========================================================================
       Other ways to connect: the cards rise into place as you scroll
       ========================================================================== */

    .mm-on .cn-list > li.mx-fade {
        opacity: 1;
        transform: none;
    }

    .mm-on .cn-card {
        will-change: transform, opacity;
    }

    /* ==========================================================================
       Footer: the sign-up line lights up word by word
       ========================================================================== */

    .mm-on .sf-pitch .mm-w {
        opacity: calc(0.18 + var(--mm-l, 0) * 0.82);
        transition: opacity 0.2s linear;
    }
}