:root {
  /* Typography compliance notes: IBM Plex Mono (structural annotation at `clamp(8rem and Josefin Sans (Google Fonts). Interactivity Interactivity* Interactivity:* Interactivity::::* Interactivity: Interactivity:** IntersectionObserver` with a threshold of 0.15 to detect when each diagonal section enters the viewport. On intersection: */
  --cream: #F2E8D4;
  --midnight: #0D0D1A;
  --cyan: #00F0FF;
  --magenta: #FF2D6B;
  --lime: #AAFF00;
  --graphite: #3A3A52;
  --cyan-wash: #00F0FF19;
  --magenta-wash: #FF2D6B15;
  --lime-wash: #AAFF0014;
  --display: "Josefin Sans", "Inter", sans-serif;
  --body: "Literata", Georgia, serif;
  --mono: "IBM Plex Mono", monospace;
}

* { box-sizing: border-box; }

html { background: var(--midnight); scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100%;
  overflow-x: hidden;
  color: var(--cream);
  background:
    radial-gradient(circle at 8% 12%, #00F0FF0D 0 18vw, transparent 32vw),
    radial-gradient(circle at 86% 8%, #FF2D6B10 0 16vw, transparent 31vw),
    linear-gradient(120deg, #0D0D1A 0%, #111125 50%, #0D0D1A 100%);
  font-family: var(--body);
}

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

.progress-rail {
  position: fixed;
  z-index: 50;
  top: 0;
  left: 0;
  width: 2px;
  height: 100vh;
  background: #3A3A5270;
  box-shadow: 0 0 18px #00F0FF40;
}

.progress-fill {
  width: 100%;
  height: 0;
  background: linear-gradient(180deg, #00F0FF 0%, #FF2D6B 55%, #AAFF00 100%);
  box-shadow: 0 0 10px #00F0FF, 0 0 26px #FF2D6B80;
}

.diagonal-story {
  position: relative;
  isolation: isolate;
}

.panel {
  position: relative;
  min-height: 100vh;
  margin-top: -4vw;
  padding: clamp(6rem, 9vw, 9rem) clamp(1.4rem, 6vw, 7rem);
  display: grid;
  align-items: center;
  overflow: hidden;
  background: var(--midnight);
  clip-path: polygon(0 0, 100% 4vw, 100% calc(100% - 4vw), 0 100%);
}

.panel:first-child { margin-top: 0; }
.panel-hero { animation: curtain-rise 1.5s cubic-bezier(0.23, 1, 0.32, 1) both; }
.panel-reverse { clip-path: polygon(0 4vw, 100% 0, 100% 100%, 0 calc(100% - 4vw)); }
.panel-right { min-height: 80vh; }
.panel-columns { min-height: 100vh; }
.panel-quote { min-height: 60vh; }
.panel-closing { min-height: 100vh; }

.panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -4;
  background:
    linear-gradient(105deg, #3A3A522B 0 1px, transparent 1px 16.6%),
    linear-gradient(15deg, transparent 0 48%, #00F0FF10 48% 49%, transparent 49% 100%);
  opacity: 0.9;
}

.panel:nth-child(even)::before {
  background:
    linear-gradient(75deg, #3A3A522B 0 1px, transparent 1px 16.6%),
    linear-gradient(165deg, transparent 0 48%, #FF2D6B10 48% 49%, transparent 49% 100%);
}

.edge {
  position: absolute;
  left: -5vw;
  right: -5vw;
  height: 2px;
  z-index: 8;
  opacity: 0;
  background: linear-gradient(90deg, transparent, #00F0FF, #FF2D6B, #AAFF00, transparent);
  background-size: 200% 100%;
  box-shadow: 0 0 8px #00F0FF80, 0 0 24px #FF2D6B50;
}

.edge-top { top: 2vw; transform: rotate(2.4deg); transform-origin: left center; }
.edge-bottom { bottom: 2vw; transform: rotate(-2.4deg); transform-origin: left center; }
.panel.is-visible .edge { animation: border-trace 1.2s cubic-bezier(0.23, 1, 0.32, 1) both, border-flow 4s linear 1.2s infinite; opacity: 1; }

.section-number {
  position: absolute;
  top: clamp(1.2rem, 5vw, 4rem);
  left: clamp(1rem, 5vw, 5rem);
  font-family: var(--mono);
  font-size: clamp(8rem, 15vw, 14rem);
  line-height: 0.8;
  color: #F2E8D4;
  opacity: 0.05;
  letter-spacing: -0.08em;
  transform: translateY(var(--number-shift, 0));
  pointer-events: none;
}

.grid {
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  column-gap: 2.4rem;
  row-gap: 1.6rem;
  width: min(1180px, 100%);
}

.hero-grid { margin-left: 2vw; align-items: end; }
.hero-copy { grid-column: 1 / span 4; }
.hero-note { grid-column: 5 / span 2; align-self: end; }
.split-grid { margin-left: auto; margin-right: 1vw; }
.annotation-block { grid-column: 2 / span 2; }
.prose-block { grid-column: 4 / span 3; }
.columns-grid { margin-left: 6vw; margin-right: auto; }
.column-copy:nth-child(1) { grid-column: 1 / span 2; }
.column-copy:nth-child(2) { grid-column: 3 / span 2; margin-top: 8vh; }
.column-copy:nth-child(3) { grid-column: 5 / span 2; margin-top: -5vh; }
.quote-grid { width: min(1220px, 100%); margin-inline: auto; }
.quote-copy { grid-column: 1 / -1; }
.closing-grid { margin-left: auto; margin-right: 4vw; }
.closing-copy { grid-column: 3 / span 4; }

.content {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease 0.8s, transform 0.6s ease 0.8s;
}

.panel.is-visible .content { opacity: 1; transform: translateY(0); }

.kicker, .mono-label, cite {
  font-family: var(--mono);
  font-size: clamp(0.7rem, 1vw, 0.85rem);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cyan);
  opacity: 0.7;
  text-shadow: 0 0 10px currentColor, 0 0 30px currentColor;
}

h1, h2 {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(3rem, 8vw, 7rem);
  line-height: 0.88;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--cream);
  transition: letter-spacing 0.8s ease, font-weight 0.8s ease;
}

h1 span, h2 span {
  color: var(--cyan);
  font-weight: 300;
  text-shadow: 0 0 10px currentColor, 0 0 30px currentColor;
  transition: font-weight 0.8s ease 0.25s;
}

.panel.is-visible h1, .panel.is-visible h2 { letter-spacing: 0.08em; }
.panel.is-visible h1 span, .panel.is-visible h2 span { font-weight: 700; }

.lead, .prose-block p, .column-copy p, .closing-copy p, .hero-note p {
  font-size: clamp(1.1rem, 1.8vw, 1.35rem);
  line-height: 1.72;
  color: #F2E8D4;
}

.lead { max-width: 45rem; margin-top: 2rem; }
.hero-note { padding: 1.3rem 0 0 1.4rem; border-left: 1px solid #00F0FF80; box-shadow: inset 8px 0 18px -18px #00F0FF; }
.hero-note p:last-child { font-size: clamp(1rem, 1.35vw, 1.1rem); }

.quote-copy p {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(2.4rem, 6vw, 6.2rem);
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--cream);
  text-shadow: 0 0 18px #FF2D6B40;
}

cite { display: block; margin-top: 2rem; color: var(--magenta); font-style: normal; }

.wash {
  position: absolute;
  inset: -10%;
  z-index: -3;
  opacity: 0;
  transform: scale(0.85);
  filter: url(#watercolor-distort);
  background:
    radial-gradient(ellipse at 30% 60%, #00F0FF12 0%, transparent 60%),
    radial-gradient(ellipse at 70% 40%, #FF2D6B10 0%, transparent 50%),
    radial-gradient(ellipse at 90% 80%, #AAFF0008 0%, transparent 40%);
  transition: opacity 1s ease 0.6s, transform 1s ease 0.6s;
}

.final-wash {
  background:
    radial-gradient(ellipse at 18% 74%, #00F0FF24 0%, transparent 58%),
    radial-gradient(ellipse at 72% 44%, #FF2D6B1F 0%, transparent 54%),
    radial-gradient(ellipse at 92% 86%, #AAFF0017 0%, transparent 46%);
}

.panel.is-visible .wash { opacity: 1; transform: scale(1); }

.geometry {
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: 0;
  transition: opacity 0.8s ease 0.4s;
}

.panel.is-visible .geometry { opacity: 1; }
.geometry span { position: absolute; display: block; animation: glow-pulse 3s ease-in-out infinite; }

.geometry-hero span:nth-child(1) { width: 34vw; height: 34vw; right: 5vw; top: 13vh; border: 2px solid #00F0FF; border-radius: 50%; box-shadow: 0 0 8px #00F0FF40, 0 0 24px #00F0FF20; opacity: 0.35; }
.geometry-hero span:nth-child(2) { width: 28vw; height: 28vw; right: 16vw; bottom: 12vh; background: #FF2D6B1A; clip-path: polygon(50% 0, 100% 100%, 0 78%); }
.geometry-hero span:nth-child(3) { width: 46vw; height: 2px; right: 0; top: 52%; background: #AAFF00; transform: rotate(-17deg); box-shadow: 0 0 20px #AAFF0080; }
.geometry-hero span:nth-child(4) { width: 9vw; height: 22vw; left: 7vw; bottom: 9vh; background: #3A3A5280; border: 1px solid #FF2D6B70; }

.geometry-score span:nth-child(1) { width: 24vw; height: 24vw; left: 10vw; top: 14vh; border-radius: 50%; background: #00F0FF26; }
.geometry-score span:nth-child(2) { width: 20vw; height: 20vw; left: 24vw; bottom: 12vh; border: 2px solid #FF2D6B; transform: rotate(23deg); }
.geometry-score span:nth-child(3) { width: 2px; height: 72vh; left: 42vw; top: 8vh; background: #AAFF00; transform: rotate(14deg); box-shadow: 0 0 18px #AAFF00; }
.geometry-score span:nth-child(4) { width: 10vw; height: 10vw; left: 6vw; bottom: 15vh; clip-path: polygon(0 0, 100% 50%, 0 100%); background: #FF2D6B22; }

.geometry-triad span:nth-child(1) { width: 18vw; height: 18vw; left: 43%; top: 13vh; border-radius: 50%; border: 1px solid #00F0FF; }
.geometry-triad span:nth-child(2) { width: 14vw; height: 31vw; right: 9vw; top: 28vh; background: #3A3A5255; border-top: 3px solid #AAFF00; }
.geometry-triad span:nth-child(3) { width: 31vw; height: 31vw; left: 2vw; bottom: 9vh; background: #FF2D6B16; clip-path: polygon(0 100%, 54% 0, 100% 100%); }
.geometry-triad span:nth-child(4) { width: 78vw; height: 1px; left: 9vw; top: 58%; background: linear-gradient(90deg, transparent, #00F0FF, #FF2D6B, transparent); transform: rotate(7deg); }

.geometry-quote span:nth-child(1) { width: 82vw; height: 2px; left: 8vw; top: 48%; background: #00F0FF; transform: rotate(-7deg); box-shadow: 0 0 22px #00F0FF; }
.geometry-quote span:nth-child(2) { width: 16vw; height: 16vw; right: 15vw; top: 12vh; border-radius: 50%; background: #AAFF0017; }
.geometry-quote span:nth-child(3) { width: 8vw; height: 8vw; left: 13vw; bottom: 10vh; border: 2px solid #FF2D6B; transform: rotate(45deg); }

.geometry-final span:nth-child(1) { width: 42vw; height: 42vw; left: 7vw; bottom: 5vh; border-radius: 50%; background: #00F0FF18; }
.geometry-final span:nth-child(2) { width: 28vw; height: 28vw; right: 10vw; top: 15vh; clip-path: polygon(50% 0, 100% 100%, 0 100%); background: #FF2D6B1C; }
.geometry-final span:nth-child(3) { width: 55vw; height: 2px; right: -5vw; bottom: 28vh; background: #AAFF00; transform: rotate(-21deg); box-shadow: 0 0 20px #AAFF00; }
.geometry-final span:nth-child(4) { width: 9vw; height: 9vw; right: 35vw; bottom: 18vh; border: 1px solid #00F0FF; border-radius: 50%; }
.geometry-final span:nth-child(5) { width: 6vw; height: 24vw; left: 28vw; top: 12vh; background: #3A3A5266; }

.bubbles { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.bubble {
  --push-x: 0px;
  --push-y: 0px;
  position: absolute;
  border-radius: 50%;
  border: 1px solid currentColor;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: screen;
  transform: translate(var(--push-x), var(--push-y));
  box-shadow: 0 0 8px currentColor, 0 0 24px currentColor;
  transition: opacity 0.4s ease 1.2s;
}

.panel.is-visible .bubble { opacity: 0.58; animation: float var(--dur, 12s) ease-in-out infinite 1.2s; }
.bubble::before, .bubble i { content: ""; position: absolute; inset: 27%; opacity: 0.3; }
.bubble::before { border: 1px solid currentColor; border-radius: 50%; }
.bubble i { display: block; clip-path: polygon(50% 0, 100% 100%, 0 100%); background: currentColor; }
.bubble-cyan { color: #00F0FF; background: radial-gradient(circle at 35% 30%, #00F0FF35, transparent 65%); }
.bubble-magenta { color: #FF2D6B; background: radial-gradient(circle at 35% 30%, #FF2D6B30, transparent 65%); }
.bubble-lime { color: #AAFF00; background: radial-gradient(circle at 35% 30%, #AAFF0026, transparent 65%); }
.tiny { width: 24px; height: 24px; --dur: 9s; }
.small { width: 48px; height: 48px; --dur: 12s; }
.medium { width: 84px; height: 84px; --dur: 16s; }
.large { width: 120px; height: 120px; --dur: 20s; }
.huge { width: 150px; height: 150px; --dur: 18s; }

.panel-hero .bubble:nth-child(1) { left: 22vw; top: 18vh; }
.panel-hero .bubble:nth-child(2) { right: 12vw; top: 62vh; }
.panel-hero .bubble:nth-child(3) { left: 68vw; top: 24vh; }
.panel-right .bubble:nth-child(1) { left: 13vw; top: 26vh; }
.panel-right .bubble:nth-child(2) { left: 34vw; bottom: 16vh; }
.panel-columns .bubble:nth-child(1) { left: 46vw; top: 39vh; }
.panel-columns .bubble:nth-child(2) { left: 17vw; top: 23vh; }
.panel-columns .bubble:nth-child(3) { right: 11vw; bottom: 24vh; }
.panel-columns .bubble:nth-child(4) { left: 72vw; top: 18vh; }
.panel-quote .bubble:nth-child(1) { right: 24vw; top: 13vh; }
.panel-quote .bubble:nth-child(2) { left: 18vw; bottom: 20vh; }
.panel-closing .bubble:nth-child(1) { left: 13vw; bottom: 18vh; }
.panel-closing .bubble:nth-child(2) { right: 18vw; top: 18vh; }
.panel-closing .bubble:nth-child(3) { right: 28vw; bottom: 16vh; }

@keyframes curtain-rise {
  0% { clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); }
  100% { clip-path: polygon(0 0, 100% 4vw, 100% calc(100% - 4vw), 0 100%); }
}

@keyframes border-trace {
  0% { clip-path: inset(0 100% 0 0); }
  100% { clip-path: inset(0 0 0 0); }
}

@keyframes border-flow {
  0% { background-position: -100% 0; }
  100% { background-position: 200% 0; }
}

@keyframes glow-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.85; }
}

@keyframes float {
  0%, 100% { transform: translate(var(--push-x), var(--push-y)); }
  33% { transform: translate(calc(var(--push-x) + 15px), calc(var(--push-y) - 30px)); }
  66% { transform: translate(calc(var(--push-x) - 10px), calc(var(--push-y) - 15px)); }
}

@media (max-width: 820px) {
  .panel { padding: 7rem 1.35rem; min-height: 88vh; }
  .grid { grid-template-columns: 1fr; width: 100%; gap: 1.2rem; }
  .hero-copy, .hero-note, .annotation-block, .prose-block, .column-copy:nth-child(n), .quote-copy, .closing-copy { grid-column: 1; margin-top: 0; }
  h1, h2 { font-size: clamp(2.7rem, 14vw, 5rem); }
  .quote-copy p { font-size: clamp(2rem, 11vw, 4rem); }
  .section-number { left: 0.8rem; }
  .geometry span { transform: scale(0.85); }
}