/* SITE 95, the live layer on every page: texture backgrounds, light that catches the work, the header M that feels the
   scroll, and the light switch's beam. Every effect is compositor only (transform, opacity) and off under reduced motion. */

/* texture backgrounds: a macro of a MUUS material behind about one section in four; loads when the section comes near */
.tx95-on{position:relative;isolation:isolate;overflow:hidden}
.tx95-on>*:not(.tx95){position:relative;z-index:1}
.tx95{position:absolute;inset:-8% 0;z-index:0;pointer-events:none;background:center/cover no-repeat;opacity:0;transition:opacity 1.4s cubic-bezier(.2,.7,.1,1);
  transform:translate3d(0,var(--tx-y,0px),0) scale(var(--tx-s,1.02));will-change:transform}
.tx95::after{content:"";position:absolute;inset:0;background:var(--tx-scrim,rgb(10 11 13 / .7))}
.tx95.in{opacity:1;animation:tx95-breathe 22s ease-in-out infinite alternate}
@keyframes tx95-breathe{from{--tx-s:1.02}to{--tx-s:1.07}}
@property --tx-s{syntax:"<number>";inherits:false;initial-value:1.02}
html[data-theme=dark] .tx95.in[data-tex=sand]{background-image:url(/assets/95/tex/sand-night-l1920.jpg);background-image:image-set(url(/assets/95/tex/sand-night-l1920.avif) type("image/avif"),url(/assets/95/tex/sand-night-l1920.webp) type("image/webp"))}
html[data-theme=light] .tx95.in[data-tex=sand]{background-image:url(/assets/95/tex/sand-day-l1920.jpg);background-image:image-set(url(/assets/95/tex/sand-day-l1920.avif) type("image/avif"),url(/assets/95/tex/sand-day-l1920.webp) type("image/webp"))}
html[data-theme=dark] .tx95.in[data-tex=water]{background-image:url(/assets/95/tex/water-night-l1920.jpg);background-image:image-set(url(/assets/95/tex/water-night-l1920.avif) type("image/avif"),url(/assets/95/tex/water-night-l1920.webp) type("image/webp"))}
html[data-theme=light] .tx95.in[data-tex=water]{background-image:url(/assets/95/tex/water-day-l1920.jpg);background-image:image-set(url(/assets/95/tex/water-day-l1920.avif) type("image/avif"),url(/assets/95/tex/water-day-l1920.webp) type("image/webp"))}
@media (max-width:1280px) and (orientation:landscape){
  html[data-theme=dark] .tx95.in[data-tex=sand]{background-image:image-set(url(/assets/95/tex/sand-night-l1280.avif) type("image/avif"),url(/assets/95/tex/sand-night-l1280.webp) type("image/webp"))}
  html[data-theme=light] .tx95.in[data-tex=sand]{background-image:image-set(url(/assets/95/tex/sand-day-l1280.avif) type("image/avif"),url(/assets/95/tex/sand-day-l1280.webp) type("image/webp"))}
  html[data-theme=dark] .tx95.in[data-tex=water]{background-image:image-set(url(/assets/95/tex/water-night-l1280.avif) type("image/avif"),url(/assets/95/tex/water-night-l1280.webp) type("image/webp"))}
  html[data-theme=light] .tx95.in[data-tex=water]{background-image:image-set(url(/assets/95/tex/water-day-l1280.avif) type("image/avif"),url(/assets/95/tex/water-day-l1280.webp) type("image/webp"))}}
@media (orientation:portrait){
  html[data-theme=dark] .tx95.in[data-tex=sand]{background-image:url(/assets/95/tex/sand-night-p720.jpg);background-image:image-set(url(/assets/95/tex/sand-night-p720.avif) type("image/avif"),url(/assets/95/tex/sand-night-p720.webp) type("image/webp"))}
  html[data-theme=light] .tx95.in[data-tex=sand]{background-image:url(/assets/95/tex/sand-day-p720.jpg);background-image:image-set(url(/assets/95/tex/sand-day-p720.avif) type("image/avif"),url(/assets/95/tex/sand-day-p720.webp) type("image/webp"))}
  html[data-theme=dark] .tx95.in[data-tex=water]{background-image:url(/assets/95/tex/water-night-p720.jpg);background-image:image-set(url(/assets/95/tex/water-night-p720.avif) type("image/avif"),url(/assets/95/tex/water-night-p720.webp) type("image/webp"))}
  html[data-theme=light] .tx95.in[data-tex=water]{background-image:url(/assets/95/tex/water-day-p720.jpg);background-image:image-set(url(/assets/95/tex/water-day-p720.avif) type("image/avif"),url(/assets/95/tex/water-day-p720.webp) type("image/webp"))}}

/* light catches the frame: a soft highlight follows the cursor or the finger across a work tile */
.lc95{position:relative}
.lc95::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit;opacity:0;transition:opacity .45s cubic-bezier(.2,.7,.1,1);
  background:radial-gradient(420px circle at var(--lx,50%) var(--ly,50%),rgb(255 255 255 / .16),rgb(255 255 255 / .05) 40%,transparent 70%);mix-blend-mode:soft-light}
.lc95.lit::after{opacity:1}
.lc95 img{transition:transform .9s cubic-bezier(.2,.7,.1,1)}
.lc95.lit img{transform:scale(1.025)}
/* the city and material tiles keep their label scrims (story.css) on ::after, so their light moves to ::before;
   the material scrim is a little deeper at the label, where a bright render (velvet, flower, terrazzo) measured under AA */
.st-mat.lc95::after{z-index:auto;opacity:1;transition:none;mix-blend-mode:normal;border-radius:0;
  background:linear-gradient(to top,rgb(10 11 13 / .84),rgb(10 11 13 / .55) 20%,rgb(10 11 13 / 0) 50%)}
.st-city.lc95::after{z-index:-1;opacity:1;transition:none;mix-blend-mode:normal;border-radius:0;
  background:linear-gradient(to top,rgb(10 11 13 / .95),rgb(10 11 13 / .66) 42%,rgb(10 11 13 / .05) 72%)}
.st-mat.lc95::before,.st-city.lc95::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit;opacity:0;
  transition:opacity .45s cubic-bezier(.2,.7,.1,1);background:radial-gradient(420px circle at var(--lx,50%) var(--ly,50%),rgb(255 255 255 / .16),rgb(255 255 255 / .05) 40%,transparent 70%);mix-blend-mode:soft-light}
.st-mat.lc95.lit::before,.st-city.lc95.lit::before{opacity:1}

/* the header M feels the scroll: a small tilt with the speed, eased home */
.emb .emb-svg{transform-origin:50% 100%;transform:rotate(var(--m-tilt,0deg)) translateY(var(--m-lift,0px));transition:transform .5s cubic-bezier(.2,.7,.1,1)}

/* the light switch: a soft beam crosses the screen while the light changes (theme.js) */
.beam95{position:fixed;inset:-10% auto -10% 0;width:38vw;z-index:2147483000;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgb(242 240 239 / .0) 15%,rgb(242 240 239 / .42) 50%,rgb(242 240 239 / .0) 85%,transparent);
  filter:blur(18px);transform:translateX(-45vw) skewX(-14deg);mix-blend-mode:soft-light}
html[data-theme=dark] .beam95{background:linear-gradient(90deg,transparent,rgb(162 207 231 / 0) 15%,rgb(162 207 231 / .38) 50%,rgb(162 207 231 / 0) 85%,transparent);mix-blend-mode:screen}

@media (prefers-reduced-motion:reduce){.tx95,.tx95.in{animation:none;transform:none;transition:none}.lc95::after,.lc95 img{transition:none}.lc95.lit img{transform:none}.emb .emb-svg{transform:none;transition:none}}

/* case films: captions on, quiet and legible over the frame */
video::cue{font:500 13px/1.45 "IBM Plex Mono",ui-monospace,Menlo,monospace;letter-spacing:.06em;color:#F2F0EF;background:rgb(10 11 13 / .62)}