:root {
  --red: #fa3719;
  --yellow: #ffd126;
  --cream: #eadcbc;
  --black: #15110e;
  --brown: #4b2d1b;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--black);
  color: var(--cream);
  font-family:
    Arial Black,
    Impact,
    sans-serif;
  overflow-x: hidden;
}
.mute-toggle {
  position: relative;
  z-index: 1;
  padding: 10px 13px;
  border: 3px solid var(--cream);
  color: var(--cream);
  background: var(--black);
  box-shadow: 4px 4px 0 var(--red);
  font: 900 12px monospace;
  cursor: pointer;
}
@media (max-width: 720px) {
  .mute-toggle { padding: 7px 8px; font-size: 10px; }
}
.mute-toggle:hover,
.mute-toggle:focus-visible { color: var(--black); background: var(--yellow); }
.not-advice {
  max-width: 620px;
  margin: 25px 0 0;
  padding: 12px 15px;
  border: 4px solid currentColor;
  font: 900 clamp(13px, 1.5vw, 19px)/1.05 Arial, sans-serif;
  transform: rotate(-1deg);
}

/* Cutout-collage pass: artwork is material, never a framed photo. */
.opening .hero {
  z-index: 2;
  left: 34%;
  bottom: -7%;
  width: min(51vw, 760px);
  height: 92%;
  object-fit: contain;
  clip-path: none;
  mix-blend-mode: multiply;
  filter: contrast(1.18) saturate(1.08) drop-shadow(20px 22px 0 #0007);
}
.opening .word { z-index: 5; pointer-events: none; }
.opening .hook { z-index: 7; }
.opening .egg {
  z-index: 4;
  width: min(26vw, 390px);
  min-width: 230px;
  right: -4%;
  top: 17%;
  border-radius: 0;
  mix-blend-mode: normal;
  filter: drop-shadow(-12px 14px 0 #0008);
  animation: hatch-jolt 2.7s steps(2, end) infinite;
}
@keyframes hatch-jolt {
  0%, 78%, 100% { transform: rotate(8deg) translateY(0); }
  82% { transform: rotate(-2deg) translateY(-24px) scale(1.07); }
  88% { transform: rotate(12deg) translateY(5px); }
}

.manifesto .broadcast {
  z-index: 4;
  width: min(58vw, 830px);
  height: 92%;
  right: -3%;
  bottom: -9%;
  object-fit: contain;
  clip-path: none;
  box-shadow: none;
  filter: drop-shadow(-28px 22px 0 #29130d99);
  animation: hatch-breathe 1.45s ease-in-out infinite alternate;
}
@keyframes hatch-breathe {
  to { transform: rotate(2deg) translateY(-18px) scale(1.025); }
}
.impact-copy { z-index: 8; }

.gangster {
  position: absolute;
  z-index: 7;
  width: min(38vw, 560px);
  left: 33%;
  top: 2%;
  transform: rotate(7deg);
  filter: drop-shadow(22px 24px 0 #0009);
  animation: gangster-float 4s ease-in-out infinite alternate;
}
@keyframes gangster-float {
  to { transform: rotate(3deg) translate(-10px, 22px); }
}
.wreckage .relic,
.wreckage .review,
.wreckage .machine {
  border-radius: 47% 53% 42% 58% / 56% 37% 63% 44%;
  box-shadow: none;
  outline: 0;
}

@media (max-width: 720px) {
  .opening .hero {
    left: 11%;
    width: 87vw;
    height: 76%;
    bottom: -2%;
    opacity: .88;
  }
  .opening .egg { width: 42vw; min-width: 0; right: -9%; top: 22%; }
  .manifesto .broadcast { width: 102vw; right: -28%; height: 76%; bottom: -4%; }
  .gangster { width: 78vw; left: 20%; top: 8%; }
}
.noise {
  position: fixed;
  inset: 0;
  z-index: 99;
  pointer-events: none;
  opacity: 0.08;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E");
}
.ticker {
  height: 32px;
  background: var(--yellow);
  color: #111;
  overflow: hidden;
  white-space: nowrap;
  font: 900 13px monospace;
  letter-spacing: 0.08em;
  display: flex;
  align-items: center;
}
.ticker div {
  animation: ticker 15s linear infinite;
}
.ticker div:after {
  content: attr(data-copy);
}
@keyframes ticker {
  to {
    transform: translateX(-50%);
  }
}
nav {
  position: absolute;
  z-index: 30;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 3vw;
}
.brand-controls {
  display: flex;
  align-items: center;
  gap: 16px;
}
.brand {
  width: 62px;
  height: 62px;
  border: 5px solid var(--cream);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--cream);
  text-decoration: none;
  font-size: 26px;
  transform: rotate(-8deg);
}
.brand span {
  font-size: 8px;
}
.navlinks {
  display: flex;
  align-items: center;
  gap: 20px;
}
.navlinks a,
.navlinks button,
.final-links a,
.final-links button {
  appearance: none;
  border: 0;
  background: none;
  color: inherit;
  font: 900 13px monospace;
  text-decoration: none;
  cursor: pointer;
  border-bottom: 5px solid var(--red);
  padding: 8px 2px;
}
.opening {
  height: calc(100vh - 32px);
  min-height: 720px;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(
      circle at 68% 23%,
      #d88228 0 10%,
      #733317 11% 27%,
      transparent 28%
    ),
    repeating-linear-gradient(98deg, #211812 0 3px, #160f0c 3px 8px);
}
.word {
  position: absolute;
  line-height: 0.72;
  letter-spacing: -0.09em;
  text-shadow: 8px 10px 0 #000;
}
.wall-a {
  font-size: clamp(120px, 24vw, 360px);
  top: 13%;
  left: -2%;
  color: var(--cream);
  transform: rotate(-3deg);
}
.wall-b {
  font-size: clamp(130px, 26vw, 390px);
  bottom: 2%;
  right: -2%;
  color: var(--red);
  transform: rotate(4deg);
}
.hero {
  position: absolute;
  z-index: 6;
  width: min(42vw, 610px);
  height: 84%;
  object-fit: contain;
  object-position: center bottom;
  left: 39%;
  bottom: -1%;
  mix-blend-mode: normal;
  filter: contrast(1.2) saturate(1.12) drop-shadow(18px 20px 0 #0008);
  clip-path: polygon(4% 0, 100% 1%, 96% 100%, 0 98%);
}
.egg {
  position: absolute;
  width: 21vw;
  min-width: 230px;
  right: -5%;
  top: 12%;
  transform: rotate(9deg);
  border-radius: 50%;
  mix-blend-mode: screen;
  filter: contrast(1.2);
}
.city {
  position: absolute;
  width: 25vw;
  min-width: 260px;
  left: -7%;
  bottom: -5%;
  transform: rotate(-9deg);
  clip-path: polygon(7% 0, 100% 8%, 90% 100%, 0 92%);
  filter: sepia(0.45) contrast(1.2);
}
.sun {
  position: absolute;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: var(--yellow);
  right: 15%;
  top: 22%;
  mix-blend-mode: screen;
  filter: blur(2px);
  animation: pulse 1.8s ease-in-out infinite;
}
@keyframes pulse {
  50% {
    transform: scale(1.13);
    box-shadow: 0 0 90px var(--red);
  }
}
.hook {
  position: absolute;
  z-index: 5;
  left: 4vw;
  top: 46%;
  font-size: clamp(30px, 5vw, 76px);
  line-height: 0.82;
  transform: rotate(-4deg);
  text-shadow: 5px 6px #000;
}
.hook strong {
  color: var(--yellow);
}
.smash {
  position: absolute;
  z-index: 8;
  right: 4vw;
  bottom: 5vh;
  background: var(--yellow);
  border: 0;
  padding: 26px 36px;
  font: 900 24px monospace;
  transform: rotate(3deg);
  box-shadow: 10px 10px 0 var(--red);
  cursor: pointer;
}
.hammer {
  position: absolute;
  z-index: 12;
  width: 250px;
  height: 90px;
  pointer-events: none;
  filter: drop-shadow(8px 9px 0 #0008);
}
.hammer i {
  position: absolute;
  width: 180px;
  height: 22px;
  left: 0;
  top: 34px;
  background: linear-gradient(#905428, #422613);
  border: 3px solid #1c1009;
}
.hammer b {
  position: absolute;
  width: 78px;
  height: 72px;
  right: 0;
  top: 8px;
  background: linear-gradient(100deg, #444, #111 55%, #666);
  clip-path: polygon(8% 0, 100% 12%, 92% 88%, 0 100%);
}
.h1 {
  top: 14%;
  left: 55%;
  transform: rotate(-18deg);
  animation: fly1 7s linear infinite;
}
.h2 {
  top: 71%;
  left: 13%;
  transform: scale(0.55) rotate(25deg);
  animation: fly2 5s linear infinite;
}
.h3 {
  top: 36%;
  right: -12%;
  transform: scale(1.4) rotate(190deg);
  animation: fly3 9s linear infinite;
}
@keyframes fly1 {
  50% {
    transform: translate(-18vw, 19vh) rotate(45deg);
  }
}
@keyframes fly2 {
  50% {
    transform: translate(50vw, -40vh) scale(0.85) rotate(520deg);
  }
}
@keyframes fly3 {
  50% {
    transform: translate(-115vw, 30vh) scale(0.8) rotate(-20deg);
  }
}
.manifesto {
  height: 110vh;
  min-height: 820px;
  position: relative;
  overflow: hidden;
  background: var(--red);
  color: var(--black);
  border-top: 18px solid var(--yellow);
  border-bottom: 18px solid var(--yellow);
}
.giant-type {
  position: absolute;
  z-index: 3;
  left: 2vw;
  top: 5%;
  font-size: clamp(130px, 28vw, 430px);
  line-height: 0.62;
  letter-spacing: -0.1em;
  color: var(--cream);
  mix-blend-mode: screen;
  transform: rotate(-5deg);
}
.broadcast {
  position: absolute;
  width: 64vw;
  height: 78%;
  object-fit: cover;
  right: -9%;
  bottom: -5%;
  transform: rotate(6deg);
  clip-path: polygon(8% 0, 100% 4%, 92% 100%, 0 89%);
  filter: saturate(1.4) contrast(1.15);
  box-shadow: -25px -25px 0 #111;
}
.note {
  position: absolute;
  z-index: 7;
  background: var(--yellow);
  padding: 15px;
  color: #111;
  font: 900 clamp(18px, 2vw, 34px)/0.9 monospace;
}
.n1 {
  left: 7%;
  bottom: 20%;
  transform: rotate(8deg);
}
.n2 {
  right: 3%;
  top: 8%;
  transform: rotate(-9deg);
}
.impact-copy {
  position: absolute;
  z-index: 8;
  left: 4%;
  bottom: 3%;
  font-size: clamp(42px, 8vw, 120px);
  line-height: 0.72;
  letter-spacing: -0.07em;
  transform: rotate(-4deg);
  text-shadow: 8px 8px 0 var(--yellow);
}
.impact-copy strong { color: var(--cream); }
.h6 {
  left: 31%;
  bottom: 11%;
  transform: scale(1.7) rotate(-35deg);
  animation: fly2 4.5s linear infinite;
}
.wreckage {
  height: 150vh;
  min-height: 1080px;
  position: relative;
  overflow: hidden;
  background: repeating-linear-gradient(
    45deg,
    #1a1512 0 14px,
    #201913 14px 28px
  );
}
.wreckage img {
  position: absolute;
  filter: contrast(1.2) saturate(0.9);
  transition: 0.5s;
}
.wreckage img:hover {
  z-index: 8;
  transform: rotate(0) scale(1.06);
}
.relic {
  width: 45vw;
  left: -8%;
  top: 5%;
  transform: rotate(-10deg);
  clip-path: polygon(10% 0, 100% 7%, 95% 92%, 0 100%);
}
.review {
  width: 42vw;
  right: -5%;
  top: 10%;
  transform: rotate(7deg);
  clip-path: polygon(0 8%, 92% 0, 100% 100%, 7% 91%);
}
.machine {
  width: 40vw;
  left: 30%;
  top: 37%;
  transform: rotate(-2deg);
  border-radius: 50%;
  clip-path: ellipse(43% 49% at 50% 50%);
  mix-blend-mode: screen;
}
.vertical {
  position: absolute;
  left: 2vw;
  top: 43%;
  writing-mode: vertical-rl;
  color: var(--yellow);
  font-size: clamp(30px, 5vw, 70px);
  letter-spacing: 0.06em;
}
.callout {
  position: absolute;
  z-index: 10;
  left: 8%;
  right: 6%;
  bottom: 7%;
  background: var(--cream);
  color: #111;
  padding: clamp(20px, 5vw, 70px);
  transform: rotate(1deg);
  box-shadow: 20px 20px 0 var(--red);
}
.callout span {
  font: 900 15px monospace;
  color: var(--red);
}
.callout h2 {
  font-size: clamp(34px, 6vw, 85px);
  line-height: 0.85;
  margin: 14px 0;
}
.final-links {
  display: flex;
  gap: 25px;
  flex-wrap: wrap;
}
.h4 {
  top: 5%;
  left: 42%;
  transform: rotate(70deg);
  animation: fly2 8s reverse infinite;
}
.h5 {
  top: 50%;
  right: 5%;
  transform: scale(1.8) rotate(-30deg);
  animation: fly1 6s infinite;
}
footer {
  position: relative;
  z-index: 3;
  padding: 22px 3vw;
  background: var(--yellow);
  color: #111;
  display: flex;
  gap: 30px;
  justify-content: space-between;
  font: 900 12px monospace;
}
footer a { color: inherit; }

.wreckage .gangster {
  clip-path: none;
  border-radius: 0;
  mix-blend-mode: normal;
  filter: drop-shadow(22px 24px 0 #0009);
}
#impact {
  position: fixed;
  inset: 0;
  z-index: 98;
  pointer-events: none;
  border: 0 solid var(--yellow);
  overflow: hidden;
}
body.hit #impact {
  animation: impact 0.5s ease-out;
}
.smash-hammer {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 50%;
  width: min(204vw, 2070px);
  max-width: none;
  max-height: 260vh;
  object-fit: contain;
  opacity: 0;
  transform-origin: 78% 78%;
  transform: translate(-50%, 90%) rotate(-18deg) scale(.72);
  filter: drop-shadow(22px 26px 0 #0009);
}
.impact-ring {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  width: 20px;
  height: 20px;
  border: 12px solid var(--yellow);
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%);
}
.smash-debris,
.smash-debris i {
  position: absolute;
  left: 50%;
  top: 50%;
}
.smash-debris {
  z-index: 4;
  width: 1px;
  height: 1px;
  overflow: visible;
}
.smash-debris i {
  z-index: 4;
  display: grid;
  place-items: center;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0);
  animation-delay: var(--delay);
}
.smash-debris .money {
  width: 150px;
  aspect-ratio: 2.35 / 1;
  background: var(--bill-image) center / contain no-repeat;
  filter: drop-shadow(0 6px 7px #0008);
}
.smash-debris .candle {
  width: 24px;
  height: 78px;
  background: #20ef54;
  border: 4px solid #073d17;
  box-shadow: inset 5px 0 #71ff91, inset -5px 0 #0ba637, 0 0 22px #20ef54;
}
.smash-debris .candle::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -24px;
  width: 6px;
  height: 122px;
  background: #20ef54;
  transform: translateX(-50%);
  z-index: -1;
}
body.smashing .smash-hammer {
  animation: center-smash 1.55s cubic-bezier(.16,.75,.2,1) both;
}
body.smashing .impact-ring {
  animation: shock-ring .7s .62s ease-out both;
}
body.smashing .smash-debris i {
  animation: debris-burst 1.55s calc(.58s + var(--delay)) cubic-bezier(.1,.72,.15,1) both;
}
body.smashing main {
  animation: screen-hit .42s .61s steps(2, end);
}
@keyframes center-smash {
  0% { opacity: 0; transform: translate(-50%, 105%) rotate(-20deg) scale(.7); }
  12% { opacity: 1; }
  40% { opacity: 1; transform: translate(-50%, -20%) rotate(-13deg) scale(.9); }
  53% { transform: translate(-50%, -50%) rotate(0) scale(1.05); }
  68% { opacity: 1; transform: translate(-50%, -50%) rotate(0) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -35%) rotate(8deg) scale(.86); }
}
@keyframes shock-ring {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(.2); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(42); }
}
@keyframes debris-burst {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0); }
  8% { opacity: 1; transform: translate(-50%, -50%) scale(var(--scale)); }
  70% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) rotate(var(--r)) scale(var(--scale)); }
}
@keyframes screen-hit {
  33% { transform: translate(8px, -6px); filter: brightness(1.8); }
  66% { transform: translate(-7px, 5px); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ticker div,
  .hammer,
  .egg,
  .broadcast,
  .gangster,
  .sun { animation: none !important; }
}
@keyframes impact {
  20% {
    border-width: 35px;
    background: #fff8;
  }
  100% {
    border-width: 0;
    background: transparent;
  }
}
@media (max-width: 760px) {
  .navlinks {
    gap: 8px;
  }
  .navlinks a,
  .navlinks button {
    font-size: 10px;
  }
  .opening {
    min-height: 760px;
  }
  .hero {
    width: 82vw;
    left: 17%;
    height: 66%;
    bottom: 0;
  }
  .egg {
    width: 38vw;
    top: 18%;
  }
  .city {
    width: 45vw;
    bottom: 3%;
  }
  .hook {
    top: 31%;
  }
  .wall-a {
    top: 11%;
  }
  .wall-b {
    bottom: 16%;
  }
  .manifesto {
    min-height: 900px;
  }
  .broadcast {
    width: 95vw;
    height: 55%;
    bottom: 10%;
  }
  .giant-type {
    top: 9%;
  }
  .impact-copy { bottom: 2%; }
  .n1 {
    bottom: 33%;
  }
  .relic,
  .review {
    width: 70vw;
  }
  .review {
    top: 22%;
  }
  .machine {
    width: 70vw;
    left: 15%;
    top: 43%;
  }
  .wreckage {
    min-height: 1150px;
  }
  .callout {
    bottom: 4%;
  }
  .callout h2 {
    font-size: 38px;
  }
  footer {
    display: block;
  }
  footer span {
    display: block;
    margin-top: 8px;
  }
}