/* ==========================================================================
   Homepage — shared motion layer (assets/js/home/motion.js).
   Everything here is gated on html.mx-on, which the script only sets when
   motion is allowed; without it the page is fully static and complete.
   ========================================================================== */

/* ---------- Headline reveals: words or lines rise through a mask ---------- */

.mx-on .mx-w {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
    /* Room for descenders and overshoot inside the mask. */
    padding: 0.04em 0.05em 0.26em;
    margin: -0.04em -0.05em -0.26em;
}

.mx-on .mx-wi {
    display: inline-block;
    transform: translate3d(0, 108%, 0);
    transition: transform 1s var(--hx-ease);
    transition-delay: calc(var(--mx-d, 0ms) + min(var(--i, 0), 14) * 38ms);
}

.mx-on .mx-l {
    display: block;
    overflow: hidden;
    padding-bottom: 0.24em;
    margin-bottom: -0.24em;
}

.mx-on .mx-li {
    display: block;
    transform: translate3d(0, 108%, 0);
    transition: transform 1.1s var(--hx-ease);
    transition-delay: calc(var(--mx-d, 0ms) + var(--i, 0) * 95ms);
}

.mx-on .mx-in .mx-wi,
.mx-on .mx-in .mx-li {
    transform: none;
}

/* ---------- Supporting content: a short rise, staggered in batches ---------- */

.mx-on .mx-fade {
    opacity: 0;
    transform: translate3d(0, 24px, 0);
    transition:
        opacity 0.9s var(--hx-ease) var(--mx-d, 0ms),
        transform 1.1s var(--hx-ease) var(--mx-d, 0ms);
}

.mx-on .mx-fade.mx-in {
    opacity: 1;
    transform: none;
}

/* Section labels draw their rule in after the text arrives. */
.mx-on .mx-label::before {
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.9s var(--hx-ease) calc(var(--mx-d, 0ms) + 0.2s);
}

.mx-on .mx-label.mx-in::before {
    transform: none;
}

/* Services: the image stage opens like a shutter as it arrives. */
.mx-on .sv-stage.mx-fade .sv-frame {
    clip-path: inset(100% 0 0 0 round 0.5rem);
    transition: clip-path 1.3s var(--hx-ease) calc(var(--mx-d, 0ms) + 0.1s);
}

.mx-on .sv-stage.mx-fade.mx-in .sv-frame {
    clip-path: inset(0 0 0 0 round 0.5rem);
}

/* ---------- Chapter transitions ----------
   Where the page turns between dark and light, the incoming section rises
   with rounded top corners (painted in the previous section's colour) that
   flatten as it settles. Transform-only, so it costs no layout or paint. */

.mx-corner {
    display: none;
}

.mx-on .mx-corner {
    --mx-r: clamp(1.75rem, 5.5vw, 4.75rem);
    position: absolute;
    z-index: 5;
    top: 0;
    display: block;
    width: var(--mx-r);
    height: var(--mx-r);
    pointer-events: none;
    will-change: transform;
}

.mx-on .mx-corner--l {
    left: 0;
    background: radial-gradient(circle at 100% 100%, transparent calc(var(--mx-r) - 0.5px), var(--mx-prev) var(--mx-r));
    transform: scale(calc(1 - var(--mx-p, 1)));
    transform-origin: 0 0;
}

.mx-on .mx-corner--r {
    right: 0;
    background: radial-gradient(circle at 0% 100%, transparent calc(var(--mx-r) - 0.5px), var(--mx-prev) var(--mx-r));
    transform: scale(calc(1 - var(--mx-p, 1)));
    transform-origin: 100% 0;
}

/* ---------- Ticker: grab it to slide it by hand ---------- */

.mx-on .hxm-viewport {
    cursor: grab;
    touch-action: pan-y;
    -webkit-user-select: none;
    user-select: none;
}

.mx-on .hxm.is-dragging .hxm-viewport {
    cursor: grabbing;
}

.mx-on .hxm-item {
    transition: color 0.4s ease;
}

.mx-on .hxm.is-dragging .hxm-item {
    color: #fff;
}

/* ---------- Depth ---------- */

/* Our Work: each case study's stage opens like a shutter as it arrives. */
.mx-on .wk-case.mx-fade .wk-stage {
    clip-path: inset(100% 0 0 0 round 0.5rem);
    transition: clip-path 1.3s var(--hx-ease) calc(var(--mx-d, 0ms) + 0.1s);
}

.mx-on .wk-case.mx-fade.mx-in .wk-stage {
    clip-path: inset(0 0 0 0 round 0.5rem);
}

/* Our Values: the words glide sideways, alternating direction. */
.mx-on .vl-word {
    transform: translate3d(var(--mx-x, 0px), 0, 0);
    will-change: transform;
}

/* ---------- Microinteractions ---------- */

/* Contact: the signal dot answers each keystroke. */
.mx-on .ct-signal-dot.is-ping {
    animation: mx-ping 0.75s ease-out;
}

@keyframes mx-ping {
    0% { box-shadow: 0 0 0 0 rgba(52, 211, 238, 0.75), 0 0 12px rgba(14, 165, 233, 0.8); }
    100% { box-shadow: 0 0 0 14px rgba(52, 211, 238, 0), 0 0 12px rgba(14, 165, 233, 0.8); }
}

/* Contact: a soft light follows the pointer across the section. */
.mx-spot {
    display: none;
}

.mx-on .mx-spot {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 44rem;
    height: 44rem;
    margin: -22rem 0 0 -22rem;
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    background: radial-gradient(closest-side, rgba(139, 92, 246, 0.16), rgba(14, 165, 233, 0.06) 55%, transparent);
    transition: opacity 0.8s ease;
    will-change: transform;
}

.mx-on .ct.is-lit .mx-spot {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .mx-on .mx-wi,
    .mx-on .mx-li,
    .mx-on .mx-fade,
    .mx-on .mx-label::before,
    .mx-on .vl-word {
        transform: none !important;
        opacity: 1 !important;
        transition: none !important;
    }

    .mx-on .sv-stage .sv-frame,
    .mx-on .wk-case .wk-stage {
        clip-path: none !important;
    }

    .mx-on .hxm-viewport {
        cursor: auto;
    }

    .mx-corner,
    .mx-spot {
        display: none !important;
    }
}