:root {
  --paper: #1e1d1a;
  --print: #272622;
  --ink: #e7e4de;
  --red: #f04a4a;
  --cyan: #29b8b1;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  height: 100dvh;
  min-height: 100vh;
  background: var(--paper);
  color: var(--ink);
  display: grid;
  grid-template-rows: 1fr;
  overflow: hidden;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--ink); color: var(--paper); }

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background-image: repeating-linear-gradient(0deg, rgba(244, 242, 236, 0.1) 0 1px, transparent 1px 3px);
  opacity: .35;
  mix-blend-mode: screen;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background-image: radial-gradient(rgba(244, 242, 236, 0.5) 0 1px, transparent 1.5px);
  background-size: 7px 7px;
  opacity: .1;
  mix-blend-mode: screen;
}

.tear {
  position: fixed;
  left: -20%;
  right: 8%;
  height: 10px;
  z-index: 45;
  pointer-events: none;
  background: var(--ink);
  opacity: 0;
}

body.glitch .t1 { opacity: .26; top: var(--ty1, 30%); transform: translateX(var(--tx1, 60%)); }
body.glitch .t2 { height: 6px; opacity: .16; top: var(--ty2, 62%); transform: translateX(var(--tx2, -40%)); }

.bg {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.word {
  position: absolute;
  top: 46%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: Impact, "Haettenschweiler", "Arial Black", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-size: clamp(46px, 12.5vw, 270px);
  line-height: 0.72;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink);
  user-select: none;
  z-index: 2;
}

.w1 { opacity: 0.08; animation: j1 9s linear infinite; }

.w2 {
  opacity: 0.05;
  transform: translate(-50%, calc(-50% + 2vw)) rotate(-1.2deg);
  animation: j2 14s linear infinite;
}

.w3 {
  color: transparent;
  -webkit-text-stroke: 2.5px var(--ink);
  opacity: 0.1;
  transform: translate(-50%, -50%) rotate(0.5deg);
  filter: blur(0.4px);
  animation: j3 12s linear infinite;
}

.w4 {
  color: var(--red);
  opacity: 0.13;
  transform: translate(calc(-50% - 6px), -50%);
  animation: jr 6s linear infinite;
}

.w5 {
  color: var(--cyan);
  opacity: 0.13;
  transform: translate(calc(-50% + 6px), -50%);
  animation: jr2 7.5s linear infinite;
}

.w6 {
  top: 74%;
  opacity: 0.06;
  transform: translate(-50%, -100%) rotate(180deg);
  animation: j6 11s linear infinite;
}

.w7 {
  opacity: 0.1;
  transform: translate(calc(-50% + 1.4vw), -50%);
  -webkit-mask-image: repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.9) 0 13px, transparent 13px 26px);
  mask-image: repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.9) 0 13px, transparent 13px 26px);
  -webkit-mask-position-y: 0;
  mask-position-y: 0;
  animation: slice 4.5s linear infinite, j7 10s linear infinite;
}

.scat {
  position: absolute;
  font-family: Impact, "Haettenschweiler", "Arial Black", "Helvetica Neue", Arial, sans-serif;
  color: var(--ink);
  user-select: none;
}

.s1 { font-size: clamp(90px, 20vw, 360px); top: 5%; left: -6%; transform: rotate(-12deg); opacity: 0.06; animation: j1 9s linear infinite; }
.s2 { font-size: clamp(42px, 10vw, 160px); bottom: 9%; right: 2%; transform: rotate(8deg); opacity: 0.07; animation: j3 12s linear infinite; }

.shapes {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(44px) desaturate(50%);
  mix-blend-mode: screen;
  will-change: transform;
}

.b1 {
  width: 300vw;
  height: 300vw;
  top: -150vw;
  left: -150vw;
  opacity: .12;
  background: radial-gradient(circle at 35% 40%, rgba(255,56,200,.9), rgba(255,90,60,.55) 42%, rgba(255,90,60,0) 78%);
  animation: drift1 46s ease-in-out infinite alternate;
}

.b2 {
  width: 300vw;
  height: 300vw;
  bottom: -150vw;
  right: -150vw;
  opacity: .1;
  background: radial-gradient(circle at 55% 55%, rgba(84,217,255,.8), rgba(122,47,255,.5) 48%, transparent 78%);
  animation: drift2 54s ease-in-out infinite alternate;
}

.b3 {
  width: 300vw;
  height: 300vw;
  top: -150vw;
  right: -150vw;
  opacity: .1;
  background: radial-gradient(circle at 50% 50%, rgba(255,190,0,.85), rgba(255,56,110,.5) 50%, transparent 78%);
  animation: drift3 38s ease-in-out infinite alternate;
}

.b4 {
  width: 300vw;
  height: 300vw;
  bottom: -150vw;
  left: -150vw;
  opacity: .08;
  background: radial-gradient(circle at 45% 45%, rgba(122,47,255,.8), rgba(84,217,255,.45) 55%, transparent 80%);
  animation: drift4 50s ease-in-out infinite alternate;
}

.ring {
  position: absolute;
  width: 34vw;
  height: 34vw;
  top: 34%;
  right: 18%;
  border-radius: 50%;
  opacity: .1;
  mix-blend-mode: screen;
  filter: desaturate(50%);
  background: conic-gradient(from 90deg, #ff38c8, #ffb000, #54d9ff, #7a2fff, #ff38c8);
  -webkit-mask: radial-gradient(97.5% at 50% 50%, transparent 94%, #000 96%);
  mask: radial-gradient(97.5% at 50% 50%, transparent 94%, #000 96%);
  animation: ring-spin 90s linear infinite;
}

@keyframes drift1 { to { translate: 6vw 3vh; scale: 1.08; rotate: 24deg; } }
@keyframes drift2 { to { translate: -5vw 4vh; scale: 1.05; rotate: -30deg; } }
@keyframes drift3 { to { translate: 4vw -4vh; scale: 1.12; rotate: 40deg; } }
@keyframes drift4 { to { translate: -4vw -3vh; scale: 1.1; rotate: 18deg; } }
@keyframes ring-spin { to { rotate: 360deg; } }

.subliminal {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  filter: blur(1.5px) desaturate(50%);
  animation: subl-drift 70s ease-in-out infinite alternate;
}

@keyframes subl-drift {
  to { translate: 2.5vw 1.5vh; rotate: 0.7deg; scale: 1.03; }
}

.tile {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 70'%3E%3Ctext x='130' y='35' font-family='Impact, Arial, sans-serif' font-size='54' fill='%23e7e4de' text-anchor='middle' dominant-baseline='central' opacity='0.06'%3EFUCKFARTS%3C%2Ftext%3E%3C%2Fsvg%3E");
  background-repeat: repeat;
  background-size: 260px 70px;
  background-position: center;
}

@keyframes j1 { 0%, 86%, 100% { translate: 0 0; } 87% { translate: 5px -3px; } 90% { translate: -6px 2px; } }
@keyframes j2 { 0%, 90%, 100% { translate: 0 0; } 91% { translate: -4px 6px; } 94% { translate: 7px -4px; } }
@keyframes j3 { 0%, 78%, 96%, 100% { translate: 0 0; } 79% { translate: -7px -2px; } 82% { translate: 5px 4px; } 97% { translate: -3px 3px; } }
@keyframes j6 { 0%, 84%, 100% { translate: 0 0; } 85% { translate: 4px 0; } 88% { translate: -5px 0; } }
@keyframes j7 { 0%, 80%, 100% { translate: 0 0; } 81% { translate: -3px 0; } 84% { translate: 5px 0; } }
@keyframes jr { 0%, 82%, 100% { translate: 0 0; } 83% { translate: 6px 0; } 86% { translate: -7px 0; } }
@keyframes jr2 { 0%, 70%, 100% { translate: 0 0; } 71% { translate: -6px 0; } 75% { translate: 5px 0; } }
@keyframes slice { to { -webkit-mask-position-y: -26px; mask-position-y: -26px; } }

main {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(28px, 5vh, 60px) 26px;
}

.stage {
  display: flex;
  align-items: center;
  gap: 26px;
}

.nav-btn {
  position: relative;
  z-index: 3;
  display: grid;
  place-items: center;
  gap: 6px;
  padding: 6px 10px;
  margin: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.nav-btn svg {
  display: block;
  width: 28px;
  height: 28px;
  fill: none;
  stroke: var(--ink);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .25s ease;
}

.nav-btn:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 8px;
  border-radius: 2px;
}

.nav-btn.prev:hover svg,
.nav-btn.prev:focus-visible svg { transform: translateX(-3px); }
.nav-btn.next:hover svg,
.nav-btn.next:focus-visible svg { transform: translateX(3px); }

.nav-btn:active svg { transform: translateX(3px); }
.nav-btn.next:active svg { transform: translateX(-3px); }

.frame {
  position: relative;
  z-index: 3;
  width: min(calc(100vw - 240px), 68vh);
  aspect-ratio: 4 / 3;
  background: var(--print);
  border: 4px solid var(--ink);
  padding: 12px;
  box-shadow: 9px 11px 0 var(--ink);
  transform: rotate(0.3deg);
  cursor: pointer;
  transition: box-shadow 0.1s steps(1);
}

.frame:active {
  transform: rotate(0.3deg) scale(0.992);
  box-shadow: 5px 7px 0 var(--ink);
}

.frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity 0.35s ease;
  will-change: opacity;
}

.chip {
  position: absolute;
  top: -12px;
  left: 20px;
  z-index: 4;
  background: var(--ink);
  color: var(--paper);
  font-size: 12px;
  letter-spacing: 0.06em;
  padding: 6px 10px;
}

.chip::before,
.chip::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.12;
}

.chip::before { color: var(--red); translate: 2.5px -2px; }
.chip::after { color: var(--cyan); translate: -2.5px 2px; }

body.glitch .chip::before { opacity: 0.95; animation: cj 0.4s steps(2) 1; }
body.glitch .chip::after { opacity: 0.95; animation: cj2 0.4s steps(2) 1; }

@keyframes cj { 0%, 100% { translate: 3px -2px; } 50% { translate: -5px 1px; } }
@keyframes cj2 { 0%, 100% { translate: -3px 2px; } 50% { translate: 5px -2px; } }

@keyframes fgl {
  0%, 100% { translate: 0 0; transform: rotate(0.3deg); filter: none; box-shadow: 9px 11px 0 var(--ink); }
  25% { translate: -9px 3px; transform: rotate(0.3deg) skewY(1deg); filter: hue-rotate(-14deg) saturate(1.4); }
  50% { translate: 8px -4px; box-shadow: 4px 4px 0 var(--ink), -8px 0 0 rgba(230, 61, 61, 0.5); }
  75% { translate: -4px 2px; box-shadow: 5px 7px 0 var(--ink), 7px 0 0 rgba(36, 185, 177, 0.5); filter: contrast(1.25) hue-rotate(8deg); }
}

body.glitch .frame { animation: fgl 0.4s steps(2) 1; }

@media (max-width: 640px) {
  .stage { flex-direction: column; gap: 14px; }
  .frame { width: min(92vw, 72vh); box-shadow: 5px 6px 0 var(--ink); }
  .chip { left: 8px; top: -14px; }
}