/* Wixta motion layer — GSAP + ScrollTrigger + Lenis.
   Only active when <html> has .motion (set by js/motion.js). Without JS the site looks as before. */

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}

/* scroll progress line */
.progress{position:fixed;left:0;top:0;height:2px;width:100%;z-index:200;pointer-events:none;
  transform-origin:0 50%;transform:scaleX(0);
  background:linear-gradient(90deg,var(--chrome-3),#fff 70%,var(--chrome-2))}

/* GSAP takes over the old CSS reveal */
.motion .reveal{opacity:1;transform:none;transition:none}
.motion h1>span,.motion .sec-head h2>span,.motion .reel .lead h2>span{display:inline-block}

/* living chrome text: a slow light sweep */
.motion .chrome{background-size:220% 100%;animation:chromeSweep 7s ease-in-out infinite}
@keyframes chromeSweep{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

/* big moving marquee replaces the quiet strip */
.strip.marq{padding-block:26px;overflow:hidden}
.marq-track{display:flex;width:max-content;will-change:transform}
.marq-group{display:flex;align-items:center;gap:44px;padding-right:44px;flex-shrink:0}
.marq-group b{font-family:"Outfit",sans-serif;font-size:clamp(28px,4.6vw,58px);font-weight:800;
  letter-spacing:-.035em;color:var(--text);white-space:nowrap;line-height:1}
.marq-group b:nth-child(even){font-family:"Instrument Serif",Georgia,serif;font-style:italic;font-weight:400;
  color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.45)}
.marq-group .dot{width:12px;height:12px;border-radius:50%;flex-shrink:0;
  background:radial-gradient(circle at 35% 30%,#fff,var(--chrome-3))}

/* reel rows get an extra scroll-driven offset on top of their loop */
.motion .track{translate:var(--sx,0px) 0;scale:var(--rs,1)}

/* the case video unmasks as it scrolls in */
.motion .case-v{will-change:clip-path}

/* process: a line that draws across the three steps */
.steps{position:relative}
.steps .line{position:absolute;left:0;right:0;top:-22px;height:1px;background:var(--line);overflow:hidden}
.steps .line i{position:absolute;inset:0;transform-origin:0 50%;transform:scaleX(0);
  background:linear-gradient(90deg,transparent,#fff 40%,var(--chrome-2))}
.motion .st .n{display:inline-block;font-size:44px;line-height:1;letter-spacing:-.04em;
  background:linear-gradient(180deg,#fff,var(--chrome-3));-webkit-background-clip:text;background-clip:text;color:transparent}

/* cursor label over videos (pointer devices only) */
.cur{position:fixed;left:0;top:0;z-index:150;pointer-events:none;width:84px;height:84px;margin:-42px 0 0 -42px;
  border-radius:50%;display:grid;place-items:center;background:#fff;color:#08090c;
  font-family:"Outfit",sans-serif;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  transform:scale(0);opacity:0;mix-blend-mode:normal}

/* tilt cards need perspective */
.motion .packs,.motion .feats{perspective:1200px}
.motion .pk,.motion .feat{transform-style:preserve-3d}

@media (max-width:900px){.steps .line{display:none}}
@media (max-width:620px){.marq-group{gap:26px;padding-right:26px}.strip.marq{padding-block:18px}}
@media (prefers-reduced-motion:reduce){.progress,.cur{display:none}}
.motion .card9{transition:box-shadow .4s}

/* ---------- entrance screen ---------- */
.entry{display:none}
.has-entry .entry{display:block;position:fixed;inset:0;z-index:1000;cursor:pointer}
.has-entry body{overflow:hidden}
.entry-layer{position:absolute;inset:0;background:#050608;display:grid;place-items:center;overflow:hidden}
.entry-layer.top{clip-path:inset(0 0 calc(50% - 1px) 0)}
.entry-layer.bot{clip-path:inset(50% 0 0 0)}
.entry-layer::before{content:"";position:absolute;inset:-20%;pointer-events:none;
  background:radial-gradient(55% 40% at 50% 50%,rgba(255,255,255,.08),transparent 70%)}
.entry-inner{position:relative;width:min(80vw,760px)}
.entry-logo{position:relative;width:100%}
.entry-logo svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
/* soft-edged wipe = the brush "writing" the logo */
.entry-letters,.entry-swoosh{
  -webkit-mask-image:linear-gradient(90deg,#000 40%,transparent 60%);mask-image:linear-gradient(90deg,#000 40%,transparent 60%);
  -webkit-mask-size:300% 100%;mask-size:300% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:var(--wipe,100%) 0;mask-position:var(--wipe,100%) 0}
.entry-cap{position:absolute;left:0;right:0;top:calc(100% + 26px);text-align:center;white-space:nowrap;
  font-family:"Outfit",sans-serif;font-size:clamp(11px,1.3vw,15px);font-weight:500;letter-spacing:.42em;
  text-transform:uppercase;color:var(--chrome-2)}
.entry-seam{position:absolute;left:0;right:0;top:50%;height:1px;margin-top:-.5px;z-index:2;
  background:linear-gradient(90deg,transparent,#fff 50%,transparent);transform:scaleX(0);opacity:0}
.entry-logo{filter:drop-shadow(0 0 40px rgba(255,255,255,.12))}
/* showreel runs on GSAP now (conveyor belt) */
.motion .track{animation:none!important;translate:none}
.motion .reel .fade{width:6%}
.motion .rc video{transition:opacity .6s}