:root {
  --ink: #111;
  --paper: #fdf6e3;
  --red: #d7263d;
  --red-deep: #8f0f1f;
  --yellow: #ffd23f;
  --cyan: #3bceac;
  --blue: #2e86de;
  --gutter: 12px;
  --border: 5px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }
html { overflow-x: clip; }

body {
  min-height: 100svh;
  background: var(--paper);
  color: var(--ink);
  font-family: "Comic Neue", "Comic Sans MS", cursive;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
}

/* ---------- Background comic page ---------- */
.page {
  position: fixed;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: var(--gutter);
  padding: var(--gutter);
  background: #fff;
  z-index: 0;
}

.panel {
  position: relative;
  border: var(--border) solid var(--ink);
  overflow: hidden;
  display: grid;
  place-items: center;
  animation: drift 14s ease-in-out infinite alternate;
}
.panel::after {               /* dim panels so the hero wins */
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, .28);
}

/* Fills: halftone, speed lines, ben-day stripes */


.p1 { grid-column: 1 / 3; grid-row: 1; transform: skew(-2deg);
      background: radial-gradient(circle, #e0a800 26%, transparent 28%) 0 0 / 16px 16px, var(--yellow); }
.p2 { grid-column: 3; grid-row: 1 / 3; transform: skew(1.5deg);
      background: repeating-conic-gradient(from 0deg at 50% 55%, var(--blue) 0 6deg, #8fc6ff 6deg 12deg); }
.p3 { grid-column: 4; grid-row: 1; transform: skew(2deg);
      background: radial-gradient(circle, var(--red-deep) 28%, transparent 30%) 0 0 / 14px 14px, var(--red); }
.p4 { grid-column: 1; grid-row: 2 / 4; transform: skew(1deg);
      background: repeating-linear-gradient(45deg, var(--cyan) 0 14px, #9ff0dc 14px 28px); }
.p5 { grid-column: 2; grid-row: 2; transform: skew(-1.5deg);
      background: repeating-conic-gradient(from 0deg at 50% 50%, var(--red) 0 7deg, var(--yellow) 7deg 14deg); }
.p6 { grid-column: 4; grid-row: 2; transform: skew(-2deg);
      background: radial-gradient(circle, #1b5fa8 30%, transparent 32%) 0 0 / 12px 12px, var(--blue); }
.p7 { grid-column: 2 / 4; grid-row: 3; transform: skew(1.5deg);
      background: radial-gradient(circle, #c9c1ad 30%, transparent 32%) 0 0 / 10px 10px, var(--paper); }
.p8 { grid-column: 4; grid-row: 3; transform: skew(-1deg);
      background: repeating-conic-gradient(from 0deg at 40% 60%, var(--yellow) 0 8deg, #fff3b0 8deg 16deg); }

.p2, .p5 { animation-delay: -4s; }
.p3, .p7 { animation-delay: -9s; }

/* Sound effects */
.sfx {
  position: relative;
  z-index: 1;
  font-family: "Bangers", Impact, sans-serif;
  font-size: clamp(1.6rem, 4.2vw, 4rem);
  letter-spacing: .04em;
  color: var(--yellow);
  -webkit-text-stroke: 2px var(--ink);
  text-shadow: 4px 4px 0 var(--ink);
  transform: rotate(-8deg);
}
.p1 .sfx, .p8 .sfx { color: var(--red); }
.p7 .sfx { color: var(--blue); transform: rotate(5deg); }
.sfx.small { font-size: clamp(1.1rem, 2.6vw, 2.4rem); line-height: 1; text-align: center; }
.sfx.burst {
  padding: 1.1em 1.4em;
  background: #fff;
  clip-path: polygon(50% 0%, 61% 22%, 85% 8%, 78% 33%, 100% 38%, 80% 54%, 96% 76%, 70% 72%, 66% 100%, 50% 80%, 34% 100%, 30% 72%, 4% 76%, 20% 54%, 0% 38%, 22% 33%, 15% 8%, 39% 22%);
  -webkit-text-stroke: 1.5px var(--ink);
  text-shadow: 3px 3px 0 var(--ink);
}

/* ---------- Caption box ---------- */
.caption {
  position: relative;
  z-index: 2;
  align-self: flex-start;
  margin: clamp(16px, 3vw, 32px);
  padding: .4em .9em;
  background: var(--yellow);
  border: 4px solid var(--ink);
  box-shadow: 6px 6px 0 var(--ink);
  transform: rotate(-2deg);
}
.caption h1 {
  font-family: "Bangers", Impact, sans-serif;
  font-weight: 400;
  font-size: clamp(1.6rem, 4vw, 3rem);
  letter-spacing: .05em;
  text-transform: uppercase;
  line-height: 1;
}

/* ---------- Hero ---------- */
.stage {
  position: relative;
  z-index: 2;
  flex: 1;
  display: grid;
  place-items: end center;
  padding: 0 16px;
}

.hero {
  position: relative;
  height: clamp(380px, 76svh, 900px);
  aspect-ratio: 608 / 1100;
  max-width: 100%;
}

.dp {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom center;
  filter: drop-shadow(8px 8px 0 var(--ink)) drop-shadow(-2px -2px 0 var(--ink));
}

/* Thought bubble — top right of the head, trail dots lead down-left to it */
.thought {
  position: absolute;
  z-index: 3;
  left: 74%;
  top: -20%;
  width: clamp(200px, 26vw, 360px);
  aspect-ratio: 400 / 260;
  display: grid;
  place-items: center;
}
/* trail dots pop first (nearest the head), then the cloud + words */
.cloud, .thought p {
  transform-origin: 10% 100%;
  animation: pop .7s cubic-bezier(.2, 1.6, .4, 1) 1.1s both;
}
.cloud {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(6px 6px 0 var(--ink));
}
.cloud path {
  fill: #fff;
  stroke: var(--ink);
  stroke-width: 7;
  stroke-linejoin: round;
}
.thought p {
  position: relative;
  font-family: "Bangers", Impact, sans-serif;
  font-size: clamp(2.2rem, 4.6vw, 4.4rem);
  line-height: .9;
  text-align: center;
  letter-spacing: .04em;
  color: var(--red);
  -webkit-text-stroke: 2px var(--ink);
  text-shadow: 3px 3px 0 var(--ink);
  rotate: -4deg;
}

.trail {
  position: absolute;
  background: #fff;
  border: 5px solid var(--ink);
  border-radius: 50%;
  box-shadow: 4px 4px 0 var(--ink);
  animation: pop .35s cubic-bezier(.2, 1.6, .4, 1) both;
}
.t1 { width: 12%; aspect-ratio: 1; left: 2%;   top: 82%;  animation-delay: .9s; }
.t2 { width: 8%;  aspect-ratio: 1; left: -9%;  top: 98%;  animation-delay: .7s; }
.t3 { width: 5%;  aspect-ratio: 1; left: -17%; top: 108%; animation-delay: .5s; }

/* ---------- Footer ---------- */
.footer {
  position: relative;
  z-index: 2;
  align-self: center;
  margin: 0 16px 14px;
  padding: .25em .8em;
  background: #fff;
  border: 3px solid var(--ink);
  font-size: .9rem;
  text-transform: uppercase;
  letter-spacing: .08em;
}

/* ---------- Motion ---------- */
@keyframes pop {
  0%   { transform: scale(0) rotate(-10deg); opacity: 0; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
@keyframes drift {
  from { translate: 0 0; }
  to   { translate: 4px -6px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; }
}

/* ---------- Small screens ---------- */
@media (max-width: 700px) {
  :root { --gutter: 8px; --border: 4px; }
  .page {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(4, 1fr);
  }
  .p1 { grid-column: 1 / 3; grid-row: 1; }
  .p2 { grid-column: 1; grid-row: 2; }
  .p3 { grid-column: 2; grid-row: 2; }
  .p4 { grid-column: 1; grid-row: 3; }
  .p5 { grid-column: 2; grid-row: 3; }
  .p6 { display: none; }
  .p7 { grid-column: 1; grid-row: 4; }
  .p8 { grid-column: 2; grid-row: 4; }

  .caption { align-self: center; }
  .hero { height: clamp(320px, 58svh, 640px); margin-top: 18vh; }
  .thought {
    left: 50%;
    top: auto;
    bottom: 96%;
    width: min(72vw, 280px);
    translate: -42% 0;
  }
  .t1 { left: 36%; top: 86%; }
  .t2 { left: 33%; top: 102%; }
  .t3 { left: 31%; top: 114%; }
}