/* ==========================================================================
   RABZI motion.css — preloader, curtain, initial reveal states (JS only), cursor, reduced motion
   Everything here is gated on html.js so no-JS users see the full page.
   ========================================================================== */
html.js [data-reveal]:not(.is-inview),html.js [data-reveal-child]:not(.is-inview){ opacity:0 }
html.js [data-reveal="left"]:not(.is-inview),html.js [data-reveal="right"]:not(.is-inview),html.js [data-reveal="clip"]:not(.is-inview){ opacity:1; clip-path:inset(0 100% 0 0) }
html.js [data-reveal="right"]:not(.is-inview){ clip-path:inset(0 0 0 100%) }
html.js [data-reveal="clip"]:not(.is-inview){ clip-path:inset(100% 0 0 0) }
html.js [data-split]:not(.is-split):not(.is-inview){ visibility:hidden }
html.js .hero__title [data-split-line],html.js .hero__title .split-line{ --wdth:100 }
.split-line-mask{ display:block; overflow:hidden } .split-line{ display:block } .split-line > em,.split-line > span,.split-line > a{ display:inline }
html.js.no-motion [data-reveal],html.js.no-motion [data-reveal-child],html.js.no-motion [data-split]{ opacity:1 !important; clip-path:none !important; visibility:visible !important; transform:none !important }

/* ---- preloader ---- */
.preloader{ position:fixed; inset:0; z-index:var(--z-preloader); background:var(--paper); color:var(--ink); display:flex; align-items:center; justify-content:center }
html:not(.js) .preloader,.preloader.is-done{ display:none }
.preloader__inner{ display:flex; flex-direction:column; align-items:center; gap:var(--s-4) }
.preloader__mark{ width:64px; height:64px } .preloader__mark .mark__a,.preloader__mark .mark__b{ transition:transform .28s var(--ease-flip) }
.preloader__count{ color:var(--fg-muted) }
.preloader.is-exit{ clip-path:polygon(0 0,100% 0,100% 100%,0 100%); animation:preloader-exit .7s var(--ease-inout) forwards }
@keyframes preloader-exit{ to{ clip-path:polygon(0 0,0 0,0 0,0 0) } }
.preloader.is-exit{ animation-duration:.45s }

/* ---- curtain (guillotine) ---- */
.curtain{ position:fixed; inset:0; z-index:var(--z-curtain); background:var(--ink); color:var(--paper); clip-path:inset(100% 0 0 0); pointer-events:none; will-change:clip-path }
.curtain.is-in{ clip-path:inset(0) ; transition:clip-path .36s var(--ease-inout) }
.curtain.is-out{ clip-path:inset(0 0 100% 0); transition:clip-path .42s var(--ease-inout) }
.curtain.is-hold{ clip-path:inset(0); transition:none }
.curtain__label{ position:absolute; left:var(--margin); bottom:var(--margin); color:var(--paper) }
html:not(.js) .curtain{ display:none }

/* ---- cursor ---- */
.cursor{ position:fixed; left:0; top:0; z-index:var(--z-cursor); pointer-events:none; width:0; height:0; display:none; color:var(--fg) }
html.js.fine-pointer .cursor{ display:block }
.cursor__h,.cursor__v{ position:absolute; background:currentColor; transition:transform var(--d-s) var(--ease-out), opacity var(--d-s) }
.cursor__h{ left:-8px; top:0; width:16px; height:1px } .cursor__v{ top:-8px; left:0; width:1px; height:16px }
.cursor__ring{ position:absolute; left:-12px; top:-12px; width:24px; height:24px; border:1px solid currentColor; border-radius:50%; opacity:0; transform:scale(.5); transition:transform var(--d-s) var(--ease-out), opacity var(--d-s), background var(--d-s), width var(--d-s), height var(--d-s), left var(--d-s), top var(--d-s) }
.cursor__label{ position:absolute; left:0; top:0; transform:translate(-50%,-50%); color:var(--ink); opacity:0; white-space:nowrap; transition:opacity var(--d-s) }
.cursor--link .cursor__h,.cursor--link .cursor__v{ transform:scale(1.4) } .cursor--link .cursor__ring{ opacity:1; transform:scale(1) }
.cursor--view .cursor__h,.cursor--view .cursor__v{ opacity:0 } .cursor--view .cursor__ring{ opacity:1; transform:scale(1); width:72px; height:72px; left:-36px; top:-36px; background:var(--signal); border-color:var(--signal) } .cursor--view .cursor__label{ opacity:1 }
.cursor--drag .cursor__ring{ opacity:1; transform:scale(1); width:72px; height:72px; left:-36px; top:-36px; background:var(--ink); border-color:var(--ink) } .cursor--drag .cursor__label{ opacity:1; color:var(--paper) }
.cursor--text .cursor__h,.cursor--text .cursor__v{ opacity:0 }
.cursor.is-hidden{ opacity:0; transition:none }

/* ---- board legend clock pulse ---- */
.pill .dot{ animation:none }

/* ---- reduced motion ---- */
@media (prefers-reduced-motion:reduce){
  :root{ --d-xs:0s; --d-s:0s; --d-m:0s; --d-l:0s; --d-xl:0s; --stagger:0s }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important }
  html.js [data-reveal],html.js [data-reveal-child],html.js [data-split]{ opacity:1 !important; clip-path:none !important; visibility:visible !important }
  .preloader,.curtain,.cursor{ display:none !important }
  html.js .hero__title [data-split-line],html.js .hero__title .split-line{ --wdth:112 }
}
/* ---- board ---- */
.board{ cursor:crosshair }
.board__poster{ position:absolute; inset:0; width:100%; height:100% }
.board__gl{ position:absolute; inset:0; width:100%; height:100%; opacity:0; transition:opacity .24s linear }
.board__gl.is-ready{ opacity:1 }
@media (prefers-reduced-motion:reduce){ .board__gl{ display:none } }

/* no grey slab while children are still hidden */
html.js .stats[data-reveal-group]:not(.is-revealed),html.js .grid--collapse[data-reveal-group]:not(.is-revealed),html.js .bento[data-reveal-group]:not(.is-revealed),html.js .pillars[data-reveal-group]:not(.is-revealed),html.js .raster[data-reveal-group]:not(.is-revealed){ background:transparent; border-color:transparent }
html.js .grid--collapse[data-reveal-group]:not(.is-revealed) > *,html.js .pillars[data-reveal-group]:not(.is-revealed) > *,html.js .raster[data-reveal-group]:not(.is-revealed) > *,html.js .stats[data-reveal-group]:not(.is-revealed) > *{ box-shadow:none }

html:not(.js) [data-reveal-group],html.no-motion [data-reveal-group]{ }
html.js.no-motion .bento[data-reveal-group]{ background:var(--line); border-color:var(--line) }
html.js.no-motion .stats[data-reveal-group] > *{ box-shadow:0 0 0 1px var(--line) }
html.js.no-motion .grid--collapse[data-reveal-group],html.js.no-motion .pillars[data-reveal-group],html.js.no-motion .raster[data-reveal-group],html.js.no-motion .stats[data-reveal-group]{ border-color:var(--line) }
html.js.no-motion .grid--collapse[data-reveal-group] > *,html.js.no-motion .pillars[data-reveal-group] > *,html.js.no-motion .raster[data-reveal-group] > *{ box-shadow:0 0 0 1px var(--line) }