/* Shared styles for all four pages.
   Every page is a night-colored stage lit by one beam of light taken from its hero photo.
   Each page swaps the palette to match its photo: blue (work), violet (products), red (about), green (contact). */
:root {
  --night: #021624;      /* deepest wall shadow from the photo */
  --wall: #003d64;       /* the lit wall */
  --wall-2: #00273f;
  --beam: #f6e7c8;       /* the stripe of light */
  --beam-hot: #ffd58f;
  --glow: 255, 213, 143; /* beam-hot as an rgb triplet for glows */
  --fog: #8aa6bf;        /* muted text */
  --ink: #e9f1f7;        /* main text */
  --line: rgba(138, 166, 191, .18);
  --f-display: "Archivo", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --f-body: "Instrument Sans", "Segoe UI", system-ui, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --gutter: clamp(16px, 4vw, 56px);
  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.76, 0, .24, 1);
  --angle: -11.2deg;     /* the beam angle shared by every photo */
  color-scheme: dark;
}
/* palettes sampled from each page's portrait */
.page--home {
  --night: #130c04; --wall: #6e4a17; --wall-2: #3b260b;
  --beam: #ffe0a8; --beam-hot: #ffba54; --glow: 255, 186, 84;
  --fog: #c4b298; --ink: #f8f2e9; --line: rgba(196, 178, 152, .18);
}
.page--products {
  --night: #12061d; --wall: #4a1b70; --wall-2: #2a0d40;
  --beam: #f2c2ff; --beam-hot: #ff9bf0; --glow: 255, 155, 240;
  --fog: #b7a2c9; --ink: #f5eefa; --line: rgba(183, 162, 201, .18);
}
.page--about {
  --night: #190506; --wall: #5c1219; --wall-2: #33070b;
  --beam: #ffc19a; --beam-hot: #ff8a4c; --glow: 255, 138, 76;
  --fog: #c9a39c; --ink: #faeee8; --line: rgba(201, 163, 156, .18);
}
.page--contact {
  --night: #06130b; --wall: #1f4a2c; --wall-2: #112a18;
  --beam: #f8e2b8; --beam-hot: #ffc76e; --glow: 255, 199, 110;
  --fog: #a3baa8; --ink: #eef5ee; --line: rgba(163, 186, 168, .18);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--night);
  color: var(--ink);
  font: 400 clamp(15px, 1.05vw, 17px)/1.6 var(--f-body);
  overflow-x: clip;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
::selection { background: var(--beam); color: var(--night); }
:focus-visible { outline: 2px solid var(--beam-hot); outline-offset: 4px; border-radius: 4px; }
.mono { font-family: var(--f-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.wrap { padding-inline: var(--gutter); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* grain */
.grain {
  position: fixed; inset: -50%; z-index: 90; pointer-events: none; opacity: .07;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: grain 1s steps(6) infinite;
}
@keyframes grain { 0%{transform:translate(0,0)} 20%{transform:translate(-3%,2%)} 40%{transform:translate(2%,-3%)} 60%{transform:translate(-2%,-1%)} 80%{transform:translate(3%,3%)} 100%{transform:translate(0,0)} }

/* ---------- page transition ----------
   Leaving: three slabs (light, wall, night) sweep in along the beam angle while the page sinks back,
   then the next page's name rises over a line of light. Arriving: the name lifts away and the slabs
   peel off in reverse while the new page settles into place. */
.pt {
  --pt-night: var(--night); --pt-wall: var(--wall); --pt-beam: var(--beam); --pt-glow: var(--glow);
  position: fixed; inset: 0; z-index: 120; pointer-events: none; overflow: hidden;
}
.pt__layer {
  position: absolute; left: -25vw; top: -25vh; width: 150vw; height: 150vh;
  transform: rotate(var(--angle)) translateY(var(--y, 118%)); will-change: transform;
}
.pt__layer--1 { background: var(--pt-beam); box-shadow: 0 0 90px 24px rgba(var(--pt-glow), .55); }
.pt__layer--2 { background: var(--pt-wall); }
.pt__layer--3 { background: var(--pt-night); }
.pt__label {
  position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 2.4vh;
  color: var(--pt-beam);
  filter: drop-shadow(0 0 28px rgba(var(--pt-glow), .4)); /* on the parent so the glow follows the clipped letters */
}
.pt__n { opacity: 0; letter-spacing: .3em; transition: opacity .4s, letter-spacing .9s var(--ease); }
.pt__name {
  display: flex; overflow: hidden; padding: .04em .02em .08em;
  font: 900 clamp(40px, 12vw, 200px)/.86 var(--f-display); font-stretch: 125%;
  letter-spacing: -.04em; text-transform: uppercase; white-space: nowrap;
}
.pt__name .c { display: inline-block; transform: translateY(112%); }
.pt__line {
  display: block; width: min(70vw, 1100px); height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--pt-beam) 20%, #fff 50%, var(--pt-beam) 80%, transparent);
  box-shadow: 0 0 18px 2px rgba(var(--pt-glow), .7);
  transform: scaleX(0);
}
/* leaving */
.pt.is-cover .pt__layer { --y: 0%; transition: transform .9s var(--ease-io); }
.pt.is-cover .pt__layer--2 { transition-delay: .06s; }
.pt.is-cover .pt__layer--3 { transition-delay: .12s; }
.pt.is-cover .pt__name .c { transform: none; transition: transform .62s var(--ease) calc(.34s + var(--i) * 30ms); }
.pt.is-cover .pt__line { transform: scaleX(1); transition: transform .8s var(--ease) .3s; }
.pt.is-cover .pt__n { opacity: .75; letter-spacing: .08em; transition-delay: .45s; }
.pt-leave main, .pt-leave .nav { transition: transform 1s var(--ease-io), opacity .9s var(--ease-io); }
.pt-leave main { transform: scale(.94); opacity: .35; }
.pt-leave .nav { opacity: 0; }
/* arriving: start covered */
.pt-in .pt__layer { --y: 0%; transition: none; }
.pt-in .pt__name .c { transform: none; transition: none; }
.pt-in .pt__line { transform: scaleX(1); transition: none; }
.pt-in .pt__n { opacity: .75; letter-spacing: .08em; transition: none; }
.pt-in main { transform: scale(1.05); }
.pt.is-out .pt__layer { --y: -118%; transition: transform 1s var(--ease-io) .26s; }
.pt.is-out .pt__layer--2 { transition-delay: .32s; }
.pt.is-out .pt__layer--1 { transition-delay: .38s; }
.pt.is-out .pt__name .c { transform: translateY(-112%); transition: transform .55s var(--ease-io) calc(var(--i) * 22ms); }
.pt.is-out .pt__line { transform: scaleX(0); transform-origin: right; transition: transform .6s var(--ease-io); }
.pt.is-out .pt__n { opacity: 0; transition: opacity .3s; }
.pt-arrive main { transition: transform 1.4s var(--ease) .3s; }

/* ---------- loader (first visit each session) ----------
   A line of light draws across at the beam angle, opens into a band that lights up the name,
   then the dark splits along the beam to show the page. */
.ld { display: none; position: fixed; inset: 0; z-index: 110; pointer-events: none; overflow: hidden; }
.ld-on .ld { display: block; }
.ld.is-gone { display: none; }
.ld__rot { position: absolute; left: 50%; top: 50%; width: 150vmax; height: 150vmax; transform: translate(-50%, -50%) rotate(var(--angle)); }
.ld__half { position: absolute; left: 0; right: 0; height: calc(50% + 1px); overflow: hidden; background: var(--night); transition: transform 1.2s var(--ease-io); }
.ld__half--a { top: 0; }
.ld__half--b { top: calc(50% - 1px); } /* the halves overlap by 2px so no seam shows through the band */
.ld__stage { position: absolute; left: 0; right: 0; top: 0; height: 150vmax; }
.ld__half--b .ld__stage { top: calc(1px - 75vmax); }
.ld__glow, .ld__band {
  position: absolute; left: 0; right: 0; top: 50%; height: 2px;
  transform: translateY(-50%) scaleX(0); transform-origin: left center;
  transition: transform 1s var(--ease), height 1.1s var(--ease-io);
}
.ld__glow { background: rgba(var(--glow), .55); filter: blur(40px); }
.ld__band {
  display: grid; place-items: center; overflow: hidden;
  background: linear-gradient(90deg, transparent 16%, var(--beam) 31%, #fff 50%, var(--beam) 69%, transparent 84%);
}
.ld__band::after { /* a sheen that runs along the band */
  content: ""; position: absolute; inset: 0; mix-blend-mode: overlay;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, .9) 50%, transparent 100%) no-repeat;
  background-size: 12% 100%; background-position: -20% 0;
  animation: ld-sheen 2.4s .9s var(--ease-io) infinite;
}
@keyframes ld-sheen { to { background-position: 120% 0; } }
.ld__name {
  font: 900 min(10.5vw, 21vh)/1 var(--f-display); font-stretch: 125%; text-transform: uppercase; white-space: nowrap;
  color: var(--night); letter-spacing: .24em; margin-right: -.24em;
  transition: letter-spacing 1.8s var(--ease), margin-right 1.8s var(--ease);
}
.ld__meta { position: absolute; color: var(--fog); opacity: 0; transition: opacity .8s var(--ease) .3s; }
.ld__meta--a { top: calc(24px + env(safe-area-inset-top, 0px)); left: var(--gutter); }
.ld__meta--b { bottom: calc(24px + env(safe-area-inset-bottom, 0px)); right: var(--gutter); }
.ld.is-draw .ld__band, .ld.is-draw .ld__glow { transform: translateY(-50%) scaleX(1); }
.ld.is-draw .ld__meta { opacity: 1; }
.ld.is-open .ld__band { height: calc(min(10.5vw, 21vh) * 1.12); }
.ld.is-open .ld__glow { height: calc(min(10.5vw, 21vh) * 1.6); }
.ld.is-open .ld__name { letter-spacing: -.02em; margin-right: .02em; }
.ld.is-exit .ld__half--a { transform: translateY(-101%); }
.ld.is-exit .ld__half--b { transform: translateY(101%); }
.ld.is-exit .ld__meta { opacity: 0; transition: opacity .3s; }

/* ---------- nav ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: calc(18px + env(safe-area-inset-top, 0px)) var(--gutter) 18px;
  mix-blend-mode: difference; color: #fff;
}
.nav__brand { font: 800 18px/1 var(--f-display); font-stretch: 125%; text-decoration: none; letter-spacing: -.01em; }
.nav__links { display: flex; gap: clamp(14px, 2.4vw, 36px); list-style: none; margin: 0; padding: 0; }
.nav__links a { text-decoration: none; position: relative; }
.nav__links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease);
}
.nav__links a:hover::after, .nav__links a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.nav__status { display: flex; align-items: center; }
@media (max-width: 720px) {
  .nav { flex-wrap: wrap; row-gap: 10px; }
  .nav__status { display: none; }
  .nav__links { gap: 16px; }
}

/* ---------- hero (shared beam system) ---------- */
.hero {
  position: relative; min-height: 100svh; overflow: hidden; isolation: isolate;
  background: radial-gradient(120% 80% at 80% 10%, var(--wall) 0%, var(--wall-2) 45%, var(--night) 100%);
}
.hero--left { background: radial-gradient(120% 80% at 20% 10%, var(--wall) 0%, var(--wall-2) 45%, var(--night) 100%); }
.hero__photo {
  position: absolute; right: 0; bottom: 0; height: calc(100% - 92px); width: auto; max-width: none;
  aspect-ratio: var(--ar, 896 / 1195); z-index: 1;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%), linear-gradient(0deg, transparent 0%, #000 18%, #000 86%, transparent 100%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
  mask-image: linear-gradient(90deg, transparent 0%, #000 22%), linear-gradient(0deg, transparent 0%, #000 18%, #000 86%, transparent 100%);
  will-change: transform;
}
.hero--left .hero__photo {
  right: auto; left: 0;
  -webkit-mask-image: linear-gradient(270deg, transparent 0%, #000 26%), linear-gradient(0deg, transparent 0%, #000 18%, #000 86%, transparent 100%);
  mask-image: linear-gradient(270deg, transparent 0%, #000 26%), linear-gradient(0deg, transparent 0%, #000 18%, #000 86%, transparent 100%);
}
.hero__photo img { width: 100%; height: 100%; object-fit: cover; transition: opacity .35s var(--ease); }
.hero__photo .ripple-distortion {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; pointer-events: none; transition: opacity .35s var(--ease);
}
.hero__photo.is-ripple-ready img { opacity: 0; }
.hero__photo.is-ripple-ready .ripple-distortion { opacity: 1; }
/* The beam is one long ellipse anchored behind the photo, so it is full and bright where it leaves
   the photo, then tapers and fades toward its tail, with soft edges instead of a flat bar. */
.beam {
  --at: 100% 50%;
  --shape: radial-gradient(ellipse 140% 50% at var(--at), #000 40%, transparent 100%);
  position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none;
  width: 0; height: 0; transform-origin: left center;
  background: radial-gradient(ellipse 140% 50% at var(--at),
    #fff 0%, var(--beam) 28%,
    color-mix(in srgb, var(--beam) 72%, transparent) 52%,
    color-mix(in srgb, var(--beam) 24%, transparent) 78%,
    transparent 100%);
  filter: blur(1.5px);
}
.hero--left .beam { --at: 0% 50%; }
.beam::before { /* soft halo that tapers with the beam */
  content: ""; position: absolute; left: 0; right: 0; top: -120%; bottom: -120%; z-index: -1;
  background: radial-gradient(ellipse 140% 50% at var(--at), rgba(var(--glow), .3) 0%, rgba(var(--glow), .1) 45%, transparent 75%);
  filter: blur(14px);
}
.beam::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, .95) 50%, transparent 100%);
  background-size: 30% 100%; background-repeat: no-repeat;
  animation: glint 5.5s 2.2s linear infinite; mix-blend-mode: screen;
  -webkit-mask-image: var(--shape); mask-image: var(--shape); /* keep the glint inside the tapered beam */
}
@keyframes glint { from { background-position: -40% 0; } to { background-position: 140% 0; } }
.js .beam { clip-path: inset(0 100% 0 0); transition: clip-path 1.4s var(--ease); }
.js .hero--left .beam { clip-path: inset(0 0 0 100%); }
.js.is-ready .beam { clip-path: inset(0 0 0 0); }
.dust { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.hero__content {
  position: relative; z-index: 3; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: space-between; gap: 40px;
  padding-block: calc(110px + env(safe-area-inset-top, 0px)) 40px;
}
.hero--left .hero__content { align-items: flex-end; text-align: right; }
.title {
  position: relative; margin: 0;
  font-family: var(--f-display); font-weight: 900; font-stretch: 125%;
  font-size: clamp(52px, 10.6vw, 176px); line-height: .86; letter-spacing: -.035em;
  text-transform: uppercase; color: var(--ink);
}
.title__copy { display: block; position: relative; }
.title__line { display: block; overflow: hidden; padding-bottom: .04em; }
.title__line > span { display: inline-block; white-space: nowrap; will-change: transform; }
.title__line--out { color: transparent; -webkit-text-stroke: 1.5px color-mix(in srgb, var(--ink) 55%, transparent); }
.title__lit {
  position: absolute; inset: 0; pointer-events: none; color: var(--beam-hot);
  text-shadow: 0 0 22px rgba(var(--glow), .8), 0 0 60px rgba(var(--glow), .45);
  clip-path: polygon(0 0, 0 0, 0 0);
}
.title__lit .title__line--out { color: var(--beam-hot); -webkit-text-stroke: 0; }
.js .char { display: inline-block; transform: translateY(105%); transition: transform 1.1s var(--ease); transition-delay: calc(var(--i) * 28ms + 150ms); }
.js.is-ready .char { transform: none; }

.hero__foot { display: grid; grid-template-columns: minmax(0, 30rem) auto; align-items: end; justify-content: space-between; gap: 24px; width: 100%; }
.hero--left .hero__foot { grid-template-columns: auto minmax(0, 30rem); }
.hero--left .hero__foot > :first-child { order: 2; }
.hero__intro { margin: 0; font-size: clamp(17px, 1.4vw, 21px); line-height: 1.5; color: var(--ink); max-width: 30rem; }
.hero__intro em { font-style: normal; color: var(--beam); }
.hero__meta { display: flex; flex-direction: column; gap: 6px; color: var(--fog); text-align: right; }
.hero--left .hero__meta { text-align: left; }
.scroll-cue { display: inline-flex; align-items: center; gap: 10px; color: var(--fog); text-decoration: none; margin-top: 18px; }
.scroll-cue b { width: 1px; height: 38px; background: var(--fog); position: relative; overflow: hidden; }
.scroll-cue b::after { content: ""; position: absolute; left: 0; top: -40%; width: 100%; height: 40%; background: var(--beam); animation: drip 1.8s var(--ease) infinite; }
@keyframes drip { to { top: 110%; } }
.js .fade-up { opacity: 0; transform: translateY(24px); transition: opacity .9s var(--ease) .9s, transform .9s var(--ease) .9s; }
.js.is-ready .fade-up { opacity: 1; transform: none; }

@media (max-width: 820px) {
  .hero__photo { height: 64%; right: -18%; opacity: .9; }
  .hero--left .hero__photo { left: -18%; right: auto; }
  .hero__content { justify-content: flex-start; }
  .hero--left .hero__content { align-items: stretch; text-align: left; }
  .hero__foot, .hero--left .hero__foot { grid-template-columns: 1fr; margin-top: auto; }
  .hero--left .hero__foot > :first-child { order: 0; }
  .hero__meta { text-align: left; }
  .title { font-size: clamp(40px, 13vw, 92px); }
}

/* ---------- section heads ---------- */
section { position: relative; }
.head { display: flex; align-items: end; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding-block: clamp(90px, 12vw, 170px) clamp(36px, 5vw, 64px); }
.head h2 { margin: 0; font: 900 clamp(44px, 8vw, 128px)/.88 var(--f-display); font-stretch: 125%; letter-spacing: -.035em; text-transform: uppercase; text-wrap: balance; }
.head h2 .out { color: transparent; -webkit-text-stroke: 1.5px var(--fog); }
.head p { margin: 0; max-width: 24rem; color: var(--fog); }
.js [data-reveal] { opacity: 0; transform: translateY(40px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
.js .head h2[data-reveal] { opacity: 1; transform: none; }
/* on the narrowest phones, size the big section headings to the screen so their longest word
   (PROJECTS, LAUNCHES) still fits on one line */
@media (max-width: 400px) {
  html .head h2, html .shelf-head h2, html .dir__head h2, html .brief__side h2 { font-size: 11.6vw; } /* html: outranks each page's own heading size */
}
/* a split word never breaks between its letters (its letters are inline-blocks, which otherwise allow it) */
.wd { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; padding-right: .02em; white-space: nowrap; }
.js .ch { display: inline-block; transform: translateY(115%) rotate(6deg); transform-origin: 0 100%; transition: transform 1.1s var(--ease); transition-delay: calc(var(--d) * 22ms); }
.js .is-in .ch { transform: none; }

/* ---------- next page link: the last thing on every page ---------- */
.next {
  display: block; text-decoration: none; position: relative; isolation: isolate; overflow: hidden;
  padding-block: clamp(70px, 10vw, 150px); border-top: 1px solid var(--line);
}
.next::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--nn, var(--wall));
  clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
  transition: clip-path .9s var(--ease-io);
}
.next__top { display: flex; justify-content: space-between; color: var(--fog); transition: color .4s; }
.next__name {
  display: flex; align-items: center; justify-content: space-between; gap: clamp(10px, 2vw, 24px); margin-top: 18px;
  font: 900 clamp(32px, 9.6vw, 190px)/.84 var(--f-display); font-stretch: 125%; letter-spacing: -.045em; text-transform: uppercase;
  transition: color .5s;
}
.next__name i {
  flex: none; display: grid; place-items: center; width: clamp(56px, 7vw, 110px); aspect-ratio: 1; border-radius: 50%;
  background: var(--beam); color: var(--night); font: 400 clamp(24px, 3vw, 44px)/1 var(--f-body);
  transition: transform .7s var(--ease), background .4s;
}
.next:hover::before, .next:focus-visible::before { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
.next:hover .next__name, .next:focus-visible .next__name { color: var(--nb, var(--beam)); }
.next:hover .next__top, .next:focus-visible .next__top { color: var(--nb, var(--beam)); }
.next:hover .next__name i, .next:focus-visible .next__name i { transform: rotate(-45deg); background: var(--nb, var(--beam)); color: var(--nn, var(--night)); }

/* ---------- shared bits ---------- */
.magnet {
  display: inline-grid; place-items: center; width: clamp(150px, 15vw, 200px); aspect-ratio: 1; border-radius: 50%;
  background: var(--beam); color: var(--night); text-decoration: none; font: 700 17px/1.1 var(--f-body); text-align: center;
  border: 0; transition: background .3s; will-change: transform; cursor: pointer;
}
.magnet:hover { background: #fff; }
.magnet span { display: block; pointer-events: none; }
.footer { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding-block: 24px calc(24px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); color: var(--fog); }
.footer a { text-decoration: none; }
.footer a:hover { color: var(--beam); }

/* ---------- motion chrome ---------- */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
.progress { position: fixed; left: 0; right: 0; top: 0; height: 2px; z-index: 60; pointer-events: none; }
.progress i { display: block; height: 100%; background: linear-gradient(90deg, transparent, var(--beam) 30%, var(--beam-hot)); box-shadow: 0 0 12px rgba(var(--glow), .7); transform-origin: left; transform: scaleX(var(--p, 0)); }
.hud {
  position: fixed; left: var(--gutter); bottom: calc(22px + env(safe-area-inset-bottom, 0px)); z-index: 55;
  display: flex; align-items: center; gap: 14px; pointer-events: none; mix-blend-mode: difference; color: #fff;
  opacity: 0; transform: translateY(10px); transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.hud.is-on { opacity: 1; transform: none; }
.hud__ring { width: 34px; height: 34px; flex: none; }
.hud__ring circle { fill: none; stroke-width: 2; }
.hud__ring .bg { stroke: rgba(255, 255, 255, .25); }
.hud__ring .fg { stroke: #fff; stroke-linecap: round; transform: rotate(-90deg); transform-origin: 50% 50%; }
.hud__n { font-variant-numeric: tabular-nums; }
.hud__label { min-width: 12ch; }
.hud-pct { position: fixed; right: var(--gutter); bottom: calc(22px + env(safe-area-inset-bottom, 0px)); z-index: 55; pointer-events: none; mix-blend-mode: difference; color: #fff; font-variant-numeric: tabular-nums; opacity: 0; transition: opacity .6s; }
.hud-pct.is-on { opacity: 1; }
@media (max-width: 720px) { .hud, .hud-pct { display: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .js .char, .js .fade-up, .js [data-reveal], .js .ch { opacity: 1; transform: none; }
  .js .beam { clip-path: none; }
  .pt, .ld { display: none !important; }
}