/*! dizainsweb motion.css 1.0: structure only. Colours, type and spacing come from the project tokens. */

/* Lenis smooth scroll (required by Lenis) */
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}

/* split text */
.w{display:inline-block;white-space:nowrap}
.c{display:inline-block}
.m-line{display:block}
[data-m="hero-words"] .m-line{overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
.m-wait [data-m="hero-words"]{visibility:hidden}
.m-wait [data-m-after]{opacity:0}

/* letters */
[data-m="letters"]{position:relative}
[data-m="letters"] .m-line{position:relative;z-index:1}
[data-m-bar]{position:absolute;left:0;right:0;top:50%;height:14px;margin-top:-7px;transform:scaleX(0);transform-origin:left;z-index:0}

/* morph (04) */
[data-m="morph"]{position:relative;overflow:hidden}
[data-m-wrap]{position:absolute;left:50%;top:54%;transform:translate(-50%,-50%);filter:drop-shadow(0 18px 28px rgb(20 12 8 / .14))}
[data-m-card]{position:absolute;inset:0;overflow:hidden}
[data-m-badge]{position:absolute;overflow:hidden}
[data-m-dot]{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;opacity:0}

/* fromto (05) */
[data-m="fromto"]{position:relative;overflow:hidden}
[data-m-old]{position:absolute;inset:0}
[data-m-lab]{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;display:flex;flex-direction:column;align-items:center;gap:12px}
[data-m-kbox]{position:relative;overflow:hidden;display:grid;place-items:center}
[data-m-kbox] > *{grid-area:1/1}
[data-m-k-uz]{transform:translateY(110%)}
[data-m-box]{position:relative;overflow:hidden;display:flex;align-items:center;white-space:nowrap}
[data-m-tmask]{display:block;overflow:hidden;padding-block:.15em}
[data-m-t]{display:block}
[data-m-arrow]{position:absolute;left:50%;top:50%;width:26px;height:26px;margin:-13px 0 0 -13px;opacity:0}
[data-m-wipe]{position:absolute;inset:0;z-index:3}
.m-wait [data-m-wipe]{transform:translateY(100%)}

/* panels (06): flex until JS takes over, then absolute + transform/clip-path (no layout animation, no CLS) */
[data-m="panels"]{position:relative;display:flex;gap:10px}
[data-m-panel]{position:relative;overflow:hidden;flex:.1 1 0;min-width:40px;cursor:pointer}
[data-m-panel].is-on{flex-grow:1}
[data-m="panels"].m-abs{display:block;overflow:hidden;overflow:clip}
[data-m="panels"].m-abs [data-m-panel]{position:absolute;left:0;top:0;bottom:0;min-width:0}
[data-m="panels"].m-ready [data-m-panel]{transition:transform .8s cubic-bezier(.77,0,.175,1),clip-path .8s cubic-bezier(.77,0,.175,1)}
[data-m-panel] [data-m-body]{opacity:0;transform:translateY(12px);transition:opacity .35s ease,transform .5s cubic-bezier(.23,1,.32,1)}
[data-m-panel].is-on [data-m-body]{opacity:1;transform:none;transition-delay:.3s}
[data-m-panel] [data-m-vert]{position:absolute;left:calc(var(--m-c,44px) / 2);bottom:20px;writing-mode:vertical-rl;transform:translateX(-50%) rotate(180deg);white-space:nowrap;transition:opacity .3s ease}
[data-m-panel].is-on [data-m-vert]{opacity:0}

/* build (07) */
.bw{display:inline-block;margin:0 .11em}
.bw.off{display:none}

/* hscroll (08) */
[data-m="hscroll"]{position:relative;overflow:hidden}
[data-m="hscroll"] [data-m-view]{overflow:hidden}
[data-m="hscroll"] [data-m-track]{display:flex;width:max-content;will-change:transform}
[data-m-par]{will-change:transform}
@media (max-width:767.98px){
  [data-m="hscroll"] [data-m-view]{overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain}
  [data-m="hscroll"] [data-m-track] > *{scroll-snap-align:start}
  [data-m="hscroll"] [data-m-time]{display:none}
}
.m-static [data-m="hscroll"] [data-m-view]{overflow-x:auto}

/* magnet + spot (09) */
[data-m="magnet"]{display:inline-block}
[data-m-inner]{display:inline-flex;will-change:transform}
[data-m-text]{display:inline-block}
[data-m="magnet"]:active [data-m-inner]{scale:.97}
[data-m="spot"]{position:relative;overflow:hidden;--mx:60%;--my:30%}
[data-m="spot"]::before{content:"";position:absolute;inset:0;background:radial-gradient(300px circle at var(--mx) var(--my),var(--m-glow,rgb(250 120 83 / .42)),transparent 62%);opacity:.55;transition:opacity .3s ease;pointer-events:none}
[data-m="spot"] > *{position:relative}
@media (hover:hover) and (pointer:fine){[data-m="spot"]:hover::before{opacity:1}}

/* marquee (10): CSS only, the track holds the item list twice */
[data-m="marquee"]{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
[data-m="marquee"] [data-m-track]{display:flex;width:max-content;will-change:transform;transform:translate3d(0,0,0);animation:m-marquee var(--m-dur,38s) linear infinite}
@media (hover:hover){[data-m="marquee"]:hover [data-m-track]{animation-play-state:paused}}
@keyframes m-marquee{to{transform:translate3d(-50%,0,0)}}

/* page transitions */
@view-transition{navigation:none}

@media (prefers-reduced-motion:reduce){
  [data-m="marquee"] [data-m-track]{animation:none}
  [data-m="panels"].m-ready [data-m-panel],[data-m-panel] [data-m-body]{transition:none}
}

/* hero words and the lines after them animate in CSS (compositor), not frame by frame in JS */
.hw-split .w{transform:translate3d(0,108%,0);will-change:transform}
.hw-go .w{animation:hw-rise 1s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--i,0) * 65ms)}
@keyframes hw-rise{from{transform:translate3d(0,108%,0)}to{transform:translate3d(0,0,0)}}
.ma-wait{opacity:0;transform:translate3d(0,14px,0)}
.ma-go{animation:ma-in .85s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(300ms + var(--i,0) * 80ms)}
@keyframes ma-in{from{opacity:0;transform:translate3d(0,14px,0)}to{opacity:1;transform:translate3d(0,0,0)}}