/* Motion system styles (pairs with js/motion/motion.js). Same curve as the JS 'clear' ease. */
:root{--ease-clear:cubic-bezier(.16,1,.3,1);--ease-move:cubic-bezier(.65,0,.35,1);}

/* Lenis */
html.lenis,html.lenis body{height:auto;}
.lenis:not(.lenis-autoToggle).lenis-stopped{overflow:clip;}
.lenis [data-lenis-prevent],.lenis [data-lenis-prevent-wheel],.lenis [data-lenis-prevent-touch]{overscroll-behavior:contain;}
.lenis.lenis-smooth iframe{pointer-events:none;}
.lenis.lenis-autoToggle{transition-property:overflow;transition-duration:1ms;transition-behavior:allow-discrete;}

/* Display headings split by SplitText: keep glyph boxes stable, let scattered glyphs overflow freely */
.motion-gsap [data-motion-title] .mt-line{display:block;}
.motion-gsap [data-motion-title] .mt-word{display:inline-block;white-space:nowrap;}
.motion-gsap [data-motion-title] .mt-char{display:inline-block;}
/* hero opening (motion.js heroOpening): the copy is held until GSAP arms it; the CSS keyframes of the intro yield */
html.hero-pending .hero-phrases,html.hero-pending .hero-note,html.hero-pending .hero-person,html.hero-pending .hero-explore{opacity:0;}
.motion-gsap .intro-arrival .hero-phrases,.motion-gsap .intro-arrival .hero-note,.motion-gsap .intro-arrival .hero-bottom{animation:none;}
.hero-char{display:inline-block;}
.hero-note{text-wrap:balance;}

/* Editorial staircase for authored multi-line titles: every next line steps in by the same measure */
@media (min-width:900px){
  .motion-gsap [data-motion-stair] .mt-line{padding-left:calc(var(--mt-line,0) * .82em);}
}

/* Image frames that drift inside */
.motion-gsap .mt-frame{overflow:hidden;}


/* Scroll velocity leans the logo stream */
.motion-gsap .logo-marquee .about-logo-block{transform:skewX(calc(var(--scroll-v,0) * -9deg));}

@media (prefers-reduced-motion:reduce){
  .motion-gsap [data-motion-title] .mt-char{opacity:1!important;filter:none!important;transform:none!important;}
  .motion-gsap .logo-marquee .about-logo-block{transform:none;}
}

/* ---------- Liquid glass navigation (js/motion/nav-glass.js) ---------- */
@property --nav-a{syntax:'<angle>';inherits:true;initial-value:200deg;}
.site-header .glass-nav.has-drop .nav-links a,.site-header .glass-nav.has-drop .nav-contact,.site-header .glass-nav.has-drop .brand{position:relative;z-index:1;}
.site-header .glass-nav .nav-drop{
  --rim:conic-gradient(from var(--nav-a),#a8abb1,#96999f,#ff8fc8,#b8bbc1,#ffc76b,#a8abb1);
  position:absolute;left:0;top:0;width:0;height:0;z-index:0;pointer-events:none;border-radius:999px;
  background:
    radial-gradient(120% 150% at var(--mx,50%) -20%,rgb(255 255 255 / .9),rgb(255 255 255 / .2) 48%,transparent 72%),
    linear-gradient(160deg,rgb(249 249 249 / .55),rgb(225 225 225 / .22)),
    conic-gradient(from var(--nav-a),rgb(203 203 203 / .16),rgb(195 195 195 / .16),rgb(255 207 232 / .16),rgb(232 232 232 / .16),rgb(255 241 194 / .16),rgb(203 203 203 / .16));
  -webkit-backdrop-filter:blur(3px) saturate(1.8) brightness(1.06) contrast(1.04);
  backdrop-filter:blur(3px) saturate(1.8) brightness(1.06) contrast(1.04);
  transform-origin:50% 50%;
}
/* the rim: a 1.25px iridescent ring cut out with a mask, turning with the pointer */
.site-header .glass-nav .nav-drop::before{
  content:'';position:absolute;inset:0;border-radius:inherit;padding:1.25px;background:var(--rim);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
}
[data-theme=dark] .site-header .glass-nav .nav-drop,.site-header .glass-nav[data-surface=dark] .nav-drop{
  --rim:conic-gradient(from var(--nav-a),#afb2b8,#9fa2a8,#ff9fd0,#ced1d7,#ffe08a,#afb2b8);
  background:
    radial-gradient(120% 150% at var(--mx,50%) -20%,rgb(255 255 255 / .3),rgb(255 255 255 / .05) 48%,transparent 72%),
    linear-gradient(160deg,rgb(122 122 122 / .3),rgb(43 43 43 / .2)),
    conic-gradient(from var(--nav-a),rgb(179 179 179 / .14),rgb(163 163 163 / .14),rgb(255 159 208 / .14),rgb(210 210 210 / .14),rgb(255 224 138 / .14),rgb(179 179 179 / .14));
}
.site-header .glass-nav.has-drop .nav-links a::after{display:none;}
.site-header .glass-nav .nav-links a,.site-header .glass-nav .brand img{transition:transform .6s cubic-bezier(.16,1,.3,1);}
.site-header .glass-nav .nav-links a.is-lensed{transform:scale(1.08);}
.site-header .glass-nav .brand.is-lensed img{transform:scale(1.12) rotate(-6deg);}
.site-header .glass-nav .nav-contact.is-lensed{transform:scale(1.03);}
/* the bar breathes out while in use */
@media (hover:hover) and (pointer:fine){
  .site-header .glass-nav.has-drop{transition:padding .7s cubic-bezier(.16,1,.3,1),border-radius .7s cubic-bezier(.16,1,.3,1),background .18s ease-out;}
  .site-header .glass-nav.has-drop:hover{padding:10px 11px 10px 18px;border-radius:30px;}
}
@media (prefers-reduced-motion:reduce){
  .site-header .glass-nav .nav-links a.is-lensed,.site-header .glass-nav .brand.is-lensed img,.site-header .glass-nav .nav-contact.is-lensed{transform:none;}
  .site-header .glass-nav.has-drop:hover{padding:inherit;}
}

/* Chromium liquid lens mode: the drop sits ABOVE the labels so its backdrop (the label) is magnified through it */
.site-header .glass-nav.is-liquid .nav-liquid-backdrop.has-lens{inset:0!important;}
.site-header .glass-nav.is-liquid .nav-drop{z-index:2;mix-blend-mode:normal;
  background:radial-gradient(120% 150% at var(--mx,50%) -25%,rgb(255 255 255 / .42),rgb(255 255 255 / .06) 50%,transparent 74%);}
[data-theme=dark] .site-header .glass-nav.is-liquid .nav-drop,.site-header .glass-nav.is-liquid[data-surface=dark] .nav-drop{
  background:radial-gradient(120% 150% at var(--mx,50%) -25%,rgb(255 255 255 / .2),rgb(255 255 255 / .03) 50%,transparent 74%);}
.site-header .glass-nav.is-liquid .nav-links a.is-lensed{transform:none;}

/* drop rim: iridescent ring under a white specular sweep, so it reads on light and dark alike */
.site-header .glass-nav .nav-drop::before{opacity:.75;}
.site-header .glass-nav .nav-drop::after{
  content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:linear-gradient(150deg,rgb(255 255 255 / .95),rgb(255 255 255 / .1) 38%,rgb(255 255 255 / 0) 60%,rgb(255 255 255 / .55));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
}
/* bar rim */
.site-header .glass-nav .nav-rim{
  position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit;padding:1px;
  background:linear-gradient(140deg,rgb(255 255 255 / .95),rgb(255 255 255 / .28) 26%,rgb(255 255 255 / 0) 52%,rgb(255 255 255 / .2) 78%,rgb(255 255 255 / .75));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
}
.site-header .glass-nav[data-surface=light] .nav-rim{
  background:linear-gradient(140deg,rgb(255 255 255 / 1),rgb(255 255 255 / .4) 26%,rgb(144 144 144 / .22) 55%,rgb(144 144 144 / .3) 80%,rgb(255 255 255 / .9));
}
/* legibility: over mixed backdrops the light bar keeps a brighter frost (the rim and lens keep it glassy) */
.site-header .glass-nav.is-liquid[data-surface=light],.site-header .glass-nav.is-liquid:not([data-surface]){
  --nva:#f8f8f8b4;--nvb:#e9e9e97a;--nvc:#f9f9f9a6;
  --nav-film:linear-gradient(125deg,#f8f8f8b4,#e9e9e97a 55%,#f9f9f9a6);
}
.site-header .glass-nav.is-liquid[data-surface=light]::before{background:linear-gradient(125deg,#f8f8f8b4,#e9e9e97a 55%,#f9f9f9a6)!important;}
.site-header .glass-nav[data-surface=light] .nav-drop::before,html:not([data-theme=dark]) .site-header .glass-nav:not([data-surface]) .nav-drop::before{opacity:.42;}

/* corner controls: same hairline rim as the bar, springy hover */
.site-header :is(.theme-toggle,.sound-toggle,.os-toggle) .control-rim{
  position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(140deg,rgb(255 255 255 / .95),rgb(255 255 255 / .25) 30%,rgb(255 255 255 / 0) 55%,rgb(255 255 255 / .55));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
}
.site-header :is(.theme-toggle,.sound-toggle,.os-toggle)[data-surface=light] .control-rim{
  background:linear-gradient(140deg,#fff,rgb(255 255 255 / .4) 30%,rgb(144 144 144 / .22) 60%,rgb(255 255 255 / .85));
}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .site-header :is(.theme-toggle,.sound-toggle,.os-toggle){transition:transform .6s cubic-bezier(.16,1,.3,1),background .18s ease-out!important;}
  .site-header :is(.theme-toggle,.sound-toggle,.os-toggle):hover{transform:scale(1.1);}
}

/* Body text reveal (js/motion/text-reveal.js): lines are not clipped, so the blur can bloom past the line box */
.motion-gsap [data-rv="lines"] .rv-line{display:block;}
@media (prefers-reduced-motion:reduce){.motion-gsap [data-rv] , .motion-gsap [data-rv] .rv-line{opacity:1!important;filter:none!important;transform:none!important;}}

/* v63: every text entrance pulls focus the way the display headings assemble — hero letters, case titles and
 * page-opening h1 lines come out of a blur instead of only sliding up. */
@keyframes letter-rise{from{transform:translateY(115%) rotate(12deg);opacity:0;filter:blur(8px)}55%{filter:blur(2px)}to{transform:none;opacity:1;filter:blur(0)}}
@keyframes heading-rise{from{transform:translateY(70%) skewY(3deg);opacity:0;filter:blur(.16em)}to{transform:none;opacity:1;filter:blur(0)}}
.motion-ready h1[data-reveal].reveal-pending .text-mask>span{transform:translate3d(0,46%,0);opacity:0;filter:blur(.15em)}
h1[data-reveal].reveal-visible .text-mask>span{transition:transform 1250ms cubic-bezier(.16,1,.3,1),opacity 620ms ease-out,filter 1150ms cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--line-index,0)*85ms)}
@media (prefers-reduced-motion:reduce){
 .motion-ready h1[data-reveal].reveal-pending .text-mask>span{transform:none;opacity:1;filter:none}
}

/* A title whose scrubbed assemble is not built yet (js/motion/motion.js assembleTitles): hidden until it is. */
.motion-gsap [data-motion-title].mt-pending .mt-char{opacity:0}
/* Text reveal (js/motion/text-reveal.js): the resting state before a text arrives, in CSS rather than a gsap.set per
   element (seconds of forced layout at boot on weak computers). The tween takes over inline the moment it plays. */
/* 17 Oct, pass 2: no blur-in (js/motion/text-reveal.js); body lines wait under their mask, small text faded 8 px down */
.motion-gsap [data-rv="soft"]:not([data-rv-done]){opacity:0;transform:translateY(8px)}
.motion-gsap [data-rv="lines"]:not([data-rv-done]) .rv-line{transform:translateY(105%)}
@media (prefers-reduced-motion:reduce){.motion-gsap [data-rv]:not([data-rv-done]),.motion-gsap [data-rv="lines"]:not([data-rv-done]) .rv-line{opacity:1;transform:none;filter:none}}

/* 18 Oct: display titles rise line by line out of masks (js/motion/motion.js). Their leading is under 1, so a bare line
   mask would cut ascenders and descenders: the mask breathes past the line box and gives the room back. */
.motion-gsap [data-motion-title] .mt-line-mask{overflow:visible!important;clip-path:inset(-.2em -60vw -.3em -60vw)}   /* no layout change (margins would collapse); the staircase may run past the box */