:root {
  --cream: #f3ead9;
  --orange: #ff8c42;
  --ink: #10161a;
}

* { box-sizing: border-box; }

html { scroll-behavior: auto; }

body {
  margin: 0;
  background: var(--ink);
  font-family: 'Anton', Impact, sans-serif;
  cursor: crosshair;
  user-select: none;
  -webkit-user-select: none;
  overflow-x: hidden;
}

/* ---------- PINNED STAGE ---------- */
.stage {
  position: fixed;
  inset: 0;
  z-index: 0;
}

.bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.1);
}

.bg-tint {
  position: absolute;
  inset: 0;
  background: rgba(16, 22, 26, 0.5);
  pointer-events: none;
}

.grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.06;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.pit {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.rh {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: auto;
  cursor: grab;
  will-change: transform;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,0.55));
}

.rh:active { cursor: grabbing; }

.rh img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: 10px;
  border: 4px solid var(--cream);
  pointer-events: none;
}

/* ---------- YELLS ---------- */
.yell {
  position: fixed;
  z-index: 40;
  font-size: clamp(1.4rem, 4vw, 2.6rem);
  color: var(--orange);
  text-shadow: 3px 3px 0 var(--ink), -2px -2px 0 var(--ink);
  pointer-events: none;
  white-space: nowrap;
  animation: yell 0.75s ease-out forwards;
}

@keyframes yell {
  0%   { opacity: 0; transform: translate(-50%, 0) scale(0.4) rotate(-8deg); }
  25%  { opacity: 1; transform: translate(-50%, -22px) scale(1.25) rotate(5deg); }
  100% { opacity: 0; transform: translate(-50%, -85px) scale(1) rotate(-3deg); }
}

/* ---------- SCROLL PANELS ---------- */
main {
  position: relative;
  z-index: 10;
  pointer-events: none;   /* clicks fall through to the sprites */
}

.panel {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12vh 6vw;
}

.say {
  pointer-events: auto;
  max-width: 15ch;
  margin: 0;
  text-align: center;
  color: var(--cream);
  font-size: clamp(2rem, 6vw, 5rem);
  line-height: 0.95;
  letter-spacing: 0.01em;
  text-shadow: 5px 5px 0 rgba(0,0,0,0.55);
  transform: rotate(-2deg);
}

.say .big, .say.big {
  font-size: clamp(2.6rem, 9vw, 7rem);
  color: var(--orange);
  margin: 0 0 4vh;
  line-height: 0.9;
}

.panel:nth-child(even) .say { transform: rotate(2deg); }

.wordmark {
  max-width: none;
  font-size: clamp(3rem, 13vw, 10rem);
  line-height: 0.85;
  white-space: nowrap;
}

.wordmark span { color: var(--orange); }

/* the button in a panel */
.smash {
  display: inline-block;
  pointer-events: auto;
  font-size: clamp(1.1rem, 2.6vw, 1.9rem);
  letter-spacing: 0.06em;
  text-decoration: none;
  color: var(--ink);
  background: var(--cream);
  border: 4px solid var(--ink);
  border-radius: 6px;
  padding: 12px 30px;
  box-shadow: 6px 6px 0 var(--ink);
  animation: wob 2.4s ease-in-out infinite;
}

.smash:hover {
  background: var(--orange);
  animation: freakout 0.25s linear infinite;
}

/* ---------- LINKS (required, top right) ---------- */
.links {
  position: fixed;
  top: 18px;
  right: 20px;
  z-index: 30;
  display: flex;
  gap: 14px;
}

.links a {
  font-size: 1.1rem;
  letter-spacing: 0.06em;
  text-decoration: none;
  color: var(--ink);
  background: var(--orange);
  padding: 10px 18px;
  border: 3px solid var(--ink);
  border-radius: 4px;
  box-shadow: 4px 4px 0 var(--ink);
}

.wob { animation: wob 2.2s ease-in-out infinite; }
.links a:nth-child(2) { animation-delay: -1.1s; }

@keyframes wob {
  0%, 100% { transform: rotate(-3deg) translateY(0); }
  50%      { transform: rotate(3deg) translateY(-5px); }
}

.links a:hover {
  animation: freakout 0.25s linear infinite;
  background: var(--cream);
}

@keyframes freakout {
  0%   { transform: rotate(-6deg) scale(1.1); }
  25%  { transform: rotate(7deg) scale(1.15); }
  50%  { transform: rotate(-8deg) scale(1.08); }
  75%  { transform: rotate(5deg) scale(1.16); }
  100% { transform: rotate(-6deg) scale(1.1); }
}

/* ---------- DISCLAIMER (required) ---------- */
.disclaimer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 30;
  background: var(--orange);
  border-top: 4px solid var(--ink);
  overflow: hidden;
  white-space: nowrap;
  padding: 9px 0;
  pointer-events: none;
}

.disclaimer-track {
  display: inline-block;
  animation: slide 26s linear infinite;
  font-size: 1rem;
  color: var(--ink);
}

@keyframes slide {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (max-width: 560px) {
  .links a { font-size: 0.9rem; padding: 8px 13px; }
  .disclaimer-track { font-size: 0.8rem; }
  .say { max-width: 12ch; }
}

@media (prefers-reduced-motion: reduce) {
  .wob, .smash, .links a:hover, .disclaimer-track { animation: none; }
}