/* motion layer — loaded after style.css
   Everything here is driven by classes that main.js adds, so without JS
   (or with reduced motion) the page renders exactly as the base styles. */

/* ================================================================ Cursor */
/* Native arrow hidden everywhere the custom cursor is active, except in
   text fields where the I-beam matters. */
.has-dot-cursor :not(input):not(textarea):not(select) { cursor: none; }
.has-dot-cursor input, .has-dot-cursor textarea { cursor: text; }

/* Small red dot. Drawn at 44px and scaled down so it stays crisp when it
   grows over links. Position + scale are set every frame from JS. */
.cursor {
    width: 44px;
    height: 44px;
    margin: -22px 0 0 -22px;
    background: var(--accent);
    transform: translate3d(-200px, -200px, 0) scale(0.27);
    transition: opacity 0.25s, background-color 0.3s, box-shadow 0.3s;
    will-change: auto;
    z-index: 151;
}
.cursor.is-hover {
    width: 44px;
    height: 44px;
    margin: -22px 0 0 -22px;
    background: color-mix(in srgb, var(--accent) 22%, transparent);
    box-shadow: inset 0 0 0 1.5px var(--accent);
}
.cursor.is-text { opacity: 0; }

/* Large inverted disc with a label ("View", "Let's talk"...). White +
   difference blending inverts whatever is underneath it; the black label
   therefore shows the original colour through the disc. */
.mx-cursor-big {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 150;
    width: 128px;
    height: 128px;
    margin: -64px 0 0 -64px;
    border-radius: 50%;
    background: #fff;
    mix-blend-mode: difference;
    pointer-events: none;
    display: grid;
    place-items: center;
    opacity: 0;
    transform: translate3d(-200px, -200px, 0) scale(0);
    transition: opacity 0.3s;
}
.mx-cursor-big.is-on { opacity: 1; }
/* over coloured blocks (the CTA band) a solid white disc reads better */
.mx-cursor-big.is-solid { mix-blend-mode: normal; background: #fff; box-shadow: 0 18px 40px -18px rgba(11, 11, 12, 0.55); }
.mx-cursor-big.is-solid .mx-cursor-label { color: var(--ink); }
.mx-cursor-label {
    color: #000;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.02rem;
    letter-spacing: -0.01em;
    white-space: nowrap;
    opacity: 0;
    transform: translateY(8px) scale(0.85);
    transition: opacity 0.2s, transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.mx-cursor-big.is-big .mx-cursor-label { opacity: 1; transform: none; transition-delay: 0.08s; }

/* ======================================================= Reveal upgrades */
.js .will-reveal {
    transition:
        opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1) var(--d, 0ms),
        transform 1.1s cubic-bezier(0.16, 1, 0.3, 1) var(--d, 0ms);
}
.js .will-reveal:not(.is-in) { opacity: 0; transform: translateY(40px); }
.js .will-reveal[data-r="left"]:not(.is-in)  { transform: translateX(40px); }
.js .will-reveal[data-r="right"]:not(.is-in) { transform: translateX(-40px); }
.js .will-reveal[data-r="scale"]:not(.is-in) { transform: translateY(28px) scale(0.95); }
/* cards in a staggered group rise a little further and settle */
.js [data-stagger] > .will-reveal:not(.is-in) { transform: translateY(64px) scale(0.97); }

/* eyebrow rule draws itself in while the label decodes */
.js .eyebrow.will-reveal::before {
    transform-origin: left center;
    transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--d, 0ms) + 120ms);
}
.js .eyebrow.will-reveal:not(.is-in)::before { transform: scaleX(0); }

/* masked word-by-word headline reveal */
.split-words .wi {
    transform-origin: 0 100%;
    transition: transform 1.05s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--wi, 0) * 55ms);
}
.js .split-words:not(.is-in) .wi { transform: translateY(115%) rotate(6deg); }

/* ============================================ Scroll-scrubbed text fill */
/* --sp (0..1) is the scroll progress of the block, --i the word index,
   --n the word count. Each word fades in over a soft 5-word window. */
.mx-scrub .mx-sw {
    opacity: calc(0.2 + 0.8 * clamp(0, (var(--sp, 0) * (var(--n, 1) + 5) - var(--i, 0)) / 5, 1));
}
.mx-scrub--light .mx-sw {
    opacity: calc(0.3 + 0.7 * clamp(0, (var(--sp, 0) * (var(--n, 1) + 5) - var(--i, 0)) / 5, 1));
}
/* on light backgrounds the lead fills from light grey to full ink */
.lead.mx-scrub--ink { color: var(--ink); }

/* ================================================ Hero rotating word */
.mx-rot {
    position: relative;
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
    white-space: nowrap;
    /* room for descenders inside the mask without moving the line */
    padding: 0.22em 0.04em 0.2em;
    margin: -0.22em -0.04em -0.2em;
}
.mx-rot-in { display: inline-block; will-change: transform; }
.mx-rot-in.is-next { position: absolute; left: 0.04em; top: 0.22em; transform: translate3d(0, 105%, 0); }

/* ================================================== Count-up numbers */
.mx-counting { display: inline-block; }

/* ========================================================= Marquee */
.marquee.mx-driven .marquee-track { animation: none; will-change: transform; }

/* ================================== Letter-roll hover (nav + buttons) */
.mx-sr {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}
.mx-roll-w {
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
    white-space: nowrap;
}
.mx-roll-c {
    display: inline-block;
    position: relative;
    transition: transform 0.55s cubic-bezier(0.7, 0, 0.2, 1) calc(var(--ci, 0) * 18ms);
}
.mx-roll-c::after {
    content: attr(data-c);
    position: absolute;
    left: 0;
    top: 100%;
}
a:hover .mx-roll-c,
button:hover .mx-roll-c,
a:focus-visible .mx-roll-c,
button:focus-visible .mx-roll-c { transform: translateY(-100%); }

/* =================================================== Safety switches */
@media (hover: none), (pointer: coarse) {
    .cursor, .mx-cursor-big { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
    .cursor, .mx-cursor-big { display: none !important; }
    .js .will-reveal, .js .split-words .wi { opacity: 1 !important; transform: none !important; transition: none !important; }
    .js .eyebrow.will-reveal::before { transform: none !important; }
    .mx-scrub .mx-sw { opacity: 1 !important; }
    .mx-roll-c { transition: none !important; transform: none !important; }
    .mx-rot { transition: none !important; }
}