/* Motion layer (GSAP + Lenis). Everything here is scoped to html.gs, which is only
   set when motion is allowed; without it the page keeps its simpler CSS motion. */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-stopped{overflow:clip}
.lenis [data-lenis-prevent]{overscroll-behavior:contain}

/* GSAP drives the intro, so the CSS keyframes step aside */
.gs .word span,.gs .hero-txt,.gs .slides{animation:none}
/* The older IntersectionObserver reveal is replaced by GSAP */
.gs.js .rv:not(.in){transform:none;opacity:1}
.gs.js .rv-img:not(.in){clip-path:none}
.gs.js .rv-img:not(.in) img{transform:none}
.gs .rv,.gs .rv-img,.gs .rv-img img{transition:none}

/* Preloader: brick panel that lifts away. Hidden by CSS after 4s whatever happens. */
#pre{display:none}
.gs #pre{display:flex;position:fixed;inset:0;z-index:100;background:var(--brick);color:var(--on-brick);align-items:center;justify-content:center;padding:0 var(--gut);animation:preOut .01s 7s forwards}
#pre .intro3d{width:min(92vw,720px);height:auto;display:block;-webkit-mask-image:radial-gradient(closest-side,#000 70%,transparent 100%);mask-image:radial-gradient(closest-side,#000 70%,transparent 100%)}
#pre .pl{font:500 15px/1.4 var(--body);opacity:.85;position:absolute;left:var(--gut);bottom:calc(28px + env(safe-area-inset-bottom,0px))}
@keyframes preOut{to{visibility:hidden;opacity:0}}

/* Split text masks */
.gs .split-line{padding-bottom:.06em;margin-bottom:-.06em}

/* Dark chapter: the page ground turns to warm ink while the method section is on screen */
.method{transition:color .6s var(--ease)}
.gs .method{background:transparent}
.method.dk{color:var(--on-brick)}
.method.dk .steps p{color:color-mix(in srgb,var(--on-brick) 72%,transparent)}
.method.dk .steps li{border-top-color:var(--brick)}
.method.dk svg.draw{opacity:.38}
.gs body{transition:none}

/* Footer revealed from under the page */
.gs main{position:relative;z-index:1;background:var(--paper);box-shadow:0 30px 60px -30px rgba(43,33,27,.35)}
.gs footer{position:sticky;bottom:0;z-index:0;padding-block:clamp(48px,8vw,96px) 32px;align-items:end}
.gs footer .fbig{flex-basis:100%;font:750 clamp(48px,12vw,190px)/.85 var(--display);letter-spacing:-.045em;color:var(--ink);opacity:.9}
footer .fbig{display:none}
.gs footer .fbig{display:block}

/* Shared-element transition into the photo viewer */
.flip{position:fixed;z-index:95;overflow:hidden;pointer-events:none;background:#0F1012}
.flip img{width:100%;height:100%;object-fit:cover;display:block}
.gs dialog[open]{animation:none}

/* Parallax frames need room to move */
.gs .about figure img,.gs .row .th{will-change:transform}
.gs .contact{overflow:hidden}

/* While the page is dark, neighbouring sections switch their text tokens too,
   so grey text never sits on the dark ground */
.gs main.dk-on{--ink:#FBF3EA;--soft:#C9BBAA;--hair:#4A3D33}
.gs main .ba-box .tag.l{background:#FBF3EA;color:#2B211B}