:root {
  --wall: #0a0e10;
  --wall-deep: #06090a;
  --cream: #f4e8d4;
  --sand: #d2c4ad;
  --dim: #b8ac97;
  --amber: #ffb454;
  --amber-rgb: 255 180 84;
  --orange-rgb: 255 122 36;
  --amber-ink: #1b0f05;
  --teal-rgb: 60 170 180;
  --rain-rgb: 190 220 214;
  --phosphor: #8dffa8;
  --phosphor-rgb: 141 255 168;
  --frame: #0d0a09;
  --case-hi: #3d342f;
  --case: #221c19;
  --case-lo: #100d0c;
  --line: rgb(244 232 212 / 0.14);
  --accent: var(--amber);
  --accent-rgb: var(--amber-rgb);
  --grain: repeating-linear-gradient(0.4deg, rgb(255 200 140 / 0.06) 0 1px, rgb(0 0 0 / 0) 1px 4px, rgb(0 0 0 / 0.18) 4px 5px, rgb(0 0 0 / 0) 5px 9px, rgb(255 200 140 / 0.035) 9px 10px, rgb(0 0 0 / 0) 10px 17px);
  --wood: linear-gradient(#6f3d1c, #3a1e0f);

  --font-serif: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --gutter: clamp(1.25rem, 5vw, 4rem);
  --wrap-max: 78rem;
  --section-space: clamp(5rem, 12vw, 10rem);
  --header-h: 4rem;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: var(--wall);
  scroll-padding-top: 5rem;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  overflow-x: hidden;
  color: var(--cream);
  font-family: var(--font-serif);
  font-size: clamp(1.02rem, 0.97rem + 0.25vw, 1.16rem);
  font-weight: 380;
  line-height: 1.6;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
}

h1,
h2,
h3 {
  margin: 0;
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-variation-settings: "SOFT" 60, "WONK" 0;
}

em {
  font-style: italic;
  color: var(--amber);
  text-shadow: 0 0 1.6rem rgb(var(--amber-rgb) / 0.35);
}

a {
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
}

.skip-link {
  position: fixed;
  left: 1rem;
  top: -4rem;
  z-index: 50;
  padding: 0.7rem 1rem;
  border-radius: 0.3rem;
  background: var(--amber);
  color: var(--amber-ink);
  font-family: var(--font-mono);
  font-size: 0.85rem;
}

.skip-link:focus {
  top: 1rem;
}

.wrap {
  width: min(100% - 2 * var(--gutter), var(--wrap-max));
  margin-inline: auto;
}

/* Room: the wall behind everything. Film grain, a cold wash from the window side and a warm one from the lamps. */
.room {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background:
    url("../assets/img/scene/grain.svg"),
    radial-gradient(120% 80% at 100% 0%, rgb(var(--teal-rgb) / 0.09), transparent 60%),
    radial-gradient(90% 70% at 0% 100%, rgb(var(--orange-rgb) / 0.07), transparent 60%);
}

.glow {
  position: absolute;
  left: 0;
  top: 0;
  width: 44rem;
  height: 44rem;
  margin: -22rem 0 0 -22rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(var(--amber-rgb) / 0.09), transparent 62%);
  transform: translate3d(30vw, 40vh, 0);
  display: none;
}

@media (hover: hover) and (pointer: fine) {
  .glow {
    display: block;
  }
}

.site-header,
.page {
  position: relative;
  z-index: 1;
}

.page {
  overflow-x: clip;
}

/* Header */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 3vw, 2rem);
  height: var(--header-h);
  padding: 0 var(--gutter);
  background: linear-gradient(rgb(6 9 10 / 0.94), rgb(6 9 10 / 0.7) 65%, rgb(6 9 10 / 0));
  font-family: var(--font-mono);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-right: auto;
  padding: 0.6rem 0;
  color: var(--cream);
  font-weight: 500;
  text-decoration: none;
}

.brand__lamp {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 0.5rem var(--amber), 0 0 1.4rem rgb(var(--amber-rgb) / 0.7);
}

.site-nav {
  display: flex;
  gap: clamp(0.65rem, 2.5vw, 2rem);
}

.site-nav a {
  padding: 0.6rem 0;
  color: var(--sand);
  text-decoration: none;
}

.site-nav a:hover {
  color: var(--amber);
}

.lang {
  display: flex;
  align-items: center;
}

.lang__option {
  padding: 0.6rem 0.25rem;
  border: 0;
  background: none;
  color: var(--dim);
  font: inherit;
  cursor: pointer;
}

.lang__option[aria-pressed="true"] {
  color: var(--amber);
  text-shadow: 0 0 0.8rem rgb(var(--amber-rgb) / 0.6);
}

.lang__divider {
  color: rgb(244 232 212 / 0.3);
}

@media (max-width: 30em) {
  .site-header {
    padding: 0 1rem;
    font-size: 0.7rem;
    letter-spacing: 0;
  }
}

/* Window: the cold side. City image, rain, glass reflections, then the frame. */
.window {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 0.2rem;
  background: #082631;
  box-shadow: 0 0 0 0.5rem var(--frame), 0 0 0 0.58rem rgb(138 83 38 / 0.4), 0 0 8rem 1rem rgb(var(--teal-rgb) / 0.17);
}

.window__view {
  position: absolute;
  inset: 0;
  background: #082631 url("../assets/img/scene/city-800.webp") 62% 100% / cover no-repeat;
}

@media (min-width: 48em) {
  .window__view {
    background-image: url("../assets/img/scene/city-1600.webp");
  }
}

.rain {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.rain__layer {
  position: absolute;
  top: -30rem;
  right: -25%;
  bottom: -25%;
  left: -25%;
  transform: rotate(9deg);
  background-repeat: repeat;
}

.rain__layer--far {
  --tile: 210px;
  opacity: 0.35;
  background-image:
    radial-gradient(1px 16px at 23px 44px, rgb(var(--rain-rgb) / 0.7), transparent),
    radial-gradient(1px 14px at 61px 150px, rgb(var(--rain-rgb) / 0.6), transparent),
    radial-gradient(1px 18px at 88px 96px, rgb(var(--rain-rgb) / 0.6), transparent),
    radial-gradient(1px 15px at 40px 176px, rgb(var(--rain-rgb) / 0.5), transparent);
  background-size: 97px var(--tile), 131px var(--tile), 173px var(--tile), 71px var(--tile);
}

.rain__layer--mid {
  --tile: 260px;
  opacity: 0.4;
  background-image:
    radial-gradient(1px 26px at 37px 60px, rgb(var(--rain-rgb) / 0.75), transparent),
    radial-gradient(1px 30px at 140px 190px, rgb(var(--rain-rgb) / 0.65), transparent),
    radial-gradient(1px 24px at 90px 120px, rgb(var(--rain-rgb) / 0.6), transparent);
  background-size: 211px var(--tile), 263px var(--tile), 157px var(--tile);
}

.rain__layer--near {
  --tile: 320px;
  opacity: 0.3;
  background-image:
    radial-gradient(1.5px 44px at 120px 90px, rgb(var(--rain-rgb) / 0.8), transparent),
    radial-gradient(1.5px 38px at 300px 230px, rgb(var(--rain-rgb) / 0.7), transparent);
  background-size: 389px var(--tile), 467px var(--tile);
}

.window__glass {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(104deg, rgb(255 255 255 / 0.06) 0 14%, transparent 14.3% 38%, rgb(255 255 255 / 0.035) 38.3% 45%, transparent 45.3%),
    radial-gradient(70% 45% at 60% 100%, rgb(var(--orange-rgb) / 0.26), transparent 70%),
    linear-gradient(rgb(4 10 14 / 0.35), transparent 30%);
}

.window__frame {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent calc(33.33% - 0.28rem), var(--frame) 0 calc(33.33% + 0.28rem), transparent 0 calc(66.66% - 0.28rem), var(--frame) 0 calc(66.66% + 0.28rem), transparent 0);
  box-shadow: inset 0 0 3rem rgb(0 0 0 / 0.55);
}

/* Flexo: the warm side. The cone and the pool are separate layers so they can flicker and blend. */
.flexo {
  position: absolute;
  aspect-ratio: 220 / 320;
}

.flexo__body {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0.5rem 0.6rem rgb(0 0 0 / 0.6));
}

.flexo__bulb {
  position: absolute;
  left: 39.5%;
  top: 34%;
  width: 95%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(255 220 160 / 0.8), rgb(var(--amber-rgb) / 0.3) 30%, transparent 68%);
  transform: translate(-50%, -50%);
  mix-blend-mode: screen;
}

.flexo__cone {
  position: absolute;
  left: 39.5%;
  top: 34%;
  width: 260%;
  height: 108%;
  margin-left: -130%;
  background: conic-gradient(from 146deg at 50% 0, transparent 0deg, rgb(var(--amber-rgb) / 0.36) 14deg, rgb(255 204 130 / 0.46) 34deg, rgb(var(--amber-rgb) / 0.36) 54deg, transparent 68deg);
  -webkit-mask-image: radial-gradient(ellipse 75% 100% at 50% 0, #000, rgb(0 0 0 / 0.6) 55%, transparent 100%);
  mask-image: radial-gradient(ellipse 75% 100% at 50% 0, #000, rgb(0 0 0 / 0.6) 55%, transparent 100%);
  filter: blur(6px);
  transform-origin: 50% 0;
  transform: rotate(32deg);
  mix-blend-mode: screen;
}

.flexo::after {
  content: "";
  position: absolute;
  left: -125%;
  top: 93%;
  width: 210%;
  height: 16%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(255 204 130 / 0.75), rgb(var(--amber-rgb) / 0.3) 55%, transparent);
  mix-blend-mode: screen;
}

.flexo--mirrored {
  transform: scaleX(-1);
}

.prop {
  position: absolute;
  height: auto;
  filter: drop-shadow(0 0.4rem 0.5rem rgb(0 0 0 / 0.55));
}

.prop--plant {
  aspect-ratio: 200 / 260;
}

.prop--books {
  aspect-ratio: 124 / 60;
}

.prop--speaker {
  aspect-ratio: 120 / 200;
}

/* Small television with an orange tube, as a second warm light source. */
.tv {
  position: absolute;
  aspect-ratio: 4 / 3;
  border-radius: 8% / 10%;
  background: linear-gradient(170deg, #3a2a22, #1a1310 45%, #0d0a09);
  box-shadow: inset 0 1px 0 rgb(255 190 120 / 0.35), 0 0 5rem 1rem rgb(var(--orange-rgb) / 0.28), 0 0.8rem 1.2rem rgb(0 0 0 / 0.6);
}

.tv__screen {
  position: absolute;
  left: 7%;
  top: 9%;
  width: 64%;
  height: 76%;
  border-radius: 14% / 16%;
  background: radial-gradient(circle at 42% 40%, #ffe2a6 0, #ffa63d 30%, #f0641a 62%, #9c2c0c 100%);
  box-shadow: 0 0 0 0.18rem #080606, 0 0 2.4rem rgb(var(--orange-rgb) / 0.75), inset 0 0 1.2rem rgb(120 30 0 / 0.6);
}

.tv__panel {
  position: absolute;
  right: 6%;
  top: 9%;
  width: 17%;
  height: 76%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12%;
  padding-top: 10%;
  background: repeating-linear-gradient(#0b0908 0 2px, #2a211c 2px 4px) bottom / 100% 26% no-repeat;
}

.tv__panel::before,
.tv__panel::after {
  content: "";
  width: 72%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, #6b5444 0 45%, #0c0908 50%);
}

.tv::after {
  content: "";
  position: absolute;
  left: -45%;
  right: -45%;
  top: 94%;
  height: 34%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(var(--orange-rgb) / 0.6), transparent);
  mix-blend-mode: screen;
}

/* Desk and shelves: dark wood that only shows where light falls on it. */
.desk {
  --pool-x: 70%;
  --tube-x: -50%;
  background:
    radial-gradient(ellipse 26% 46% at var(--pool-x) 16%, rgb(255 214 150 / 0.7), rgb(var(--amber-rgb) / 0.22) 55%, transparent 80%),
    radial-gradient(ellipse 16% 40% at var(--tube-x) 8%, rgb(var(--orange-rgb) / 0.55), transparent 75%),
    linear-gradient(transparent 46%, rgb(255 190 120 / 0.45) 46%, rgb(0 0 0 / 0.7) calc(46% + 2px), rgb(0 0 0 / 0.92)),
    linear-gradient(rgb(0 0 0 / 0.6), rgb(0 0 0 / 0.15) 46%),
    var(--grain),
    var(--wood);
  box-shadow: 0 -1px 0 rgb(255 190 120 / 0.3), 0 1.5rem 3rem rgb(0 0 0 / 0.7);
}

/* Hero */
.hero {
  --desk-h: clamp(3.25rem, 9vw, 8rem);
  --scene-h: 13rem;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: calc(var(--header-h) + var(--scene-h) + 3rem) 0 calc(var(--desk-h) + 2.5rem);
  background:
    radial-gradient(30rem 24rem at 20% 62%, rgb(var(--orange-rgb) / 0.15), transparent 70%),
    radial-gradient(36rem 26rem at 80% 30%, rgb(var(--teal-rgb) / 0.1), transparent 70%),
    linear-gradient(#080b0d, #0b0f10);
}

.hero__scene {
  position: absolute;
  top: calc(var(--header-h) + 0.6rem);
  left: var(--gutter);
  right: var(--gutter);
  height: var(--scene-h);
  z-index: -1;
}

.hero__scene::after {
  content: "";
  position: absolute;
  left: -0.8rem;
  right: -0.8rem;
  top: 100%;
  height: 0.9rem;
  border-radius: 0.1rem;
  background: radial-gradient(ellipse 40% 150% at 55% 0, rgb(255 204 130 / 0.6), transparent 70%), var(--grain), var(--wood);
  box-shadow: 0 -1px 0 rgb(255 190 120 / 0.3), 0 1rem 1.5rem rgb(0 0 0 / 0.7);
}

.hero__tv {
  left: 6%;
  bottom: 0;
  width: clamp(5.25rem, 10vw, 9.5rem);
}

.hero__books {
  left: 37%;
  bottom: 0;
  width: clamp(4rem, 7.5vw, 7rem);
}

.hero__flexo {
  right: 12%;
  bottom: 0;
  width: clamp(7.25rem, 14vw, 12.5rem);
}

.hero__plant {
  right: -1%;
  bottom: 0;
  width: clamp(4.25rem, 8.5vw, 8rem);
}

.hero__desk {
  --pool-x: 30%;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  height: var(--desk-h);
}

.hero__inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 1.1rem 1rem;
}

.portrait {
  width: clamp(4.5rem, 9vw, 7.5rem);
  margin: 0;
  padding: 0.35rem;
  border-radius: 0.2rem;
  background: linear-gradient(160deg, #7a4722, #2e190d);
  box-shadow: inset 0 0 0 1px rgb(255 200 140 / 0.25), 0 0.8rem 1.6rem rgb(0 0 0 / 0.65), 0 0 3rem rgb(var(--amber-rgb) / 0.2);
  transform: rotate(-2deg);
}

.portrait img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0.1rem;
}

.status {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  color: var(--cream);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.05em;
}

.status__dot {
  flex: none;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--phosphor);
  box-shadow: 0 0 0.5rem var(--phosphor), 0 0 1.2rem rgb(var(--phosphor-rgb) / 0.7);
}

.hero__title,
.hero__pitch {
  grid-column: 1 / -1;
}

.hero__title {
  display: grid;
  gap: 0.3em;
}

.hero__name {
  font-size: clamp(2.9rem, 2rem + 4.6vw, 5.4rem);
  font-weight: 420;
  line-height: 0.95;
  letter-spacing: -0.03em;
  text-shadow: 0 0 2.5rem rgb(var(--amber-rgb) / 0.28);
}

.hero__role {
  color: #ffd9a0;
  font-size: clamp(1.4rem, 1.1rem + 1.5vw, 2.3rem);
  font-weight: 340;
  line-height: 1.12;
}

.amp {
  color: var(--amber);
  font-style: italic;
}

.hero__lede {
  max-width: 34rem;
  margin: 0;
  color: var(--sand);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.75rem;
  margin-top: 1.6rem;
}

.button {
  display: inline-flex;
  align-items: center;
  min-height: 3.1rem;
  padding: 0.75rem 1.3rem;
  border-radius: 0.35rem;
  background: linear-gradient(#ffc56e, #ff9d3a);
  color: var(--amber-ink);
  font-family: var(--font-mono);
  font-size: 0.88rem;
  font-weight: 500;
  text-decoration: none;
  box-shadow: inset 0 0 0 1px rgb(255 230 180 / 0.5), 0 0 2.2rem rgb(var(--orange-rgb) / 0.45), 0 0.6rem 1.2rem rgb(0 0 0 / 0.5);
}

.button:hover {
  background: linear-gradient(#ffd391, #ffab52);
  box-shadow: inset 0 0 0 1px rgb(255 230 180 / 0.6), 0 0 3.2rem rgb(var(--orange-rgb) / 0.65), 0 0.6rem 1.2rem rgb(0 0 0 / 0.5);
}

.text-link {
  padding: 0.6rem 0;
  color: var(--amber);
  font-family: var(--font-mono);
  font-size: 0.88rem;
  text-underline-offset: 0.3em;
}

@media (min-width: 62em) {
  .hero {
    display: grid;
    align-items: center;
    min-height: max(40rem, min(100vh, 56rem));
    padding: calc(var(--header-h) + 2rem) 0 calc(var(--desk-h) + 2.5rem);
  }

  .hero__scene {
    top: calc(var(--header-h) + 1.75rem);
    bottom: var(--desk-h);
    left: 48%;
    right: max(var(--gutter), (100vw - 86rem) / 2);
    height: auto;
  }

  .hero__scene::after {
    display: none;
  }

  .hero__inner {
    gap: 1.5rem 1.25rem;
  }

  .hero__title,
  .hero__pitch {
    max-width: min(34rem, 45%);
  }

  .hero__desk {
    --pool-x: 72%;
    --tube-x: 55%;
  }

  .hero::before {
    content: "";
    position: absolute;
    left: -8rem;
    top: -6rem;
    z-index: -1;
    width: 62rem;
    height: 58rem;
    background: conic-gradient(from 118deg at 0 0, transparent 0deg, rgb(var(--amber-rgb) / 0.13) 9deg, rgb(255 204 130 / 0.17) 22deg, rgb(var(--amber-rgb) / 0.1) 36deg, transparent 48deg);
    -webkit-mask-image: radial-gradient(ellipse 100% 100% at 0 0, transparent 8%, #000 34%, transparent 80%);
    mask-image: radial-gradient(ellipse 100% 100% at 0 0, transparent 8%, #000 34%, transparent 80%);
    filter: blur(14px);
    pointer-events: none;
  }
}

/* Sections */
.section {
  position: relative;
  padding: var(--section-space) 0;
}

.section__head {
  margin-bottom: clamp(2.5rem, 6vw, 4.5rem);
}

.eyebrow {
  margin: 0 0 1rem;
  color: var(--amber);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.section__title {
  font-size: clamp(2.2rem, 1.4rem + 3.6vw, 4.2rem);
}

/* Pendant lamp over the work heading: cord, shade and a cone that falls on the title. */
.pendant {
  position: absolute;
  left: clamp(3.5rem, 22vw, 26rem);
  top: 0;
  z-index: -1;
  width: clamp(4rem, 7vw, 6rem);
  height: clamp(3rem, 6vw, 5rem);
  pointer-events: none;
}

.pendant::before {
  content: "";
  position: absolute;
  left: calc(50% - 1px);
  top: 0;
  width: 2px;
  height: 62%;
  background: #050404;
}

.pendant::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 42%;
  border-radius: 50% 50% 0.3rem 0.3rem / 100% 100% 0.3rem 0.3rem;
  background: linear-gradient(100deg, #2b2623, #0d0b0a 60%);
  box-shadow: 0 0.35rem 1.4rem 0.2rem rgb(255 204 130 / 0.75), 0 0.2rem 0.3rem rgb(255 230 180 / 0.9);
}

.pendant__cone {
  position: absolute;
  left: 50%;
  top: 96%;
  width: min(46rem, 150vw);
  height: 30rem;
  margin-left: max(-23rem, -75vw);
  background: conic-gradient(from 140deg at 50% 0, transparent 0deg, rgb(var(--amber-rgb) / 0.13) 14deg, rgb(255 204 130 / 0.18) 40deg, rgb(var(--amber-rgb) / 0.13) 66deg, transparent 80deg);
  -webkit-mask-image: radial-gradient(ellipse 70% 100% at 50% 0, #000 10%, transparent 100%);
  mask-image: radial-gradient(ellipse 70% 100% at 50% 0, #000 10%, transparent 100%);
  filter: blur(8px);
}

/* Work: each case is a station of lit screens on wooden shelves. */
.work {
  padding-bottom: clamp(2rem, 6vw, 5rem);
  background: radial-gradient(46rem 30rem at 92% 4rem, rgb(var(--teal-rgb) / 0.09), transparent 70%);
}

.case {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.75rem, 4vw, 3rem);
  padding: clamp(3rem, 8vw, 6rem) 0;
}

.case::before {
  content: "";
  position: absolute;
  left: -12%;
  top: -2rem;
  z-index: -1;
  width: min(46rem, 124%);
  height: 30rem;
  background: radial-gradient(closest-side, rgb(var(--orange-rgb) / 0.12), transparent);
  pointer-events: none;
}

.case--wakecast {
  --accent: #ff9e4a;
  --accent-rgb: 255 158 74;
}

.case--stable-bridge {
  --accent: #6fe0c8;
  --accent-rgb: 111 224 200;
}

.case--spaghettoni {
  --accent: #ff6b86;
  --accent-rgb: 255 107 134;
}

.case--forest-heart {
  --accent: #c59bff;
  --accent-rgb: 197 155 255;
}

.case__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 0.9rem;
  margin: 0 0 0.9rem;
  color: var(--dim);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.05em;
}

.case__number {
  color: var(--accent);
  font-size: 1rem;
  text-shadow: 0 0 1rem rgb(var(--accent-rgb) / 0.7);
}

.case__title {
  font-size: clamp(2.4rem, 1.5rem + 4.4vw, 4.8rem);
  letter-spacing: -0.025em;
  text-shadow: 0 0 2.5rem rgb(var(--amber-rgb) / 0.2);
}

.case__tagline {
  max-width: 36rem;
  margin: 0.8rem 0 0;
  color: var(--sand);
  font-size: clamp(1.15rem, 1rem + 0.7vw, 1.5rem);
  line-height: 1.35;
}

.case__note {
  margin: 0 0 1.6rem;
  color: var(--sand);
  font-style: italic;
}

.facts {
  display: grid;
  gap: 1.4rem;
  margin: 0;
}

.facts__row {
  display: grid;
  gap: 0.35rem;
}

.facts dt {
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.facts dd {
  margin: 0;
  color: var(--sand);
}

.facts dd p {
  margin: 0;
}

.facts dd p + p {
  margin-top: 0.7rem;
}

.plain-list,
.chips,
.thumbs,
.shelf__track,
.service-list,
.contact__links {
  margin: 0;
  padding: 0;
  list-style: none;
}

.plain-list {
  display: grid;
  gap: 0.55rem;
}

.plain-list li {
  position: relative;
  padding-left: 1.1rem;
}

.plain-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.68em;
  width: 0.38rem;
  height: 0.38rem;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0.5rem rgb(var(--accent-rgb) / 0.8);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.chips li {
  padding: 0.3rem 0.65rem;
  border: 1px solid rgb(var(--accent-rgb) / 0.35);
  border-radius: 0.25rem;
  background: rgb(var(--accent-rgb) / 0.07);
  color: var(--cream);
  font-family: var(--font-mono);
  font-size: 0.78rem;
}

.placeholder {
  padding: 0.15rem 0.45rem;
  border: 1px dashed rgb(var(--amber-rgb) / 0.55);
  border-radius: 0.2rem;
  background: rgb(var(--amber-rgb) / 0.06);
  color: var(--amber);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.link-out {
  display: inline-flex;
  gap: 0.5rem;
  margin-top: 1.8rem;
  padding: 0.4rem 0;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 0.9rem;
  text-underline-offset: 0.3em;
}

/* CRT casings. The glass overlay only darkens the corners, so the screenshot stays sharp. */
.screen {
  position: relative;
  margin: 0;
}

.screen__frame {
  --bezel: clamp(0.55rem, 1.6vw, 1.1rem);
  --chin: clamp(1.5rem, 3.2vw, 2.2rem);
  --tube-radius: 0.7rem / 0.8rem;
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--bezel) var(--bezel) 0;
  border-radius: 1rem 1rem 0.6rem 0.6rem;
  background: linear-gradient(172deg, var(--case-hi), var(--case) 22%, var(--case-lo));
  box-shadow: inset 0 1px 0 rgb(255 205 150 / 0.3), inset 0 0 0 1px rgb(0 0 0 / 0.7), 0 0 5rem -0.5rem rgb(var(--accent-rgb) / 0.4), 0 2rem 2.5rem -1rem rgb(0 0 0 / 0.85);
}

.screen__frame img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--tube-radius);
  background: #050505;
  box-shadow: 0 0 0 0.3rem #070606, 0 0 0 0.38rem rgb(255 255 255 / 0.05), 0 0 2rem rgb(var(--accent-rgb) / 0.35);
}

.screen__frame::after {
  content: "";
  position: absolute;
  inset: var(--bezel) var(--bezel) var(--chin);
  z-index: 1;
  border-radius: var(--tube-radius);
  background:
    linear-gradient(118deg, rgb(255 255 255 / 0.08), rgb(255 255 255 / 0.02) 22%, transparent 34%),
    radial-gradient(ellipse at center, transparent 70%, rgb(0 0 0 / 0.2));
  pointer-events: none;
}

.screen__bar {
  order: 2;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  height: var(--chin);
  padding: 0 0.3rem;
  overflow: hidden;
  color: #cfc1a8;
  font-family: var(--font-mono);
  font-size: clamp(0.56rem, 1.1vw, 0.72rem);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

.screen__bar::after {
  content: "";
  flex: none;
  width: 2.7em;
  height: 1.1em;
  margin-left: auto;
  background:
    radial-gradient(circle 0.5em at 0.55em 50%, #77665a 0 50%, #090707 58% 96%, transparent),
    radial-gradient(circle 0.5em at 2.1em 50%, #77665a 0 50%, #090707 58% 96%, transparent);
}

.screen__led {
  flex: none;
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0.5em var(--accent), 0 0 1.2em rgb(var(--accent-rgb) / 0.8);
}

.screen--main::after,
.thumbs::after {
  content: "";
  display: block;
  height: 0.9rem;
  margin: 0 clamp(-1.25rem, -2vw, -0.6rem);
  border-radius: 0.1rem;
  background: radial-gradient(ellipse 46% 170% at 50% 0, rgb(var(--accent-rgb) / 0.6), transparent 70%), var(--grain), var(--wood);
  box-shadow: 0 -1px 0 rgb(255 190 120 / 0.25), 0 1.2rem 1.6rem rgb(0 0 0 / 0.7);
}

.thumbs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(0.6rem, 2vw, 1.4rem);
  align-items: end;
  margin-top: clamp(1.4rem, 3vw, 2.2rem);
}

.thumbs::after {
  grid-column: 1 / -1;
}

.thumbs li:nth-child(2) {
  padding-inline: 7%;
}

.screen--window .screen__frame {
  --bezel: clamp(0.3rem, 0.8vw, 0.5rem);
  --chin: clamp(0.6rem, 1.5vw, 0.95rem);
  --tube-radius: 0.35rem;
  padding-bottom: var(--chin);
  border-radius: 0.5rem 0.5rem 0.35rem 0.35rem;
  background:
    radial-gradient(circle 0.14rem at calc(100% - 0.7rem) calc(100% - var(--chin) / 2), var(--accent) 0 60%, transparent),
    repeating-linear-gradient(90deg, rgb(0 0 0 / 0.55) 0 2px, transparent 2px 5px) 0.6rem calc(100% - var(--chin) * 0.28) / 28% calc(var(--chin) * 0.44) no-repeat,
    linear-gradient(172deg, var(--case-hi), var(--case) 25%, var(--case-lo));
  cursor: zoom-in;
}

.screen--window .screen__frame img {
  box-shadow: 0 0 0 0.15rem #070606, 0 0 1rem rgb(var(--accent-rgb) / 0.35);
}

/* 3D card: main.js feeds --tilt-x/--tilt-y and the glare position while the mouse is over a card. */
.screen__frame,
.phone {
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --tilt-scale: 1;
  --enlarge-scale: 1.75;
  transform: perspective(60rem) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) scale(var(--tilt-scale));
}

.screen__frame::before,
.phone::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  background: radial-gradient(circle at var(--glare-x, 50%) var(--glare-y, 50%), rgb(255 232 190 / 0.2), transparent 55%);
  opacity: 0;
  pointer-events: none;
}

.screen__frame.is-tilting::before,
.phone.is-tilting::after {
  opacity: 1;
}

.screen--window .screen__frame {
  transform-origin: 50% 100%;
}

.thumbs li:first-child .screen__frame {
  transform-origin: 0 100%;
}

.thumbs li:last-child .screen__frame {
  transform-origin: 100% 100%;
}

.screen--window .screen__frame.is-enlarged {
  --tilt-scale: var(--enlarge-scale);
  z-index: 5;
  cursor: zoom-out;
}

@media (hover: hover) and (pointer: fine) {
  .screen--main:hover .screen__frame {
    --tilt-scale: 1.02;
  }

  .phone:hover {
    --tilt-scale: 1.05;
    z-index: 5;
  }

  .screen--window:hover .screen__frame {
    --tilt-scale: 1.4;
    z-index: 5;
  }
}

/* WakeCast: handhelds standing on a shelf that scrolls sideways. */
.shelf {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  margin-inline: calc(var(--gutter) * -1);
  padding: 1.5rem var(--gutter) 0.75rem;
  scrollbar-width: thin;
  scrollbar-color: rgb(var(--accent-rgb) / 0.5) transparent;
}

.shelf__track {
  display: flex;
  align-items: flex-end;
  gap: clamp(0.9rem, 2vw, 1.4rem);
  width: max-content;
  padding: 0 0.9rem 0.9rem;
  background: radial-gradient(ellipse 50% 170% at 50% 100%, rgb(var(--accent-rgb) / 0.5), transparent 70%) bottom / 100% 0.9rem no-repeat, var(--grain) bottom / 100% 0.9rem no-repeat, var(--wood) bottom / 100% 0.9rem no-repeat;
}

.shelf__track li {
  flex: none;
  width: clamp(9.5rem, 44vw, 13rem);
}

.phone {
  position: relative;
  margin: 0;
  padding: 0.4rem;
  border-radius: 1.15rem;
  background: linear-gradient(170deg, var(--case-hi), var(--case-lo));
  box-shadow: inset 0 1px 0 rgb(255 205 150 / 0.3), 0 0 3rem -0.5rem rgb(var(--accent-rgb) / 0.45), 0 1.2rem 1.6rem -0.6rem rgb(0 0 0 / 0.85);
}

.phone img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0.8rem;
}

@media (min-width: 48em) {
  .facts--split {
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(2rem, 5vw, 4rem);
  }
}

@media (min-width: 62em) {
  .case {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: clamp(2rem, 4vw, 4rem);
    align-items: start;
  }

  .case__head,
  .case--spaghettoni .case__media,
  .case--spaghettoni .case__body {
    grid-column: 1 / -1;
  }

  .case--wakecast .case__body,
  .case--forest-heart .case__body {
    grid-column: 1 / span 5;
  }

  .case--wakecast .case__media,
  .case--forest-heart .case__media {
    grid-column: 6 / -1;
  }

  .case--stable-bridge .case__media {
    grid-column: 1 / span 7;
  }

  .case--stable-bridge .case__body {
    grid-column: 8 / -1;
  }

  .case--spaghettoni .case__media {
    width: min(100%, 62rem);
    margin-inline: auto;
  }

  .case--wakecast .shelf {
    margin-inline: 0;
    padding-inline: 0.5rem;
  }
}

/* Services: a bookcase. Each service is a lit cubby. */
.services {
  background: radial-gradient(40rem 28rem at 4% 30%, rgb(var(--teal-rgb) / 0.08), transparent 70%);
}

.bookcase__top {
  position: relative;
  height: clamp(8rem, 17vw, 13rem);
  margin: 0 clamp(0.5rem, 2vw, 1.5rem);
}

.bookcase__speaker {
  left: 0;
  bottom: 0;
  width: clamp(3.4rem, 7vw, 5.75rem);
}

.deck {
  position: absolute;
  aspect-ratio: 3 / 1;
  border-radius: 0.2rem;
  background: linear-gradient(#2a221e, #0f0c0b);
  box-shadow: inset 0 1px 0 rgb(255 190 120 / 0.3), 0 0.4rem 0.6rem rgb(0 0 0 / 0.6);
}

.deck__meter {
  position: absolute;
  left: 8%;
  top: 26%;
  width: 36%;
  height: 46%;
  border-radius: 0.12rem;
  background: linear-gradient(100deg, transparent 48%, #2a1206 48% 52%, transparent 52%), linear-gradient(#ffd08a, #ff9a3a);
  box-shadow: 0 0 1.2rem rgb(var(--orange-rgb) / 0.7);
}

.deck__leds {
  position: absolute;
  left: 54%;
  top: 40%;
  width: 40%;
  height: 0.3rem;
  background:
    radial-gradient(circle 0.15rem at 0.2rem 50%, #ff4b3e 0 70%, transparent),
    radial-gradient(circle 0.15rem at 1rem 50%, var(--phosphor) 0 70%, transparent),
    radial-gradient(circle 0.15rem at 1.8rem 50%, var(--amber) 0 70%, transparent);
  filter: drop-shadow(0 0 0.25rem rgb(255 120 80 / 0.9));
}

.bookcase__deck {
  left: clamp(4.4rem, 9vw, 7.25rem);
  bottom: 0;
  width: clamp(6rem, 13vw, 10rem);
}

.bookcase__books {
  left: 44%;
  bottom: 0;
  width: clamp(4.25rem, 8vw, 7rem);
}

.bookcase__plant {
  right: 30%;
  bottom: 0;
  width: clamp(4rem, 8vw, 7rem);
}

.bookcase__flexo {
  right: 4%;
  bottom: 0;
  width: clamp(6.5rem, 12vw, 10rem);
}

.service-list {
  position: relative;
  display: grid;
  gap: clamp(0.6rem, 1.4vw, 1rem);
  padding: clamp(0.6rem, 1.4vw, 1rem);
  border-radius: 0.3rem;
  background: radial-gradient(ellipse 50% 9rem at 68% 0, rgb(255 204 130 / 0.5), transparent 70%), var(--grain), var(--wood);
  box-shadow: inset 0 1px 0 rgb(255 200 140 / 0.35), 0 3rem 4rem -1rem rgb(0 0 0 / 0.9);
}

.service {
  position: relative;
  min-height: 15rem;
  padding: 1.6rem 1.4rem 5.25rem;
  background:
    linear-gradient(rgb(255 204 130 / 0.75), transparent 2px),
    radial-gradient(120% 60% at 50% 0, rgb(var(--amber-rgb) / 0.2), transparent 70%),
    linear-gradient(#140e0b, #080606);
  box-shadow: inset 0 0 2.5rem rgb(0 0 0 / 0.75);
}

.service::after {
  content: "";
  position: absolute;
  right: 1.2rem;
  bottom: 0;
  width: 7rem;
  height: 3.6rem;
  background:
    linear-gradient(#6b1f1a, #4a1512) 0 100% / 0.9rem 100% no-repeat,
    linear-gradient(#1c5357, #123a3d) 1rem 100% / 0.7rem 86% no-repeat,
    linear-gradient(#a06a24, #6d4716) 1.8rem 100% / 1.1rem 94% no-repeat,
    linear-gradient(#2a2a3f, #1a1a28) 3rem 100% / 0.8rem 78% no-repeat,
    linear-gradient(#7d3a1c, #532510) 3.9rem 100% / 1rem 90% no-repeat,
    linear-gradient(#c9b08a, #8d7a5c) 5rem 100% / 0.55rem 70% no-repeat,
    linear-gradient(#5e1c18, #3b110f) 5.65rem 100% / 1.2rem 97% no-repeat;
}

.service:nth-child(even)::after {
  right: auto;
  left: 1.2rem;
  transform: scaleX(-1);
}

.service:nth-child(3)::after {
  width: 4.9rem;
}

.service p {
  margin: 0;
  color: var(--sand);
  font-size: 0.98rem;
}

.service .service__index {
  margin-bottom: 0.9rem;
  color: var(--amber);
  font-family: var(--font-mono);
  font-size: 0.8rem;
}

.service__title {
  margin-bottom: 0.7rem;
  font-size: clamp(1.4rem, 1.2rem + 0.6vw, 1.7rem);
}

@media (max-width: 39.99em) {
  .bookcase__books {
    display: none;
  }

  .bookcase__plant {
    right: 34%;
  }
}

@media (min-width: 40em) {
  .service-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 68em) {
  .service-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .service {
    min-height: 21rem;
  }
}

/* Contact: back at the window, with a phosphor terminal on the sill. */
.contact {
  padding-top: 0;
  padding-bottom: clamp(4rem, 10vw, 7rem);
  background: radial-gradient(40rem 26rem at 22% 78%, rgb(var(--orange-rgb) / 0.11), transparent 70%);
}

.contact__scene {
  position: relative;
  width: min(100% - 2 * var(--gutter), 88rem);
  height: clamp(14rem, 32vw, 25rem);
  margin-inline: auto;
}

.contact__sill {
  --pool-x: 28%;
  position: absolute;
  left: -0.9rem;
  right: -0.9rem;
  top: 100%;
  height: clamp(1.6rem, 3vw, 2.6rem);
}

.contact__flexo {
  left: 9%;
  bottom: 0;
  width: clamp(7rem, 14vw, 12rem);
  transform: scaleX(-1);
}

.contact__plant {
  right: 5%;
  bottom: 0;
  width: clamp(4.5rem, 9vw, 8.5rem);
}

.contact__books {
  right: 26%;
  bottom: 0;
  width: clamp(4rem, 8vw, 7rem);
}

.contact__inner {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  margin-top: clamp(4.5rem, 10vw, 8rem);
}

.contact__title {
  font-size: clamp(2.3rem, 1.4rem + 4vw, 4.4rem);
}

.contact__text {
  max-width: 32rem;
  margin: 1.4rem 0 0;
  color: var(--sand);
}

.terminal {
  --accent: var(--phosphor);
  --accent-rgb: var(--phosphor-rgb);
  --bezel: clamp(0.55rem, 1.6vw, 1.1rem);
  padding: var(--bezel) var(--bezel) 0;
  border-radius: 1rem 1rem 0.6rem 0.6rem;
  background: linear-gradient(172deg, var(--case-hi), var(--case) 22%, var(--case-lo));
  box-shadow: inset 0 1px 0 rgb(255 205 150 / 0.3), inset 0 0 0 1px rgb(0 0 0 / 0.7), 0 0 6rem -0.5rem rgb(var(--phosphor-rgb) / 0.3), 0 2rem 2.5rem -1rem rgb(0 0 0 / 0.85);
}

.terminal__tube {
  position: relative;
  overflow: hidden;
  padding: clamp(1.4rem, 4vw, 2.75rem);
  border-radius: 1.1rem / 1.3rem;
  background: radial-gradient(120% 100% at 50% 40%, #0c2a18, #06170d 55%, #030a06);
  box-shadow: 0 0 0 0.3rem #070606, inset 0 0 3rem rgb(0 0 0 / 0.8), 0 0 3rem rgb(var(--phosphor-rgb) / 0.25);
  color: var(--phosphor);
  font-family: var(--font-mono);
}

.terminal__tube::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(rgb(0 0 0 / 0.2) 0 1px, transparent 1px 3px);
  pointer-events: none;
}

.terminal__tube > * {
  position: relative;
}

.terminal__chin {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  height: clamp(1.5rem, 3.2vw, 2.2rem);
  padding: 0 0.3rem;
  color: #cfc1a8;
  font-family: var(--font-mono);
  font-size: clamp(0.56rem, 1.1vw, 0.72rem);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.contact__email {
  display: inline-block;
  color: var(--phosphor);
  font-size: clamp(1.02rem, 0.7rem + 1.7vw, 1.7rem);
  text-decoration: none;
  text-shadow: 0 0 0.6rem rgb(var(--phosphor-rgb) / 0.6);
}

.contact__email:hover {
  text-decoration: underline;
  text-underline-offset: 0.3em;
}

.contact__email::before {
  content: "> ";
}

.contact__email::after {
  content: "";
  display: inline-block;
  width: 0.55em;
  height: 1.05em;
  margin-left: 0.25em;
  vertical-align: -0.18em;
  background: var(--phosphor);
  box-shadow: 0 0 0.6rem rgb(var(--phosphor-rgb) / 0.7);
}

.contact__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.6rem;
  margin-top: 1.5rem;
  font-size: 0.92rem;
}

.contact__links a {
  display: inline-block;
  padding: 0.4rem 0;
  color: #b9ffc9;
  text-underline-offset: 0.3em;
}

@media (min-width: 62em) {
  .contact__inner {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  }
}

.site-footer {
  position: relative;
  padding: 2.5rem 0 3rem;
  border-top: 1px solid var(--line);
  background: var(--wall-deep);
  color: var(--dim);
  font-family: var(--font-mono);
  font-size: 0.78rem;
}

.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
}

.site-footer p {
  margin: 0;
}

.site-footer__credits {
  flex-basis: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }

  .rain__layer--far {
    animation: rain-fall 1.5s linear infinite;
  }

  .rain__layer--mid {
    animation: rain-fall 1.05s linear infinite;
  }

  .rain__layer--near {
    animation: rain-fall 0.78s linear infinite;
  }

  .flexo__cone,
  .flexo__bulb,
  .flexo::after,
  .pendant__cone {
    animation: lamp-flicker 9s linear infinite;
  }

  .tv__screen,
  .deck__meter {
    animation: tube-hum 5s ease-in-out infinite;
  }

  .screen__led {
    animation: led-pulse 3.2s ease-in-out infinite;
  }

  .contact__email::after {
    animation: cursor-blink 1.1s steps(1) infinite;
  }

  .site-nav a,
  .lang__option,
  .button {
    transition: color 0.2s, background 0.2s, box-shadow 0.25s;
  }

  .screen__frame,
  .phone {
    transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
  }

  .screen__frame.is-tilting,
  .phone.is-tilting {
    transition-duration: 0.08s;
  }

  .screen__frame::before,
  .phone::after {
    transition: opacity 0.3s;
  }

  .js [data-reveal] {
    opacity: 0;
    transform: translateY(1.25rem);
    transition: opacity 0.7s ease-out, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
  }

  .js [data-reveal].is-visible {
    opacity: 1;
    transform: none;
  }

  @keyframes rain-fall {
    to {
      transform: rotate(9deg) translate3d(0, var(--tile), 0);
    }
  }

  @keyframes lamp-flicker {
    0%, 41%, 43%, 45%, 78%, 80%, 100% {
      opacity: 1;
    }

    42%, 79% {
      opacity: 0.82;
    }

    44% {
      opacity: 0.9;
    }
  }

  @keyframes tube-hum {
    50% {
      filter: brightness(1.12);
    }
  }

  @keyframes led-pulse {
    50% {
      opacity: 0.55;
    }
  }

  @keyframes cursor-blink {
    50% {
      opacity: 0;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}