:root {
  --entry-ink: #050505;
  --entry-paper: #f1f0e8;
  --entry-acid: #d7ff00;
  --entry-ease: cubic-bezier(.22, 1, .36, 1);
  --entry-exit: cubic-bezier(.76, 0, .24, 1);
}

html.intro-active,
html.intro-active body { overflow: hidden; }

.acid-intro { display: none; }

.js .acid-intro {
  position: fixed;
  inset: 0;
  z-index: 10020;
  display: grid;
  min-height: 100svh;
  overflow: hidden;
  color: var(--entry-paper);
  isolation: isolate;
}

.booting body > .acid-intro { visibility: visible !important; }
.acid-intro[hidden] { display: none !important; }

.acid-intro__field,
.acid-intro__canvas,
.acid-intro__cut { position: absolute; inset: 0; }

.acid-intro__field {
  z-index: 0;
  background:
    radial-gradient(ellipse at 50% 48%, rgba(215, 255, 0, .052), transparent 42%),
    linear-gradient(115deg, transparent 36%, rgba(241, 240, 232, .018) 50%, transparent 64%),
    #050505;
  transition: opacity 120ms linear;
}

.acid-intro__cut {
  z-index: 1;
  pointer-events: none;
  background: rgba(215, 255, 0, .44);
  transition: opacity 220ms linear, transform 620ms var(--entry-exit);
}

.acid-intro__cut--vertical {
  inset: 0 auto 0 50%;
  width: 1px;
  transform-origin: top;
  transform: scaleY(.18);
}

.acid-intro__cut--horizontal {
  inset: 50% 0 auto;
  height: 1px;
  transform-origin: left;
  transform: scaleX(.18);
}

.acid-intro.is-forming .acid-intro__cut--vertical { transform: scaleY(1); }
.acid-intro.is-forming .acid-intro__cut--horizontal { transform: scaleX(1); }

.acid-intro__canvas {
  z-index: 2;
  width: 100%;
  height: 100%;
  pointer-events: none;
  image-rendering: auto;
  transition: opacity 260ms cubic-bezier(.22, 1, .36, 1);
  will-change: opacity;
}

.acid-intro__top,
.acid-intro__bottom {
  position: absolute;
  z-index: 5;
  left: clamp(18px, 3.2vw, 52px);
  right: clamp(18px, 3.2vw, 52px);
  display: flex;
  justify-content: space-between;
  gap: 20px;
  color: rgba(241, 240, 232, .6);
  font: 650 .62rem/1.2 var(--font-mono, Bahnschrift, Consolas, monospace);
  letter-spacing: .12em;
  text-transform: uppercase;
  transition: opacity 260ms linear, transform 480ms var(--entry-ease);
}

.acid-intro__top { top: clamp(18px, 3.2vw, 52px); }
.acid-intro__bottom { bottom: clamp(22px, 3.4vw, 56px); }
.acid-intro__bottom span:last-child { color: var(--entry-acid); }

.acid-intro__core {
  position: relative;
  z-index: 4;
  place-self: center;
  width: min(82vw, 590px);
  display: grid;
  grid-template-columns: minmax(92px, .34fr) minmax(220px, .66fr);
  gap: clamp(28px, 5vw, 66px);
  align-items: center;
  transition: opacity 340ms linear, filter 520ms var(--entry-ease), transform 620ms var(--entry-exit);
}

.acid-intro__mark {
  width: 100%;
  max-width: 168px;
  overflow: visible;
  color: var(--entry-paper);
  opacity: .32;
  filter: blur(0);
  transform: scale(1);
  transition: opacity 260ms linear, filter 460ms var(--entry-ease), transform 460ms var(--entry-ease), color 200ms linear;
}

.acid-intro__mark path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: square;
  stroke-linejoin: miter;
  vector-effect: non-scaling-stroke;
}

.acid-intro.is-locked .acid-intro__mark {
  opacity: 1;
  filter: blur(0);
  transform: scale(1);
  color: var(--entry-acid);
}

.acid-intro__readout {
  padding-block: 13px 11px;
  border-block: 1px solid rgba(241, 240, 232, .36);
  display: grid;
  gap: 18px;
  color: rgba(241, 240, 232, .6);
  font: 650 .62rem/1.2 var(--font-mono, Bahnschrift, Consolas, monospace);
  letter-spacing: .12em;
}

.acid-intro__readout strong {
  color: var(--entry-paper);
  font-family: var(--font-display, Bahnschrift, sans-serif);
  font-size: clamp(3.6rem, 7vw, 6.6rem);
  font-weight: 900;
  line-height: .68;
  letter-spacing: -.08em;
}

.acid-intro__progress {
  position: absolute;
  z-index: 6;
  inset: auto 0 0;
  height: 5px;
  background: #2b2b2b;
}

.acid-intro__progress i {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--entry-acid);
  transform: scaleX(.005);
  transform-origin: left;
  transition: transform 80ms cubic-bezier(.16, 1, .3, 1);
}

.acid-intro__skip {
  position: absolute;
  right: clamp(18px, 3.2vw, 52px);
  bottom: clamp(58px, 6vw, 90px);
  z-index: 8;
  min-width: 88px;
  min-height: 44px;
  padding: 0 15px;
  border: 1px solid rgba(241, 240, 232, .46);
  border-radius: 0;
  background: #050505;
  color: var(--entry-paper);
  font: 700 .62rem/1 var(--font-mono, Bahnschrift, Consolas, monospace);
  letter-spacing: .09em;
  cursor: pointer;
  transition: background-color 160ms linear, color 160ms linear, border-color 160ms linear, transform 160ms var(--entry-ease);
}

.acid-intro__skip:hover,
.acid-intro__skip:focus-visible {
  border-color: var(--entry-acid);
  background: var(--entry-acid);
  color: var(--entry-ink);
}

.acid-intro__skip:active { transform: scale(.97); }
.acid-intro.is-releasing .acid-intro__mark { color: var(--entry-paper); }

.acid-intro.is-releasing .acid-intro__core {
  filter: blur(1px);
  transform: scale(.995);
}

.acid-intro.is-leaving .acid-intro__core {
  opacity: 0;
  filter: blur(12px);
  transform: scale(.97);
}

.acid-intro.is-leaving { pointer-events: none; }
.acid-intro.is-leaving:not(.is-dissolving) {
  opacity: 0;
  transition: opacity 420ms var(--entry-ease);
}
.acid-intro.is-dissolving .acid-intro__field { opacity: 0; }

.acid-intro.is-leaving .acid-intro__top { opacity: 0; transform: translateY(-10px); }
.acid-intro.is-leaving .acid-intro__bottom { opacity: 0; transform: translateY(10px); }
.acid-intro.is-leaving .acid-intro__skip { opacity: 0; pointer-events: none; }
.acid-intro.is-leaving .acid-intro__cut { opacity: 0; }

@media (max-width: 640px) {
  .acid-intro__top,
  .acid-intro__bottom { left: 16px; right: 16px; font-size: .5rem; }
  .acid-intro__bottom span:first-child { display: none; }
  .acid-intro__core {
    width: calc(100vw - 48px);
    grid-template-columns: 1fr;
    gap: 32px;
    align-items: center;
  }
  .acid-intro__mark { width: 45vw; justify-self: start; }
  .acid-intro__readout { width: 100%; }
  .acid-intro__readout strong { font-size: clamp(4rem, 24vw, 7rem); }
  .acid-intro__skip { right: 16px; bottom: 54px; }
}

@media (prefers-reduced-motion: reduce) {
  html.intro-active,
  html.intro-active body { overflow: auto; }
  .acid-intro { display: none !important; }
}