/* ==========================================================================
   MetaLink Cinema Kit — cinema-kit.css  (v1.0.0)
   Scroll-driven motion for any site. Everything is scoped to html.cx, which
   is set only when the visitor has NOT asked for reduced motion — so with the
   class removed, the page is simply the plain, fully visible design.
   Theme it by overriding the --cx-* variables below.
   ========================================================================== */
:root{
  --cx-bg:#ffffff;          /* page surface (also the default seam / wipe colour) */
  --cx-ink:#14131c;         /* text on light */
  --cx-dark:#1a1428;        /* loader, dimming, dark blocks */
  --cx-accent:#6d3fa0;      /* progress bar, rails, seam flecks */
  --cx-accent-2:#8b5fbf;    /* second gradient stop */
  --cx-hot:#e8400a;         /* last stop of the progress bar */
  --cx-spot:rgba(109,63,160,.12);   /* cursor spotlight colour */
  --cx-glow:rgba(139,95,191,.42);   /* glow inside bands / dark cards */
  --cx-card-bg:#ffffff;     /* background of stacking cards */
  --cx-radius:14px;
  --cx-ease:cubic-bezier(.16,1,.3,1);
}

/* ---------- smooth-scroll plumbing (Lenis) ---------- */
html.cx{scroll-behavior:auto}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
.lenis.lenis-stopped{overflow:hidden}
html.cx-loading,html.cx-loading body{overflow:hidden}
html.cx-loading::after,html.cx-entering::after{content:"";position:fixed;inset:0;z-index:9990;background:var(--cx-dark)}

/* ---------- progress bar ---------- */
.cx-bar{position:fixed;top:0;left:0;width:100%;height:3px;z-index:9000;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--cx-accent),var(--cx-accent-2) 55%,var(--cx-hot));pointer-events:none}

/* ---------- loader ---------- */
.cx-loader{position:fixed;inset:0;z-index:9999;background:var(--cx-dark);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.8rem;border-radius:0 0 36px 36px;transition:transform .95s cubic-bezier(.76,0,.24,1)}
.cx-loader.out{transform:translateY(-102%)}
.cx-ld-name{font-weight:700;font-size:1.5rem;letter-spacing:-.01em;display:flex;align-items:center;gap:.75rem}
.cx-ld-name img{height:56px;width:auto;display:block}
.cx-ld-tag{font-size:.82rem;color:rgba(255,255,255,.5);text-align:center;max-width:30ch;transition:opacity .4s,translate .4s}
.cx-ld-bar{width:min(22rem,70vw);height:1px;background:rgba(255,255,255,.16)}
.cx-ld-bar i{display:block;height:100%;width:0;background:var(--cx-accent-2)}
.cx-ld-row{width:min(22rem,70vw);display:flex;justify-content:space-between;margin-top:-1rem;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.45)}
.cx-ld-row b{font-weight:500;color:#fff;font-variant-numeric:tabular-nums}
.cx-loader.out .cx-ld-tag{opacity:0;translate:0 -12px}

/* ---------- page curtain (multi-page sites, data-curtain="on") ---------- */
.cx-curtain{position:fixed;inset:0;z-index:9980;background:var(--cx-dark);display:grid;place-items:center;transform:translateY(100%);pointer-events:none;border-radius:36px 36px 0 0}
.cx-curtain img{height:52px;width:auto;opacity:0}
.cx-curtain b{font-size:1.1rem;color:#fff;opacity:0;font-weight:600}
.cx-curtain.cover{transform:translateY(0);transition:transform .6s cubic-bezier(.76,0,.24,1);pointer-events:all;border-radius:0}
.cx-curtain.cover img,.cx-curtain.cover b,.cx-curtain.hold img,.cx-curtain.hold b{opacity:1;transition:opacity .3s .25s}
.cx-curtain.hold{transform:translateY(0);border-radius:0}
.cx-curtain.lift{transform:translateY(-102%);transition:transform .85s cubic-bezier(.76,0,.24,1);border-radius:0 0 36px 36px}

/* ---------- split / chars / read ---------- */
.cx .cx-w{display:inline-block;overflow:hidden;vertical-align:top;padding:.1em .06em .18em;margin:-.1em -.06em -.18em}
.cx .cx-wi{display:inline-block;transform:translateY(118%);transition:transform 1.05s var(--cx-ease);transition-delay:calc(var(--i,0)*var(--cx-step,65ms) + var(--cx-base,0ms))}
.cx .cx-go .cx-wi{transform:none}
.cx .cx-ch{display:inline-block;opacity:0;translate:0 .4em;filter:blur(10px);transition:opacity .8s cubic-bezier(.25,1,.5,1),translate .8s cubic-bezier(.25,1,.5,1),filter .8s cubic-bezier(.25,1,.5,1);transition-delay:calc(var(--i,0)*var(--cx-step,38ms) + var(--cx-base,0ms))}
.cx .cx-go .cx-ch{opacity:1;translate:0 0;filter:blur(0)}
.cx .cx-unit{padding:.06em .04em .17em;margin:-.06em -.04em -.17em}
.cx .cx-rw{opacity:.16;transition:opacity .2s linear}

/* ---------- reveal / stagger ---------- */
.cx [data-cx~="reveal"],.cx [data-cx~="stagger"] > *{opacity:0;transform:translateY(48px) scale(.975);transition:opacity .9s ease,transform 1.1s var(--cx-ease);transition-delay:var(--cx-d,0ms)}
.cx [data-cx-from="left"],.cx [data-cx-from="left"] > *{transform:translateX(-80px)}
.cx [data-cx-from="right"],.cx [data-cx-from="right"] > *{transform:translateX(80px)}
.cx [data-cx-from="zoom"],.cx [data-cx-from="zoom"] > *{transform:scale(.82)}
.cx [data-cx-from="fade"],.cx [data-cx-from="fade"] > *{transform:none}
.cx [data-cx-from="persp"],.cx [data-cx-from="persp"] > *{transform:perspective(1200px) rotateX(12deg) translateY(70px);transform-origin:50% 100%}
.cx [data-cx~="reveal"].cx-in,.cx [data-cx~="stagger"] > .cx-in{opacity:1;transform:none}
/* wipe: a cover sweeps away (set --cx-wipe to the colour behind the card) */
.cx [data-cx-from="wipe"],.cx [data-cx-from="wipe"] > *{opacity:1;transform:none;position:relative}
.cx [data-cx-from="wipe"]::after,.cx [data-cx-from="wipe"] > *::after{content:"";position:absolute;inset:-1px;border-radius:inherit;background:var(--cx-wipe,var(--cx-bg));transform-origin:100% 50%;transition:transform 1.15s cubic-bezier(.77,0,.18,1);transition-delay:var(--cx-d,0ms);z-index:5;pointer-events:none}
.cx [data-cx-from="wipe"].cx-in::after,.cx [data-cx-from="wipe"] > .cx-in::after{transform:scaleX(0)}
/* icon / number that pops when its card appears: add class="cx-pop" */
.cx .cx-pop{display:inline-block;scale:.3;rotate:-30deg;transition:scale .9s cubic-bezier(.2,1.5,.3,1) .3s,rotate .9s cubic-bezier(.2,1.2,.3,1) .3s}
.cx .cx-in .cx-pop,.cx .cx-in.cx-pop{scale:1;rotate:0deg}

/* ---------- hero: pins, dims, next section slides over ---------- */
.cx [data-cx~="hero"]{position:relative}
.cx [data-cx~="hero"].cx-pin{position:sticky;top:var(--cx-nav-h,0px);z-index:1}
.cx [data-cx~="hero"]::after{content:"";position:absolute;inset:0;background:var(--cx-dark);opacity:calc(var(--cx-hp,0)*.55);pointer-events:none;z-index:6}
.cx [data-cx~="hero"] ~ *{position:relative;z-index:2}
.cx [data-cx~="hero"].cx-pin + *{border-radius:28px 28px 0 0;box-shadow:0 -22px 50px rgba(20,10,40,.14)}
.cx [data-cx-intro]{opacity:0;translate:0 30px;transition:opacity .9s ease,translate 1.1s var(--cx-ease);transition-delay:var(--cx-d,0s)}
.cx.cx-ready [data-cx-intro]{opacity:1;translate:0 0}
.cx [data-cx-intro="pop"]{translate:0 0;scale:.5;transition:opacity .7s ease,scale .9s cubic-bezier(.2,1.5,.3,1);transition-delay:var(--cx-d,0s)}
.cx.cx-ready [data-cx-intro="pop"]{scale:1}
.cx [data-cx-depth]{will-change:translate}

/* ---------- pointer effects ---------- */
.cx-tilt-live{transition:transform .18s ease-out,box-shadow .3s !important;transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) !important;box-shadow:0 26px 54px rgba(20,10,40,.16)}
.cx-spot{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .35s;z-index:0;border-radius:inherit;background:radial-gradient(380px circle at var(--sx,50%) var(--sy,50%),var(--cx-spot),transparent 62%)}
.cx [data-cx~="spot"]{position:relative}
.cx [data-cx~="spot"]:hover > .cx-spot{opacity:1}
.cx [data-cx~="spot"] > *:not(.cx-spot){position:relative;z-index:1}
.cx-glow{position:absolute !important;z-index:0 !important;width:520px;height:520px;border-radius:50%;left:50%;top:50%;translate:-50% -50%;background:radial-gradient(circle,var(--cx-glow),transparent 65%);pointer-events:none}
.cx [data-cx~="glow"]{position:relative;overflow:hidden}
.cx [data-cx~="glow"] > *:not(.cx-glow){position:relative;z-index:1}
.cx [data-cx~="magnet"]{position:relative;overflow:hidden;translate:var(--mx,0px) var(--my,0px);transition:transform .2s,box-shadow .2s,translate .35s cubic-bezier(.2,.8,.2,1)}
.cx [data-cx~="magnet"]::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.32),transparent);transform:skewX(-20deg);transition:left .7s;pointer-events:none}
.cx [data-cx~="magnet"]:hover::after{left:130%}
.cx [data-cx~="dim"] > *{transition:opacity .45s}
.cx [data-cx~="dim"]:has(> :hover) > :not(:hover){opacity:.5}

/* ---------- rails (progress threads) ---------- */
.cx-railwrap{position:relative;padding-left:2.4rem}
.cx-rail{position:absolute;pointer-events:none;z-index:2}
.cx-rail.v{left:.3rem;top:.4rem;bottom:.4rem;width:2px}
.cx-rail i{position:absolute;inset:0;background:color-mix(in srgb,var(--cx-accent) 16%,transparent);border-radius:2px}
.cx-rail b{position:absolute;left:0;top:0;width:100%;height:calc(var(--rp,0)*100%);background:linear-gradient(var(--cx-accent),var(--cx-accent-2));border-radius:2px}
.cx-rail s{position:absolute;left:50%;top:calc(var(--rp,0)*100%);width:13px;height:13px;margin:-6.5px 0 0 -6.5px;background:var(--cx-accent);rotate:calc(var(--rp,0)*900deg);box-shadow:0 0 0 5px color-mix(in srgb,var(--cx-accent) 16%,transparent);text-decoration:none}
.cx-rail.h b{width:calc(var(--rp,0)*100%);height:100%;background:linear-gradient(90deg,var(--cx-accent),var(--cx-accent-2))}
.cx-rail.h s{left:calc(var(--rp,0)*100%);top:50%}
.cx-rail-dot{position:absolute;width:11px;height:11px;border-radius:50%;background:var(--cx-bg);border:2px solid color-mix(in srgb,var(--cx-accent) 35%,transparent);transition:background .4s,border-color .4s,scale .5s cubic-bezier(.2,1.5,.3,1);z-index:3;margin:-5.5px 0 0 -5.5px;pointer-events:none}
.cx-rail-dot.on{background:var(--cx-accent);border-color:var(--cx-accent);scale:1.25}
.cx [data-cx~="rail"] > *:not(.cx-rail):not(.cx-rail-dot){opacity:.4;transition:opacity .5s}
.cx [data-cx~="rail"] > .cx-lit:not(.cx-rail):not(.cx-rail-dot){opacity:1}

/* ---------- stacking cards ---------- */
.cx [data-cx~="stack"] > *{position:sticky;top:var(--cx-st,96px);background:var(--cx-card-bg);box-shadow:0 22px 44px rgba(20,19,28,.07);margin-bottom:2.2rem;transform-origin:50% 0;transform:scale(calc(1 - var(--cx-sp,0)*.055));will-change:transform}
.cx [data-cx~="stack"] > *::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--cx-dark);opacity:calc(var(--cx-sp,0)*.32);pointer-events:none}
.cx [data-cx~="stack"] > .cx-nostick{position:relative;top:auto;transform:none}
.cx [data-cx~="stack"] > .cx-nostick::after{display:none}

/* ---------- ghost words, outlined text helpers ---------- */
.cx [data-cx~="ghost"]{overflow:hidden;user-select:none}
.cx [data-cx~="ghost"] > *{display:block;white-space:nowrap;width:max-content;margin-left:-6vw;will-change:translate}
.cx-outline{color:transparent;-webkit-text-stroke:1.5px color-mix(in srgb,var(--cx-accent) 32%,transparent)}
.cx-outline b,.cx-outline em{font-style:normal;font-weight:inherit;-webkit-text-stroke:0;color:var(--cx-accent)}
.cx-outline i{font-style:normal;-webkit-text-stroke:0;color:var(--cx-accent-2);font-size:.5em;vertical-align:middle;padding:0 .35em}

/* ---------- marquee ---------- */
.cx [data-cx~="marquee"]{overflow:hidden}
.cx-mq-track{display:flex;gap:var(--cx-gap,2.5rem);width:max-content;white-space:nowrap;will-change:transform}

/* ---------- band (CTA that grows into place) ---------- */
.cx [data-cx~="band"]{position:relative;overflow:hidden;opacity:calc(.25 + var(--cx-cp,1)*.75);transform:scale(calc(.9 + var(--cx-cp,1)*.1));border-radius:calc(46px - var(--cx-cp,1)*(46px - var(--cx-radius)));will-change:transform}
.cx [data-cx~="band"] > *:not(.cx-glow){position:relative;z-index:1}

/* ---------- watermark ---------- */
.cx [data-cx~="watermark"]{position:relative;overflow:hidden}
.cx-wm{position:absolute;left:50%;bottom:-.3em;translate:-50% calc((1 - var(--wp,1))*45%);font-size:clamp(5rem,18vw,16rem);font-weight:900;line-height:1;letter-spacing:-.05em;color:rgba(255,255,255,.045);white-space:nowrap;pointer-events:none;user-select:none;z-index:0}
.cx [data-cx~="watermark"] > *:not(.cx-wm):not(.cx-seam){position:relative;z-index:1}

/* ---------- chequered seam ---------- */
.cx [data-cx~="seam"]{position:relative}
.cx-seam{position:absolute;left:0;top:0;width:100%;pointer-events:none;z-index:3;display:block}

/* ---------- small screens ---------- */
@media(max-width:899px){
  .cx [data-cx-from="left"],.cx [data-cx-from="left"] > *,.cx [data-cx-from="right"],.cx [data-cx-from="right"] > *{transform:translateY(40px)}
  .cx [data-cx~="hero"].cx-pin{position:relative;top:auto}
  .cx [data-cx~="rail"] > *:not(.cx-rail):not(.cx-rail-dot){opacity:.6}
}