* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: #0b0b0d;
  color: #eee;
  font-family: -apple-system, "Segoe UI", sans-serif;
  overflow-x: hidden;
}

#progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, #e74c3c, #7ea8be);
  transform: scaleX(0);
  transform-origin: left;
  z-index: 100;
}

.intro {
  height: 60vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 20px;
}

.intro h1 {
  font-size: clamp(1.7rem, 8vw, 3rem);
  margin: 0 0 0.5rem;
  letter-spacing: 0.05em;
}

.intro p {
  opacity: 0.5;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.8rem;
}

#reader {
  max-width: 652px;
  margin: 0 auto;
  padding: 0 16px 40vh;
}

.panel {
  position: relative;
  margin: 0 auto 12vh;
  overflow: hidden;
  border-radius: 4px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}

.panel img {
  display: block;
  width: 100%;
  height: auto;
}

/* hero panels get more breathing room + a heavier shadow to read as "special" */
.panel.hero {
  margin: 0 auto 18vh;
  box-shadow: 0 30px 90px rgba(231, 76, 60, 0.25);
}

.panel.hero[data-hero="emotional"] {
  box-shadow: 0 30px 90px rgba(126, 168, 190, 0.25);
}

.flash {
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: screen;
}

.vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 45%, transparent 30%, rgba(0,0,0,0.6) 100%);
  opacity: 0;
  pointer-events: none;
}

.parallax {
  position: relative;
  height: 70vh;
}

.parallax .layer {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 130%;
}

.parallax .fg {
  z-index: 2;
}

.parallax .bg {
  z-index: 1;
}

/* atmospheric overlays: bold, comic-native effects layered on top of flat art. */
/* First attempt (thin 1px wind lines, 5px dust motes) was mechanically correct but */
/* unnoticeable in practice — this version is sized and styled to actually be seen. */

.overlay-speedlines,
.overlay-impact {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

/* radiating motion-blur streaks, comic-style "whoosh" lines for a fast directional action */
.speed-line {
  position: absolute;
  left: -15%;
  width: 60%;
  height: 7px;
  border-radius: 4px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.95) 40%, rgba(255,255,255,0.95) 60%, transparent);
  mix-blend-mode: screen;
  filter: blur(0.5px);
}
.speed-line:nth-child(1) { top: 12%; transform: rotate(-10deg) scaleX(0.75); }
.speed-line:nth-child(2) { top: 26%; transform: rotate(-6deg)  scaleX(1.15); }
.speed-line:nth-child(3) { top: 42%; transform: rotate(-2deg)  scaleX(1.4); }
.speed-line:nth-child(4) { top: 58%; transform: rotate(3deg)   scaleX(1.1); }
.speed-line:nth-child(5) { top: 74%; transform: rotate(7deg)   scaleX(0.9); }
.speed-line:nth-child(6) { top: 88%; transform: rotate(11deg)  scaleX(0.65); }

/* classic comic "impact star" — hard wedges bursting outward from the strike point */
.impact-wedge {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 42%;
  margin-left: -3px;
  background: linear-gradient(180deg, #fff 0%, rgba(255,255,255,0.6) 40%, transparent 80%);
  mix-blend-mode: screen;
  transform-origin: top center;
}
.impact-wedge:nth-child(1) { transform: rotate(0deg); }
.impact-wedge:nth-child(2) { transform: rotate(45deg); }
.impact-wedge:nth-child(3) { transform: rotate(90deg); }
.impact-wedge:nth-child(4) { transform: rotate(135deg); }
.impact-wedge:nth-child(5) { transform: rotate(180deg); }
.impact-wedge:nth-child(6) { transform: rotate(225deg); }
.impact-wedge:nth-child(7) { transform: rotate(270deg); }
.impact-wedge:nth-child(8) { transform: rotate(315deg); }

.end-card {
  height: 40vh;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
}

.end-card h2 {
  opacity: 0.4;
  font-weight: 400;
  letter-spacing: 0.05em;
}