@font-face {
  font-family: "Barlow Condensed Skeleton";
  src: url("assets/barlow-condensed-200.woff2") format("woff2");
  font-style: normal;
  font-weight: 200;
  font-display: swap;
}

:root { color-scheme: dark; --impact: 0; --reveal: 0; }
* { box-sizing: border-box; }

html, body {
  width: 100%; min-height: 100%; margin: 0; overflow: hidden;
  overscroll-behavior: none; background: #010202;
}

body {
  min-height: 100vh; min-height: 100svh; min-height: 100dvh;
  -webkit-tap-highlight-color: transparent; user-select: none;
}

.scene {
  position: fixed; inset: 0; width: 100%; height: 100vh; height: 100svh; height: 100dvh;
  isolation: isolate; overflow: hidden; touch-action: none; background: #010202;
}

.void {
  position: absolute; z-index: 0; inset: -8%;
  background:
    radial-gradient(ellipse 19% 72% at 50% 49%, rgba(42, 42, 38, .17), transparent 66%),
    radial-gradient(ellipse 8% 57% at 50% 51%, rgba(116, 108, 94, .035), transparent 78%),
    linear-gradient(100deg, #010202 0%, #030404 35%, #070706 49%, #030404 66%, #010202 100%);
  filter: brightness(calc(.73 + var(--reveal) * .19 + var(--impact) * .025));
}

.void::before {
  content: ""; position: absolute; inset: 0; opacity: .16;
  background:
    repeating-linear-gradient(83deg, transparent 0 38px, rgba(176, 168, 149, .012) 39px, transparent 40px 91px),
    repeating-linear-gradient(98deg, transparent 0 71px, rgba(0, 0, 0, .18) 72px 77px, transparent 78px 141px);
}

canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
#back { z-index: 1; }
#middle { z-index: 2; }
#front { z-index: 4; }

.statement {
  position: absolute; z-index: 2; left: 50%; top: 50%; width: min(84vw, 680px); margin: 0;
  color: #817f78; font-family: "Barlow Condensed Skeleton", "Arial Narrow", sans-serif;
  font-size: clamp(25px, 3.3vw, 43px); font-weight: 200; line-height: .95;
  letter-spacing: .035em; text-align: center; transform: translate(-50%, -50%);
  opacity: calc(.035 + var(--reveal) * .4); filter: blur(calc((1 - var(--reveal)) * 1.2px));
  mix-blend-mode: soft-light;
}

.statement span { display: block; }
.statement span:nth-child(1) { transform: translateX(-.3em) rotate(-.35deg); }
.statement span:nth-child(2) { transform: translateX(.15em) rotate(.12deg); }
.statement span:nth-child(3) { transform: translateX(-.08em) rotate(-.18deg); }

.panel {
  position: absolute; z-index: 3; left: 0; top: 0; right: auto; bottom: auto; display: block;
  max-width: none; pointer-events: none; user-select: none;
  will-change: transform, filter;
  image-rendering: auto; backface-visibility: hidden;
  filter: brightness(1.11) contrast(1.09) drop-shadow(12px 0 20px rgba(0, 0, 0, .72));
}

.panel--left { transform-origin: right center; }
.panel--right { transform-origin: left center; filter: brightness(1.11) contrast(1.09) drop-shadow(-12px 0 20px rgba(0, 0, 0, .72)); }
.panel[data-swapping="true"] { filter: brightness(1.16) contrast(1.11) drop-shadow(0 0 22px rgba(0, 0, 0, .86)); }
.is-ready .statement { opacity: 0; }

.exposure {
  position: absolute; z-index: 5; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 50% 50%, rgba(206, 200, 185, calc(var(--impact) * .025)), transparent 38%);
  mix-blend-mode: screen;
}

.grain {
  position: absolute; z-index: 6; inset: -24%; width: 148%; height: 148%; pointer-events: none;
  opacity: .055; background: url("assets/art/micro-grain.png") repeat; background-size: 256px 256px;
  mix-blend-mode: soft-light; animation: grain-shift .28s steps(2, end) infinite;
}

.vignette {
  position: absolute; z-index: 7; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .28), transparent 18%, transparent 82%, rgba(0, 0, 0, .32)),
    radial-gradient(ellipse at center, transparent 40%, rgba(0, 0, 0, .22) 70%, rgba(0, 0, 0, .78) 100%);
  box-shadow: inset 0 0 min(22vw, 280px) rgba(0, 0, 0, .8);
}

@keyframes grain-shift {
  0% { transform: translate3d(-2%, 1%, 0); }
  25% { transform: translate3d(2%, -2%, 0); }
  50% { transform: translate3d(-1%, 2%, 0); }
  75% { transform: translate3d(1%, 1%, 0); }
  100% { transform: translate3d(-2%, -1%, 0); }
}

@media (max-width: 520px) {
  .statement { width: 88vw; font-size: clamp(25px, 7.5vw, 31px); line-height: .94; }
  .grain { opacity: .047; }
  .vignette { box-shadow: inset 0 0 28vw rgba(0, 0, 0, .86); }
}

@media (orientation: landscape) and (max-height: 560px) {
  .statement { width: 68vw; font-size: clamp(23px, 4.8vw, 38px); }
}

@media (prefers-reduced-motion: reduce) { .grain { animation: none; opacity: .035; } }
.reduced-motion .grain { animation: none; opacity: .035; }
.broken .grain { opacity: .062; animation-duration: .42s; }