/* ============================================================
   MATCHUMNEWS — Neubrutalist Dopamine-Neon News Gallery
   Horizontal-scroll panels, oversized type, shake-error,
   crystalline clip-path containers, raw black borders.
   ------------------------------------------------------------
   Typography stack (per DESIGN.md):
     Headlines: "Anton" (Google Fonts)
     Body:      "Work Sans" (Google Fonts)
     Labels:    "Space Mono" (Google Fonts)
   ============================================================ */

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

:root {
  --neon-pink: #FF0080;
  --neon-cyan: #00FFFF;
  --neon-yellow: #FFFF00;
  --neon-green: #00FF80;
  --raw-black: #000000;
  --raw-white: #FFFFFF;
  --border-thick: 4px solid var(--raw-black);
  --border-thicker: 6px solid var(--raw-black);
  --border-white: 4px solid var(--raw-white);
}

html, body {
  width: 100%;
  height: 100%;
  background: var(--raw-black);
  color: var(--raw-black);
  font-family: 'Work Sans', 'Helvetica Neue', Arial, sans-serif;
  overflow: hidden;
}

body {
  position: relative;
}

/* ============================================================
   RAIL — horizontal scroll container
   ============================================================ */
.rail {
  display: flex;
  flex-direction: row;
  width: 100vw;
  height: 100vh;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }

.panel {
  flex: 0 0 100vw;
  width: 100vw;
  height: 100vh;
  position: relative;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  overflow: hidden;
  border-right: var(--border-thicker);
}
.panel:last-child { border-right: none; }

/* ============================================================
   PANEL 1 — HERO
   ============================================================ */
.panel-hero {
  background: var(--neon-pink);
}
.panel-frame {
  position: absolute;
  inset: 28px;
  border: var(--border-thicker);
  background: var(--neon-pink);
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: 32px 40px;
  z-index: 2;
}
.hero-meta-top, .hero-meta-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: 'Space Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--raw-black);
  text-transform: uppercase;
}
.hero-meta-top .meta-tag {
  background: var(--raw-black);
  color: var(--neon-pink);
  padding: 6px 14px;
  font-weight: 700;
}
.hero-meta-bottom .meta-volume {
  background: var(--raw-black);
  color: var(--neon-yellow);
  padding: 6px 14px;
  font-weight: 700;
}
.hero-meta-bottom .meta-tagline {
  font-weight: 700;
}

.logotype {
  font-family: 'Anton', 'Arial Black', sans-serif;
  font-weight: 400;
  font-size: clamp(64px, 12vw, 180px);
  line-height: 0.86;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--raw-black);
  align-self: center;
  text-align: left;
  width: 90%;
  margin: auto 0;
  text-shadow: 8px 8px 0 var(--neon-cyan);
}

/* ============================================================
   STORY PANELS
   ============================================================ */
.panel-story[data-color="cyan"]    { background: var(--neon-cyan); }
.panel-story[data-color="yellow"]  { background: var(--neon-yellow); }
.panel-story[data-color="green"]   { background: var(--neon-green); }
.panel-story[data-color="pink-alt"]{ background: var(--neon-pink); }

.story-grid {
  position: absolute;
  inset: 28px;
  border: var(--border-thicker);
  background: inherit;
  padding: 36px 44px 44px 44px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto 1fr auto;
  gap: 24px 32px;
  z-index: 2;
}
.panel-story[data-color="cyan"]    .story-grid { background: var(--neon-cyan); }
.panel-story[data-color="yellow"]  .story-grid { background: var(--neon-yellow); }
.panel-story[data-color="green"]   .story-grid { background: var(--neon-green); }
.panel-story[data-color="pink-alt"].story-grid,
.panel-story[data-color="pink-alt"] .story-grid { background: var(--neon-pink); }

.story-label {
  grid-column: 1 / span 2;
  grid-row: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: 'Space Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--raw-black);
}
.story-label .label-cat {
  background: var(--raw-black);
  color: var(--raw-white);
  padding: 6px 14px;
  font-weight: 700;
}
.story-label .label-time {
  background: var(--raw-white);
  color: var(--raw-black);
  padding: 6px 14px;
  border: 2px solid var(--raw-black);
  font-weight: 700;
}

.story-headline {
  grid-column: 1 / span 2;
  grid-row: 2;
  font-family: 'Anton', 'Arial Black', sans-serif;
  font-weight: 400;
  font-size: clamp(56px, 10vw, 150px);
  line-height: 0.9;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  color: var(--raw-black);
  align-self: center;
  text-align: left;
  text-shadow: 6px 6px 0 var(--raw-white);
}

.panel-story[data-color="yellow"] .story-headline { text-shadow: 6px 6px 0 var(--neon-pink); }
.panel-story[data-color="green"]  .story-headline { text-shadow: 6px 6px 0 var(--raw-black), 6px 6px 0 var(--neon-pink); -webkit-text-stroke: 0; }
.panel-story[data-color="pink-alt"] .story-headline { text-shadow: 6px 6px 0 var(--neon-yellow); }

.crystal-container {
  grid-column: 1;
  grid-row: 3;
  background: var(--raw-white);
  border: var(--border-thick);
  padding: 28px 30px 32px 30px;
  position: relative;
  max-width: 560px;
  z-index: 3;
}
.crystal-1 { clip-path: polygon(5% 0%, 95% 3%, 100% 90%, 8% 100%, 0% 15%); padding: 36px 38px 40px 38px; }
.crystal-2 { clip-path: polygon(0% 8%, 92% 0%, 100% 78%, 88% 100%, 4% 96%); padding: 38px 40px 42px 40px; }
.crystal-3 { clip-path: polygon(8% 4%, 100% 0%, 96% 86%, 60% 100%, 0% 92%, 2% 30%); padding: 38px 40px 42px 40px; }
.crystal-4 { clip-path: polygon(0% 4%, 88% 0%, 100% 60%, 94% 100%, 10% 96%, 6% 50%); padding: 38px 40px 42px 40px; }

.story-body {
  font-family: 'Work Sans', sans-serif;
  font-size: clamp(14px, 1vw, 17px);
  line-height: 1.65;
  font-weight: 400;
  color: var(--raw-black);
  margin-bottom: 16px;
}
.story-author {
  display: inline-block;
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--raw-black);
  background: var(--neon-yellow);
  padding: 4px 10px;
  border: 2px solid var(--raw-black);
}

.story-stat {
  grid-column: 2;
  grid-row: 3;
  background: var(--raw-black);
  color: var(--raw-white);
  border: var(--border-thick);
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 10px;
  align-self: end;
  justify-self: end;
  width: 240px;
  height: 200px;
  position: relative;
  z-index: 4;
}
.story-stat.stat-2 {
  align-self: start;
  justify-self: end;
  margin-top: 0;
  transform: translate(-260px, -8px);
  background: var(--raw-white);
  color: var(--raw-black);
  width: 200px;
  height: 160px;
  z-index: 3;
}
.stat-num {
  font-family: 'Anton', 'Arial Black', sans-serif;
  font-size: clamp(48px, 5vw, 84px);
  line-height: 0.85;
  letter-spacing: -0.02em;
}
.stat-label {
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  line-height: 1.3;
}

/* ============================================================
   ABSTRACT SHAPES
   ============================================================ */
.abstract-shape {
  position: absolute;
  pointer-events: none;
  z-index: 1;
}
.shape-tri-1 {
  width: 38vmin; height: 38vmin;
  top: -8vmin; right: 6vmin;
  transform: rotate(8deg);
}
.shape-tri-2 {
  width: 32vmin; height: 32vmin;
  bottom: -6vmin; left: 4vmin;
  transform: rotate(-12deg);
}
.shape-diamond {
  width: 24vmin; height: 24vmin;
  bottom: 10vmin; right: -6vmin;
  transform: rotate(18deg);
}
.story-shape-1 {
  width: 36vmin; height: 36vmin;
  top: -8vmin; right: -6vmin;
  transform: rotate(14deg);
}
.story-shape-2 {
  width: 30vmin; height: 30vmin;
  bottom: -6vmin; right: -4vmin;
  transform: rotate(-10deg);
}
.story-shape-3 {
  width: 34vmin; height: 34vmin;
  top: 4vmin; right: -8vmin;
  transform: rotate(22deg);
}
.story-shape-4 {
  width: 32vmin; height: 32vmin;
  bottom: -10vmin; left: -6vmin;
  transform: rotate(-18deg);
}
.end-shape-1 {
  width: 38vmin; height: 38vmin;
  top: -10vmin; left: -8vmin;
  transform: rotate(-14deg);
  opacity: 0.95;
}
.end-shape-2 {
  width: 28vmin; height: 28vmin;
  bottom: 6vmin; right: -6vmin;
  transform: rotate(20deg);
  opacity: 0.95;
}

/* ============================================================
   PANEL 6 — END / COLOPHON
   ============================================================ */
.panel-end { background: var(--raw-black); }
.end-frame {
  position: absolute;
  inset: 28px;
  border: var(--border-white);
  background: var(--raw-black);
  color: var(--raw-white);
  padding: 36px 44px;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 28px;
  z-index: 2;
}
.end-headline {
  font-family: 'Anton', 'Arial Black', sans-serif;
  font-weight: 400;
  font-size: clamp(64px, 11vw, 168px);
  line-height: 0.88;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--neon-pink);
  text-shadow: 8px 8px 0 var(--neon-cyan);
}
.end-block {
  max-width: 640px;
  border: var(--border-white);
  padding: 22px 26px;
  background: var(--raw-black);
}
.end-body {
  font-family: 'Work Sans', sans-serif;
  font-size: clamp(15px, 1.05vw, 18px);
  line-height: 1.6;
  color: var(--raw-white);
}
.colophon {
  align-self: end;
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  max-width: 760px;
}
.colo-row {
  display: grid;
  grid-template-columns: 180px 1fr;
  font-family: 'Space Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-bottom: 1px dashed var(--raw-white);
  padding: 8px 0;
}
.colo-key { color: var(--neon-yellow); font-weight: 700; }
.colo-val { color: var(--raw-white); }

.end-restart {
  justify-self: start;
  background: var(--neon-pink);
  color: var(--raw-black);
  border: var(--border-white);
  font-family: 'Anton', 'Arial Black', sans-serif;
  font-size: clamp(20px, 2vw, 28px);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 14px 28px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  transition: transform 0.12s ease, background 0.12s ease;
}
.end-restart:hover {
  background: var(--neon-yellow);
  transform: translate(-3px, -3px);
  box-shadow: 6px 6px 0 var(--neon-pink);
}
.end-restart:active {
  transform: translate(0, 0);
  box-shadow: none;
}
.restart-arrow { font-size: 1.4em; line-height: 1; }

/* ============================================================
   FIXED OVERLAYS — instructions, progress, counter, ticker
   ============================================================ */
.scroll-instruction {
  position: fixed;
  top: 50%;
  right: 36px;
  transform: translateY(-50%);
  background: var(--raw-black);
  color: var(--neon-yellow);
  padding: 16px 18px;
  z-index: 50;
  font-family: 'Space Mono', monospace;
  font-size: 13px;
  letter-spacing: 0.1em;
  font-weight: 700;
  text-transform: uppercase;
  border: var(--border-thick);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  transition: opacity 0.4s ease, transform 0.4s ease;
  pointer-events: none;
}
.scroll-instruction.hidden {
  opacity: 0;
  transform: translateY(-50%) translateX(80px);
}
.instruction-text {
  font-family: 'Anton', sans-serif;
  font-size: 22px;
  color: var(--neon-pink);
}
.instruction-sub {
  font-size: 10px;
  letter-spacing: 0.16em;
}

.progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 6px;
  background: var(--raw-black);
  z-index: 60;
}
.progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(
    90deg,
    var(--neon-pink) 0%,
    var(--neon-cyan) 40%,
    var(--neon-yellow) 70%,
    var(--neon-green) 100%
  );
  transition: width 0.18s linear;
}

.panel-counter {
  position: fixed;
  top: 22px;
  left: 24px;
  background: var(--raw-black);
  color: var(--raw-white);
  padding: 10px 16px;
  font-family: 'Space Mono', monospace;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
  z-index: 55;
  border: var(--border-thick);
  display: flex;
  gap: 6px;
  align-items: baseline;
}
.counter-current {
  color: var(--neon-pink);
  font-size: 18px;
  font-family: 'Anton', sans-serif;
}
.counter-divider { color: var(--neon-yellow); }
.counter-total { color: var(--neon-cyan); }

.ticker {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100vw;
  height: 32px;
  background: var(--raw-black);
  border-top: var(--border-thick);
  overflow: hidden;
  z-index: 55;
  display: flex;
  align-items: center;
}
.ticker-track {
  display: flex;
  gap: 48px;
  white-space: nowrap;
  animation: ticker-slide 36s linear infinite;
  padding-left: 100vw;
}
.ticker-item {
  font-family: 'Space Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.12em;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--neon-green);
}
.ticker-item:nth-child(odd) { color: var(--neon-yellow); }

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

/* ============================================================
   ANIMATIONS — shake-error, glitch
   ============================================================ */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-4px); }
  40%      { transform: translateX(4px); }
  60%      { transform: translateX(-3px); }
  80%      { transform: translateX(3px); }
}

.shake-active {
  animation: shake 0.34s ease-in-out;
}

@keyframes hero-shake {
  0%, 100% { transform: translateX(0) skewX(0deg); }
  15%      { transform: translateX(-6px) skewX(-1deg); }
  30%      { transform: translateX(6px) skewX(1deg); }
  45%      { transform: translateX(-4px) skewX(0deg); }
  60%      { transform: translateX(4px) skewX(0deg); }
  75%      { transform: translateX(-3px) skewX(0deg); }
}
.hero-shake-active {
  animation: hero-shake 0.42s ease-in-out;
}

@keyframes panel-enter {
  0%   { opacity: 0; transform: translateX(40px); }
  100% { opacity: 1; transform: translateX(0); }
}
.panel.in-view .story-headline,
.panel.in-view .crystal-container,
.panel.in-view .story-stat,
.panel.in-view .end-headline,
.panel.in-view .end-block,
.panel.in-view .colophon,
.panel.in-view .end-restart {
  animation: panel-enter 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.panel.in-view .crystal-container { animation-delay: 0.08s; }
.panel.in-view .story-stat        { animation-delay: 0.14s; }
.panel.in-view .story-stat.stat-2 { animation-delay: 0.20s; }
.panel.in-view .end-block         { animation-delay: 0.10s; }
.panel.in-view .colophon          { animation-delay: 0.18s; }
.panel.in-view .end-restart       { animation-delay: 0.26s; }

/* ============================================================
   RESPONSIVE — narrow viewports keep horizontal feel
   ============================================================ */
@media (max-width: 900px) {
  .panel-frame, .story-grid, .end-frame {
    inset: 18px;
    padding: 24px 22px;
  }
  .story-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto auto;
    gap: 18px;
  }
  .story-headline { grid-column: 1; grid-row: 2; font-size: clamp(44px, 14vw, 96px); text-shadow: 4px 4px 0 var(--raw-white); }
  .story-label    { grid-column: 1; grid-row: 1; }
  .crystal-container { grid-column: 1; grid-row: 3; max-width: 100%; }
  .story-stat        { grid-column: 1; grid-row: 4; width: 100%; height: auto; padding: 18px 22px; }
  .story-stat.stat-2 { grid-column: 1; grid-row: 5; transform: none; width: 100%; height: auto; }
  .logotype { font-size: clamp(56px, 18vw, 120px); text-shadow: 5px 5px 0 var(--neon-cyan); }
  .end-headline { font-size: clamp(48px, 14vw, 110px); text-shadow: 5px 5px 0 var(--neon-cyan); }
  .scroll-instruction { right: 12px; padding: 10px 12px; font-size: 11px; }
  .instruction-text   { font-size: 18px; }
  .colo-row { grid-template-columns: 110px 1fr; font-size: 11px; }
}

@media (max-height: 600px) {
  .panel-frame, .story-grid, .end-frame { inset: 14px; padding: 18px 22px; }
  .ticker { height: 24px; }
  .ticker-item { font-size: 10px; }
}