/* ZMS motion layer — additive only. Colours inherit each site's own variables. */
:root{
  --zms-c1:var(--a,var(--x-pink,#8b7bff));
  --zms-c2:var(--b,var(--x-cyan,#3ee0d0));
  --zms-c3:var(--c,var(--x-yellow,#ff7ad9));
  --zms-ink:var(--ink,var(--x-cream,#eef0f6));
  --zms-bg:var(--bg,var(--x-ink,#07070b));
  --zms-ease:cubic-bezier(.22,1,.36,1);
}
@view-transition{navigation:auto}
html{scroll-padding-top:var(--zms-hdr-h,0px)}
::view-transition-old(root),::view-transition-new(root){animation-duration:.35s}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}

/* Skip link */
.zms-skip{position:fixed;left:12px;top:-60px;z-index:10002;padding:12px 18px;border-radius:10px;background:var(--zms-c1);color:#fff!important;font:600 15px/1.2 system-ui,sans-serif;text-decoration:none;transition:top .2s}
.zms-skip:focus,.zms-skip:focus-visible{top:12px;outline:3px solid var(--zms-c2);outline-offset:2px}

/* Scroll progress */
.zms-progress{position:fixed;left:0;top:0;height:3px;width:100%;z-index:10001;pointer-events:none;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--zms-c1),var(--zms-c2),var(--zms-c3))}

/* Reveal (only gated when JS runs) */
html.zms-js .zms-r{opacity:0;transform:translate3d(0,28px,0);filter:blur(6px);transition:opacity .8s var(--zms-ease),transform .8s var(--zms-ease),filter .8s var(--zms-ease);transition-delay:var(--zms-d,0ms)}
html.zms-js .zms-r.zms-in{opacity:1;transform:none;filter:none}
@media (max-width:767.98px){html.zms-js .zms-r{filter:none;transform:translate3d(0,18px,0)}}

/* Split hero headline */
.zms-w{display:inline-block;white-space:pre}
html.zms-js .zms-split .zms-w{opacity:0;transform:translate3d(0,.6em,0) rotate(2deg);filter:blur(8px);transition:opacity .9s var(--zms-ease),transform .9s var(--zms-ease),filter .9s var(--zms-ease);transition-delay:calc(var(--i,0) * 45ms)}
html.zms-js .zms-split.zms-in .zms-w{opacity:1;transform:none;filter:none}

/* Aurora behind hero */
.zms-hero-host{position:relative;isolation:isolate}
.zms-aurora{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden;contain:strict}
.zms-aurora i{position:absolute;width:46vmax;height:46vmax;border-radius:50%;filter:blur(70px);opacity:.28;mix-blend-mode:screen}
.zms-aurora i:nth-child(1){background:var(--zms-c1);left:-10%;top:-20%;animation:zms-a1 18s ease-in-out infinite alternate}
.zms-aurora i:nth-child(2){background:var(--zms-c2);right:-12%;top:10%;animation:zms-a2 22s ease-in-out infinite alternate}
.zms-aurora i:nth-child(3){background:var(--zms-c3);left:30%;bottom:-35%;opacity:.18;animation:zms-a3 26s ease-in-out infinite alternate}
@keyframes zms-a1{to{transform:translate3d(18%,14%,0) scale(1.15)}}
@keyframes zms-a2{to{transform:translate3d(-16%,10%,0) scale(.9)}}
@keyframes zms-a3{to{transform:translate3d(-10%,-14%,0) scale(1.2)}}
@media (max-width:767.98px){.zms-aurora i{animation:none;filter:blur(50px);opacity:.2}}

/* Grain */
.zms-grain{position:fixed;inset:-50%;z-index:9998;pointer-events:none;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:zms-grain 1.2s steps(4) infinite}
@keyframes zms-grain{25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-3%)}75%{transform:translate(-2%,-1%)}}

/* Cursor glow */
.zms-cursor{position:fixed;left:0;top:0;width:340px;height:340px;margin:-170px 0 0 -170px;border-radius:50%;pointer-events:none;z-index:9997;opacity:0;transition:opacity .3s;background:radial-gradient(circle,color-mix(in srgb,var(--zms-c1) 30%,transparent),transparent 65%);mix-blend-mode:screen;will-change:transform}
.zms-cursor.on{opacity:1}

/* Cards: tilt + spotlight */
.zms-tilt{transition:transform .5s var(--zms-ease),box-shadow .5s var(--zms-ease);transform-style:preserve-3d;will-change:transform}
.zms-tilt.zms-hov{transition:transform .12s linear,box-shadow .3s}
.zms-spot::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--zms-c1) 22%,transparent),transparent 60%)}
.zms-spot.zms-hov::after{opacity:1}
.zms-rel{position:relative}

/* Buttons */
.zms-shine{position:relative;overflow:hidden}
.zms-shine::before{content:"";position:absolute;top:0;left:-75%;width:50%;height:100%;pointer-events:none;background:linear-gradient(110deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg);transition:left .7s var(--zms-ease)}
.zms-shine:hover::before{left:130%}
.zms-mag{transition:transform .35s var(--zms-ease)}

/* Marquee */
.zms-marquee{overflow:hidden;position:relative;border-block:1px solid color-mix(in srgb,var(--zms-ink) 14%,transparent);background:color-mix(in srgb,var(--zms-bg) 88%,var(--zms-c1));color:var(--zms-ink);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.zms-marquee:empty{display:none}
.zms-mq-track{display:flex;width:max-content;animation:zms-mq var(--zms-mq-dur,40s) linear infinite}
.zms-marquee:hover .zms-mq-track{animation-play-state:paused}
.zms-mq-track span{display:inline-flex;align-items:center;gap:22px;padding:14px 22px 14px 0;font:700 clamp(15px,1.6vw,20px)/1.2 inherit;white-space:nowrap}
.zms-mq-track span::after{content:"✦";color:var(--zms-c2);font-size:.8em}
@keyframes zms-mq{to{transform:translate3d(-50%,0,0)}}

/* Parallax images */
.zms-px{will-change:transform;transform:translate3d(0,var(--py,0px),0) scale(var(--ps,1.08));transition:transform .1s linear}

/* Sticky header polish (no size change → no layout shift) */
header.zms-hdr{transition:box-shadow .35s,background-color .35s,backdrop-filter .35s}
header.zms-hdr.zms-scrolled{box-shadow:0 10px 30px -12px rgba(0,0,0,.55);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4)}
header.zms-hdr img{transition:transform .35s var(--zms-ease);transform-origin:left center}
header.zms-hdr.zms-scrolled img{transform:scale(.86)}

/* Back to top */
.zms-top{position:fixed;right:18px;bottom:18px;z-index:9996;width:48px;height:48px;border-radius:50%;border:1px solid color-mix(in srgb,var(--zms-ink) 25%,transparent);background:color-mix(in srgb,var(--zms-bg) 70%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--zms-ink);font-size:20px;line-height:1;cursor:pointer;opacity:0;transform:translateY(16px);pointer-events:none;transition:opacity .3s,transform .3s var(--zms-ease)}
.zms-top.on{opacity:1;transform:none;pointer-events:auto}
.zms-top:hover{border-color:var(--zms-c1);box-shadow:0 0 0 4px color-mix(in srgb,var(--zms-c1) 25%,transparent)}
.zms-top:focus-visible{outline:3px solid var(--zms-c2);outline-offset:2px}

/* Hamburger menu (Studios, ≤980px) */
.zms-burger{display:none}
@media (max-width:980px){
  .zms-burger{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin-left:10px;border-radius:12px;border:1px solid color-mix(in srgb,var(--zms-ink) 25%,transparent);background:transparent;color:var(--zms-ink);cursor:pointer;position:relative;z-index:10000}
  .zms-burger span,.zms-burger span::before,.zms-burger span::after{display:block;width:20px;height:2px;background:currentColor;border-radius:2px;position:relative;transition:transform .3s var(--zms-ease),background-color .3s}
  .zms-burger span::before,.zms-burger span::after{content:"";position:absolute;left:0}
  .zms-burger span::before{top:-6px}.zms-burger span::after{top:6px}
  .zms-burger[aria-expanded="true"] span{background:transparent}
  .zms-burger[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
  .zms-burger[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}
  .zms-burger:focus-visible{outline:3px solid var(--zms-c2);outline-offset:2px}
  html.zms-menu-open,html.zms-menu-open body{overflow:hidden}
  html.zms-menu-open header.zms-hdr{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  html.zms-menu-open nav.zms-menu{position:fixed;inset:0;z-index:9999;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:80px 24px 40px;background:color-mix(in srgb,var(--zms-bg) 96%,transparent);animation:zms-fade .25s ease-out}
  html.zms-menu-open nav.zms-menu a,html.zms-menu-open nav.zms-menu a:not(.btn){display:flex;align-items:center;justify-content:center;min-height:48px;padding:8px 20px;font-size:22px;font-weight:700;color:var(--zms-ink);text-decoration:none}
  html.zms-menu-open nav.zms-menu a.btn{margin-top:12px;color:#fff}
}
@keyframes zms-fade{from{opacity:0}}

/* Touch targets */
@media (pointer:coarse){
  .btn,a.btn,button.btn,.cur,.zms-topbar a,.zms-top,.zms-burger{min-height:44px}
  a.btn,.zms-topbar a{display:inline-flex;align-items:center;justify-content:center}
  button.cur{min-width:44px}
}

/* Studio top banner on small screens: only the existing button */
@media (max-width:759.98px){
  .zms-topbar>span{display:none}
  .zms-topbar{padding:6px 12px!important}
}

/* Reduced motion: no motion at all */
@media (prefers-reduced-motion:reduce){
  html.zms-js .zms-r,html.zms-js .zms-split .zms-w{opacity:1!important;transform:none!important;filter:none!important;transition:none!important}
  .zms-aurora i,.zms-grain,.zms-mq-track{animation:none!important}
  .zms-mq-track{flex-wrap:wrap;width:auto}
  .zms-cursor,.zms-grain{display:none!important}
  .zms-tilt,.zms-mag,.zms-px{transform:none!important;transition:none!important}
  .zms-shine::before{display:none}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}