/* cinematic-web: kit.css. Only the states the kit's JS toggles; the site's own CSS does the look.
   Override --cw-* per site. Nothing here sets fonts or colors beyond the cursor/loader defaults. */
:root{--cw-ease:cubic-bezier(.2,.8,.2,1);--cw-fg:#EDEAE3;--cw-bg:#0B0B0E;--cw-accent:#FF5B1F}

/* Lenis */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}

/* reveals: hidden only once JS has run, so no-JS and crawlers see everything */
.cw-js [data-reveal],.cw-js [data-hero-in]{opacity:0;transform:translateY(24px);transition:opacity 1s var(--cw-ease),transform 1s var(--cw-ease)}
.cw-js [data-reveal].cw-in,.cw-js [data-hero-in].cw-in{opacity:1;transform:none}

/* line masks for [data-lines] headings: <span class="line"><span>Text</span></span> */
.line{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.line>span{display:inline-block;will-change:transform}

/* loader */
.cw-loader{position:fixed;inset:0;z-index:100;background:var(--cw-bg);color:var(--cw-fg);display:flex;align-items:flex-end;justify-content:flex-end;padding:clamp(16px,4vw,56px);pointer-events:none}
.cw-count{font-size:clamp(72px,16vw,200px);line-height:.8;letter-spacing:-.06em;font-variant-numeric:tabular-nums;font-weight:300}
.cw-bar{position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--cw-accent);transform:scaleX(0);transform-origin:left}
html:not(.cw-js) .cw-loader{display:none}

/* marquee */
.cw-mq{overflow:hidden}
.cw-mq-row{display:flex;white-space:nowrap;will-change:transform}

/* cursor (shown by JS for mouse users only) */
.cw-cursor{position:fixed;left:0;top:0;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--cw-fg);z-index:200;pointer-events:none;mix-blend-mode:difference;transition:width .3s,height .3s,margin .3s;display:none}
.cw-cursor.big{width:56px;height:56px;margin:-28px 0 0 -28px}

/* the fixed WebGL/film layer sits behind content */
.cw-gl{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;display:block}
#film,.cw-film{opacity:0;transition:opacity 1.2s var(--cw-ease)}
#film.on,.cw-film.on{opacity:1}

@media (prefers-reduced-motion:reduce){
  .cw-js [data-reveal],.cw-js [data-hero-in]{opacity:1;transform:none;transition:none}
}