/* SCP – Containment Breach v1.3.12 pages */
@font-face {
  font-family: "Bauhaus LT Demi";
  src: url("media/fonts/bauhaus-demi.woff2") format("woff2");
  font-display: swap;
}

@font-face {
  font-family: "Excess";
  src: url("media/fonts/excess.woff2") format("woff2");
  font-display: swap;
}

:root {
  --ink: #000;
  --text: #c4c4c4;
  --dim: #8a8a8a;
  --light: #ececec;
  --frame: rgba(236, 236, 236, 0.85);
  --bauhaus: "Bauhaus LT Demi", "Arial Rounded MT Bold", sans-serif;
  --excess: "Excess", "Stencil", sans-serif;
  --body: "Barlow", Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  background: var(--ink);
  scroll-behavior: smooth;
}

body {
  margin: 0;
  overflow-x: hidden;
  color: var(--text);
  font: 400 18px/1.65 var(--body);
  -webkit-font-smoothing: antialiased;
}

img,
video {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 2000;
  padding: 10px 14px;
  background: var(--light);
  color: #000;
  font-weight: 700;
}

.skip-link:focus {
  top: 12px;
}

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

/* Text in the style of the Steam logo: scratched, blood-spattered fill with a heavy black rim.
   The rim is a blurred, stroked copy of the text (data-text) sitting behind the fill. */
.g {
  position: relative;
  display: inline-block;
  isolation: isolate;
  margin: 0;
  color: var(--light);
  font-family: var(--bauhaus);
  font-weight: 400;
  line-height: 1;
  text-shadow: none;
}

.g::before {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  z-index: -1;
  color: #000;
  -webkit-text-stroke: var(--rim, 0.15em) #000;
  filter: blur(var(--soft, 0.045em));
  opacity: 0.95;
}

/* One copy of the grunge texture stretched over each piece of text, so there are no seams.
   The padding lets the fill reach glyph parts that stick out of the line box. */
.g > span {
  padding: 0.18em 0.1em;
  margin: -0.18em -0.1em;
  color: transparent;
  background: url("media/art/fill.webp") center / cover no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.sub,
.feature h3,
.cmp-title,
.cmp-label,
.row h3 {
  --rim: 0.22em;
  --soft: 0.07em;
}

.sub {
  font-family: var(--body);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}


/* One continuous background made of the capsule's layers, moving at different depths */
.world {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  background: #000;
  pointer-events: none;
}

.world canvas {
  width: 100%;
  height: 100%;
}

.world-anim {
  position: absolute;
  width: 2px;
  height: 2px;
  opacity: 0.01;
}

.world::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, 0.1) 30%, rgba(0, 0, 0, 0.6) 100%);
}

/* Hero */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
}

.sparks {
  position: absolute;
  left: 50%;
  top: 0;
  z-index: -1;
  width: min(1100px, 140vw);
  translate: -50% 0;
  pointer-events: none;
  mix-blend-mode: screen;
  transition: opacity 900ms ease;
}

.sparks.is-done {
  opacity: 0;
}

.hero-content {
  width: 100%;
  display: grid;
  justify-items: center;
  gap: 18px;
  padding: 110px 20px 80px;
  text-align: center;
}

/* The animated logo plays, then gets swapped for live text laid exactly over a still of its last
   frame. The still also fills the text, so the selectable text looks identical to the artwork. */
.logo {
  position: relative;
  width: min(1000px, 100%);
  aspect-ratio: 1200 / 531;
  margin: 0;
  font-weight: 400;
}

.logo-still,
.logo-anim {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  user-select: none;
}

.logo-anim {
  object-fit: fill;
}

/* The text is real SVG text, so it can be selected, filled with the still so it matches the artwork */
.logo-text {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.logo-scp {
  font-family: var(--bauhaus);
  font-size: 418.7px;
}

.logo-cb {
  font-family: var(--excess);
  font-size: 95.07px;
  letter-spacing: -0.856px;
}

.logo ::selection {
  background: rgba(236, 236, 236, 0.28);
}

.hero-version {
  margin-top: 4px;
  font-size: clamp(42px, 6vw, 88px);
  --rim: 0.17em;
}

.steam-link {
  display: grid;
  justify-items: center;
  gap: 4px;
  margin-top: 14px;
  text-decoration: none;
  transition: transform 200ms ease, filter 200ms ease;
}

.steam-link img {
  width: min(250px, 52vw);
  height: auto;
}

.steam-link-text {
  font-size: clamp(22px, 2.6vw, 34px);
  --rim: 0.2em;
  --soft: 0.06em;
}

.steam-link:hover,
.steam-link:focus-visible {
  transform: scale(1.04);
  filter: brightness(1.15);
}

.hero-content > * {
  transition: opacity 1400ms ease;
}

.js body[data-intro]:not(.is-logo-done) .logo-still,
.js body[data-intro]:not(.is-logo-done) .logo-text {
  opacity: 0;
}

.js body[data-intro].is-logo-done .logo-anim {
  opacity: 0;
}

.js body[data-intro].is-logo-fade .logo-still,
.js body[data-intro].is-logo-fade .logo-text {
  transition: opacity 1600ms ease;
}

.js body[data-intro]:not(.is-details) .hero-version,
.js body[data-intro]:not(.is-details) .steam-link {
  opacity: 0;
}

.hero-content > .steam-link { transition-delay: 500ms; }


/* Update sections on the main page */
.update,
.textures {
  position: relative;
  isolation: isolate;
  padding: clamp(110px, 14vw, 190px) 20px clamp(100px, 12vw, 160px);
}

.update::before,
.textures::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(ellipse 70% 60% at 50% 45%, rgba(0, 0, 0, 0.55), transparent 80%);
  pointer-events: none;
}

.update-inner {
  width: min(100%, 1180px);
  margin: 0 auto;
}

.update-head {
  display: grid;
  justify-items: center;
  gap: 14px;
  text-align: center;
}

.update-head .sub {
  font-size: clamp(18px, 2.4vw, 32px);
}

.version {
  font-size: clamp(60px, 10vw, 156px);
  --rim: 0.14em;
}

.update-date {
  margin: 4px 0 0;
  color: var(--dim);
  font: 400 18px/1 var(--bauhaus);
  text-shadow: 0 0 8px #000;
}

.update-copy {
  max-width: 720px;
  margin: 34px auto 0;
  text-align: center;
  text-shadow: 0 0 12px #000, 0 0 3px #000;
}

.update-copy p {
  margin: 0 0 22px;
  font-size: 19px;
}

.update-copy a {
  color: var(--light);
}

.update-features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px clamp(24px, 4vw, 56px);
  margin-top: clamp(46px, 6vw, 80px);
}

.update-features.is-two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.feature {
  text-align: center;
  text-shadow: 0 0 12px #000, 0 0 3px #000;
}

.feature h3 {
  margin-bottom: 14px;
  font-size: clamp(24px, 2.4vw, 34px);
}

.feature p {
  max-width: 40ch;
  margin: 0 auto;
  font-size: 17px;
}

.update-more {
  display: flex;
  justify-content: center;
  margin-top: 54px;
}

/* White, scratched frames like the icon rows in the update thumbnails */
.icon-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(6px, 1vw, 12px);
  margin: 34px 0 0;
  padding: 0;
  list-style: none;
}

.icon-row img {
  width: clamp(54px, 6.4vw, 92px);
  aspect-ratio: 1;
  object-fit: contain;
  border: 3px solid var(--frame);
  background: #000;
  box-shadow: 0 0 14px rgba(0, 0, 0, 0.9);
  transition: transform 200ms ease;
}

.icon-row img:hover {
  transform: translateY(-4px);
}

.frame-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 28px;
  border: 2px solid var(--frame);
  background: rgba(0, 0, 0, 0.6);
  box-shadow: 0 0 18px rgba(0, 0, 0, 0.9);
  color: var(--light);
  font: 400 20px/1 var(--bauhaus);
  text-decoration: none;
  text-shadow: 0 0 6px #000;
  cursor: pointer;
  transition: background 200ms ease, color 200ms ease;
}

.frame-button:hover,
.frame-button:focus-visible {
  background: var(--light);
  color: #000;
  text-shadow: none;
}

/* Anniversary: a huge 173 holding the cake, with the header and copy written on the cake and more
   of 173 as you scroll. Sizes follow the stage width so the text stays on the cake. */
.anniversary {
  overflow: hidden;
}

.cake-stage {
  position: relative;
  z-index: 0;
  container-type: inline-size;
  width: min(1150px, 125vw);
  margin: -60px 50% calc(min(1150px, 125vw) * -1.12);
  translate: -50% 0;
}

.cake-173 {
  width: 100%;
  height: auto;
  pointer-events: none;
  --reveal: 0.5;
  -webkit-mask-image: linear-gradient(180deg, #000 calc(var(--reveal) * 100% - 22%), transparent calc(var(--reveal) * 100%));
  mask-image: linear-gradient(180deg, #000 calc(var(--reveal) * 100% - 22%), transparent calc(var(--reveal) * 100%));
}

.cake-text {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 76cqw;
  display: grid;
  justify-items: center;
  width: min(100vw - 40px, 86cqw);
  translate: -50% 0;
  text-align: center;
}

.cake-text .update-head {
  gap: 1cqw;
}

.cake-text .sub {
  font-size: clamp(14px, 2.6cqw, 32px);
}

.cake-text .version {
  white-space: nowrap;
  font-size: clamp(28px, min(12cqw, 10.5vw), 140px);
}

.cake-text .update-date {
  color: var(--light);
  font-size: clamp(14px, 1.9cqw, 22px);
  text-shadow: 0 0 3px #000, 0 0 10px #000, 0 0 18px #000;
}

.cake-copy {
  max-width: 80cqw;
  margin: 3.4cqw 0 0;
  color: var(--light);
  font-size: clamp(16px, 2.2cqw, 25px);
  font-weight: 500;
  line-height: 1.55;
  text-shadow: 0 0 3px #000, 0 0 10px #000, 0 0 22px rgba(0, 0, 0, 0.8);
}

.cake-text .frame-button {
  margin-top: 21cqw;
}

/* The cake day sign (with the duck hiding behind it) and the cake in its inventory slot sit on 173,
   under the cake */
.party-props {
  display: flex;
  align-items: flex-start;
  gap: 5%;
  width: 52cqw;
  margin-top: 9cqw;
}

.cake-copy + .party-props {
  margin-top: 32cqw;
}

.party-sign-wrap {
  position: relative;
  width: 58%;
}

.party-duck {
  position: absolute;
  left: 28%;
  top: 4%;
  width: 62%;
  pointer-events: none;
  transition: transform 450ms cubic-bezier(0.3, 1.5, 0.5, 1);
}

.party-sign,
.party-cake {
  display: block;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.party-sign {
  position: relative;
  width: 100%;
  transform-origin: 0 0;
  transition: transform 700ms cubic-bezier(0.3, 1.5, 0.5, 1);
}

.party-sign img {
  width: 100%;
  border: 4px solid var(--frame);
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.9);
}

.party-sign-wrap.is-open .party-sign {
  transform: rotate(18deg);
}

.party-sign-wrap.is-open .party-duck {
  transform: translate(12%, -42%) rotate(8deg);
  transition-delay: 150ms;
}

.party-cake {
  position: relative;
  width: 34%;
  margin-top: 8%;
}

.inv-slot {
  width: 100%;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.9);
}

.inv-cake {
  position: absolute;
  inset: 0;
  width: 100%;
  transition: transform 260ms cubic-bezier(0.3, 1.6, 0.5, 1);
}

.party-cake.is-out .inv-cake {
  transform: translateY(-38%) scale(1.35) rotate(-6deg);
}

.party-sign:hover,
.party-cake:hover {
  filter: brightness(1.12);
}

/* Streamers hang across the top of the window near the anniversary, and drop with the nav when it shows */
.streamers {
  position: fixed;
  left: 0;
  right: 0;
  top: -6px;
  z-index: 900;
  height: clamp(70px, 9vw, 170px);
  background: url("media/party/streamers.webp") repeat-x 50% 0 / auto 100%;
  filter: saturate(0.55);
  opacity: 0;
  pointer-events: none;
  transition: transform 380ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.streamers.with-nav {
  transform: translateY(70px);
}

.confetti {
  position: fixed;
  inset: 0;
  z-index: 1600;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* The v1.3.12.1 icons lift on hover and open their texture comparison */
.update-icon-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(6px, 1.2vw, 16px);
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.icon-button {
  display: block;
  width: clamp(54px, 9vw, 132px);
  padding: 0;
  border: 0;
  background: none;
  transition: transform 220ms cubic-bezier(0.2, 0.7, 0.2, 1), filter 220ms ease;
}

button.icon-button {
  cursor: pointer;
}

.icon-button img {
  width: 100%;
  filter: drop-shadow(0 0 12px rgba(0, 0, 0, 0.9));
}

button.icon-button:hover,
button.icon-button:focus-visible {
  transform: translateY(-10px);
  filter: brightness(1.15);
}

.trailer-frame {
  margin: 40px auto 0;
  max-width: 1100px;
  border: 3px solid var(--frame);
  background: #000;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.95);
}

.trailer-frame video {
  width: 100%;
  height: auto;
}


/* In-depth update pages */
.page-head {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 72svh;
  padding: 130px 20px 60px;
  text-align: center;
}

.back-link {
  position: absolute;
  left: max(20px, calc(50% - 590px));
  top: 110px;
  color: var(--text);
  font: 400 18px/1 var(--bauhaus);
  text-decoration: none;
  text-shadow: 0 0 8px #000;
}

.back-link:hover {
  color: var(--light);
}

.rows {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(90px, 12vw, 160px);
  width: min(calc(100% - 40px), 1180px);
  margin: 0 auto;
  padding-bottom: 140px;
}

.row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(30px, 5vw, 70px);
  align-items: center;
}

.row:nth-child(even) .row-media {
  order: 2;
}

.row.is-wide {
  grid-template-columns: 1fr;
  justify-items: center;
  text-align: center;
}

.row-copy {
  text-shadow: 0 0 12px #000, 0 0 3px #000;
}

.row h3 {
  margin-bottom: 18px;
  font-size: clamp(30px, 3.4vw, 48px);
}

.row-copy p {
  margin: 0 0 16px;
}

.row-copy ul {
  margin: 0;
  padding-left: 1.1em;
}

.row-copy li {
  margin-bottom: 6px;
}

.row-copy code {
  color: var(--light);
  font-size: 0.92em;
}

.row-media {
  margin: 0;
}

.shot {
  border: 3px solid var(--frame);
  background: #000;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.95);
}

.shot img,
.shot video {
  width: 100%;
  height: auto;
}

.youtube {
  position: relative;
  aspect-ratio: 16 / 9;
}

.youtube button,
.youtube iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: #000;
  cursor: pointer;
}

.youtube button img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.8;
  transition: opacity 200ms ease;
}

.youtube button:hover img {
  opacity: 1;
}

.youtube-play {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  padding: 14px 26px;
  border: 2px solid var(--frame);
  background: rgba(0, 0, 0, 0.7);
  color: var(--light);
  font: 400 22px/1 var(--bauhaus);
}

.page-head.anniversary {
  display: block;
  min-height: 0;
  padding-bottom: 20px;
  overflow: hidden;
  isolation: isolate;
}

.row-media figcaption {
  margin-top: 10px;
  color: var(--dim);
  font-size: 14px;
  text-align: center;
  text-shadow: 0 0 6px #000;
}

.shot-pair {
  display: grid;
  gap: 16px;
}

.notes {
  columns: 2 320px;
  column-gap: 50px;
  width: 100%;
  max-width: 1000px;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

.notes li {
  break-inside: avoid;
  margin-bottom: 10px;
  padding-left: 18px;
  position: relative;
}

.notes li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 7px;
  height: 7px;
  background: var(--frame);
}

.patch {
  width: 100%;
  max-width: 1000px;
  text-align: left;
}

.patch + .patch {
  margin-top: 70px;
}

.patch-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 20px;
  margin-bottom: 22px;
}

.patch-head h3 {
  margin: 0;
}

.patch-head .update-date {
  margin: 0;
}

.source-note {
  width: min(calc(100% - 40px), 1180px);
  margin: -80px auto 120px;
  color: var(--dim);
  font-size: 14px;
  text-align: center;
}

.source-note a {
  color: var(--text);
}


/* Texture comparisons, laid out like the GFX showcase video */
.files-panel {
  margin-top: 46px;
}

.files-tools {
  display: grid;
  justify-items: center;
  gap: 12px;
  margin-bottom: 40px;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.chips button {
  min-height: 38px;
  padding: 0 16px;
  border: 2px solid rgba(236, 236, 236, 0.35);
  background: rgba(0, 0, 0, 0.6);
  color: var(--text);
  font: 400 16px/1 var(--bauhaus);
  cursor: pointer;
}

.chips button small {
  margin-left: 6px;
  color: var(--dim);
  font-size: 13px;
}

.chips button[aria-pressed="true"] {
  border-color: var(--frame);
  background: var(--light);
  color: #000;
}

.chips button[aria-pressed="true"] small {
  color: #444;
}

.tex-grid,
.showcase {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 520px), 1fr));
  gap: 54px 40px;
}

.tex-grid:not([data-mode="side"]) {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}

.showcase {
  margin-top: 60px;
}

.cmp-card {
  display: grid;
  justify-items: center;
  gap: 14px;
}

.cmp-title {
  max-width: 100%;
  overflow: hidden;
  font-size: clamp(24px, 2.4vw, 34px);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cmp {
  --split: 50%;
  --x: 50%;
  --y: 50%;
  --lens: 0px;
  position: relative;
  display: grid;
  width: 100%;
  aspect-ratio: 1;
  user-select: none;
  touch-action: pan-y;
}

.cmp-pane {
  position: relative;
  grid-area: 1 / 1;
  overflow: hidden;
  background: #0b0b0b url("media/layers/grunge-2.webp") center / 300% auto;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 0 24px rgba(0, 0, 0, 0.9);
}

.cmp-pane::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.82);
}

.cmp-pane img {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.cmp-labels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  text-align: center;
}

.cmp-label {
  display: grid;
  justify-items: center;
  gap: 4px;
  margin: 0;
}

.cmp-label .g {
  font-size: clamp(18px, 2vw, 28px);
  --rim: 0.2em;
  --soft: 0.06em;
}

.cmp-label small {
  color: var(--dim);
  font: 400 14px/1 var(--bauhaus);
  text-shadow: 0 0 6px #000;
}

.cmp-range {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
}

.cmp-open {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 4;
  width: 36px;
  height: 36px;
  border: 2px solid var(--frame);
  background: rgba(0, 0, 0, 0.7);
  color: var(--light);
  cursor: zoom-in;
  opacity: 0;
  transition: opacity 160ms ease;
}

.cmp-card:hover .cmp-open,
.cmp-open:focus-visible {
  opacity: 1;
}

[data-mode="side"] .cmp {
  aspect-ratio: 2 / 1;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

[data-mode="side"] .cmp-before { grid-area: 1 / 1; }
[data-mode="side"] .cmp-after { grid-area: 1 / 2; }

[data-mode="slider"] .cmp-before {
  z-index: 1;
  clip-path: inset(0 calc(100% - var(--split)) 0 0);
}

[data-mode="slider"] .cmp::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--split);
  z-index: 2;
  width: 3px;
  translate: -1.5px 0;
  background: var(--light);
  box-shadow: 0 0 10px #000;
  pointer-events: none;
}

[data-mode="flicker"] .cmp {
  cursor: pointer;
}

[data-mode="flicker"] .cmp-before {
  z-index: 1;
  visibility: hidden;
}

[data-mode="flicker"] .cmp.is-holding .cmp-before {
  visibility: visible;
}

[data-mode="lens"] .cmp {
  cursor: crosshair;
}

[data-mode="lens"] .cmp-before {
  z-index: 1;
  clip-path: circle(var(--lens) at var(--x) var(--y));
}

[data-mode="lens"] .cmp::after {
  content: "";
  position: absolute;
  left: var(--x);
  top: var(--y);
  z-index: 2;
  width: calc(var(--lens) * 2);
  aspect-ratio: 1;
  translate: -50% -50%;
  border: 2px solid var(--light);
  border-radius: 50%;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.9);
  opacity: 0;
  pointer-events: none;
}

[data-mode="lens"] .cmp:hover,
[data-mode="lens"] .cmp.is-holding {
  --lens: 22%;
}

[data-mode="lens"] .cmp:hover::after,
[data-mode="lens"] .cmp.is-holding::after {
  opacity: 1;
}

[data-mode="side"] .cmp-range,
[data-mode="flicker"] .cmp-range,
[data-mode="lens"] .cmp-range {
  display: none;
}

.cmp-hint {
  display: none;
  margin: 0;
  color: var(--dim);
  font-size: 14px;
  text-shadow: 0 0 6px #000;
}

[data-mode="slider"] .cmp-hint,
[data-mode="flicker"] .cmp-hint,
[data-mode="lens"] .cmp-hint {
  display: block;
}

.cmp-link {
  color: var(--dim);
  font-size: 14px;
  text-decoration: none;
}

.cmp-link:hover {
  color: var(--light);
}

.more {
  display: flex;
  margin: 50px auto 0;
}

/* Large viewer */
.viewer {
  width: min(96vw, 1400px);
  max-height: 96vh;
  padding: 50px 24px 22px;
  border: 0;
  background: #050505;
  color: var(--text);
  box-shadow: 0 0 0 2px rgba(236, 236, 236, 0.25);
}

.viewer::backdrop {
  background: rgba(0, 0, 0, 0.88);
}

.viewer-stage .cmp-card {
  gap: 14px;
}

.viewer-stage .cmp-link {
  display: none;
}

.viewer-stage .cmp {
  max-width: min(100%, calc((96vh - 360px) * var(--ratio, 2)));
  margin: 0 auto;
}

.viewer-stage[data-mode="side"] .cmp {
  --ratio: 2;
}

.viewer-stage:not([data-mode="side"]) .cmp {
  --ratio: 1;
}

.viewer-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
}

.viewer-close,
.viewer-nav {
  width: 44px;
  height: 44px;
  border: 2px solid var(--frame);
  background: rgba(0, 0, 0, 0.7);
  color: var(--light);
  font-size: 18px;
  cursor: pointer;
}

.viewer-close {
  position: absolute;
  top: 12px;
  right: 12px;
}

.viewer-close:hover,
.viewer-nav:hover {
  background: var(--light);
  color: #000;
}

.viewer-link {
  color: var(--light);
  font: 400 16px/1 var(--bauhaus);
  text-decoration: none;
}


/* Ending */
.ending {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  padding: 100px 20px 90px;
}

.ending-link {
  display: grid;
  justify-items: center;
  gap: 18px;
  text-decoration: none;
  transition: transform 200ms ease;
}

.ending-link:hover,
.ending-link:focus-visible {
  transform: scale(1.03);
}

.ending-text {
  font-size: clamp(38px, 6.4vw, 96px);
  text-transform: uppercase;
  --rim: 0.15em;
}

.ending-link img {
  width: min(380px, 70vw);
  height: auto;
}

.legal {
  position: absolute;
  left: 50%;
  bottom: 22px;
  width: min(calc(100% - 40px), 760px);
  margin: 0;
  translate: -50% 0;
  color: var(--dim);
  font-size: 13px;
  line-height: 1.6;
  text-align: center;
}

.legal a {
  color: var(--text);
}


/* Reveal on scroll */
.js .rv {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1000ms ease, transform 1000ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.rv.in {
  opacity: 1;
  transform: none;
}


/* Responsive */
@media (max-width: 1000px) {
  .update-features {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .row {
    grid-template-columns: 1fr;
  }

  .row:nth-child(even) .row-media {
    order: 0;
  }
}

@media (max-width: 640px) {
  body {
    font-size: 17px;
  }

  .update-features,
  .update-features.is-two {
    grid-template-columns: 1fr;
  }

  [data-mode="side"] .cmp {
    gap: 8px;
  }

  .update-copy p {
    font-size: 17px;
  }

  .cake-copy {
    font-size: 14px;
  }

  .back-link {
    top: 90px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .js .rv,
  .js body[data-intro] .hero-content > *,
  .js body[data-intro] .logo-still,
  .js body[data-intro] .logo-text {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .logo-anim,
  .sparks {
    display: none;
  }
}