/* TWACE custom library, shared motion layer for the concept sites */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}
*,*::before,*::after{box-sizing:border-box}
img{display:block;max-width:100%}
[hidden]{display:none!important}
[data-inner]{will-change:transform}
.fx-frame{overflow:hidden;position:relative}
.fx-frame>img,.fx-frame>video{width:100%;height:100%;object-fit:cover}
[data-inner]{transform:scale(1.18)}

/* split text */
.fx-l{display:block;overflow:clip;padding-bottom:.08em;margin-bottom:-.08em}
.fx-w{display:inline-block}

/* loader */
.fx-loader{position:fixed;inset:0;z-index:900;display:flex;align-items:flex-end;justify-content:space-between;padding:4vw;pointer-events:none}
html:not(.fx) .fx-loader{display:none}

/* marquee */
[data-marquee]{overflow:hidden;white-space:nowrap}
.fx-mq{display:flex;width:max-content;will-change:transform}
.fx-mq-g{display:flex;flex:none;align-items:center}

/* horizontal scroll */
[data-hscroll]{overflow:hidden}
.fx-track{display:flex;flex-wrap:nowrap;width:max-content;will-change:transform}
@media (max-width:899px){
  [data-hscroll]{overflow:visible}
  .fx-track{width:auto;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:4px}
  .fx-track::-webkit-scrollbar{display:none}
  .fx-track>*{scroll-snap-align:start}
}

/* stacking cards */
[data-stack]>*{position:sticky;top:var(--stack-top,12vh)}
[data-stack]>*::after{content:"";position:absolute;inset:0;border-radius:inherit;background:#000;opacity:var(--dim,0);pointer-events:none;transition:none}

/* drag rail */
[data-drag]{overflow-x:auto;scrollbar-width:none;cursor:grab;-webkit-overflow-scrolling:touch}
[data-drag]::-webkit-scrollbar{display:none}
[data-drag].is-drag{cursor:grabbing;scroll-snap-type:none!important}
[data-drag].is-drag *{pointer-events:none}

/* cursor */
.fx-cursor{position:fixed;left:0;top:0;z-index:950;pointer-events:none;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--cursor,#fff);mix-blend-mode:difference;transition:width .35s cubic-bezier(.2,.8,.2,1),height .35s cubic-bezier(.2,.8,.2,1),margin .35s cubic-bezier(.2,.8,.2,1),background .3s;display:flex;align-items:center;justify-content:center}
.fx-cursor span{font:600 12px/1 system-ui,sans-serif;letter-spacing:.02em;color:var(--cursor-ink,#000);opacity:0;transition:opacity .2s;white-space:nowrap}
.fx-cursor.is-hover{width:44px;height:44px;margin:-22px 0 0 -22px}
.fx-cursor.is-label{width:92px;height:92px;margin:-46px 0 0 -46px;mix-blend-mode:normal;background:var(--cursor-bg,#fff)}
.fx-cursor.is-label span{opacity:1}
.fx-cursor.is-hidden{opacity:0}
@media (hover:none),(pointer:coarse){.fx-cursor{display:none}}

/* floating preview image for hover lists */
.fx-preview{position:fixed;left:0;top:0;z-index:800;width:var(--pw,300px);aspect-ratio:var(--pr,4/5);pointer-events:none;overflow:hidden;border-radius:var(--prad,4px);opacity:0;transform:translate(-50%,-50%) scale(.6)}
.fx-preview img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}

/* page progress */
[data-progress]{transform-origin:0 50%;transform:scaleX(0)}

/* auto hide header */
[data-autohide]{transition:transform .6s cubic-bezier(.2,.8,.2,1),background .4s,color .4s}
[data-autohide].fx-hide{transform:translateY(-120%)}

/* the TWACE concept bar */
.fx-concept{position:fixed;left:16px;bottom:16px;z-index:990;display:flex;align-items:center;gap:4px;padding:5px;border-radius:999px;background:rgba(13,13,13,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);color:#fff;font:500 13px/1 "Inter Tight",system-ui,sans-serif;box-shadow:0 10px 30px rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.12)}
.fx-concept a{color:#fff;text-decoration:none;padding:9px 12px;border-radius:999px;display:flex;align-items:center;gap:8px;white-space:nowrap}
.fx-concept a:hover{background:rgba(255,255,255,.1)}
.fx-concept .fx-go{background:#FF6362}
.fx-concept .fx-go:hover{background:#F0504F}
.fx-concept svg{width:14px;height:14px;fill:currentColor}
@media (max-width:640px){.fx-concept{left:50%;transform:translateX(-50%);bottom:10px;font-size:12px}.fx-concept .fx-hide-s{display:none}}

/* WebGL canvas */
canvas[data-gl]{display:block;width:100%;height:100%}

@media (prefers-reduced-motion:reduce){
  [data-inner]{transform:none}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}