@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Condensed:wght@500;600;700&family=Inter+Tight:wght@700;800;900&family=Noto+Sans:wght@400;500;700&display=swap');

/* Design font trace: Inter Tight** Tight* from Google Fonts for the mujun.io wordmark; IBM Plex Sans Condensed** Condensed* from Google Fonts for coordinates. */

:root {
  --asphalt: #080B10;
  --gunmetal: #1A2029;
  --mist: #B8C2D1;
  --frost: #E6EDF6;
  --cyan: #19E6FF;
  --violet: #8B5CFF;
  --magenta: #FF2F7D;
  --bluegray: #394655;
  --mx: 50vw;
  --my: 50vh;
  --fault-bend: 0px;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-snap-type: y mandatory;
  background: var(--asphalt);
}

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--frost);
  font-family: 'Noto Sans', Inter, system-ui, sans-serif;
  background:
    radial-gradient(circle at var(--mx) var(--my), rgba(25, 230, 255, 0.13), transparent 26rem),
    linear-gradient(120deg, #080B10 0%, #111720 48%, #080B10 100%);
}

.atmosphere {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    repeating-linear-gradient(0deg, rgba(230,237,246,0.035) 0 1px, transparent 1px 5px),
    linear-gradient(95deg, transparent 0 14%, rgba(57,70,85,0.28) 15%, transparent 19% 59%, rgba(25,230,255,0.08) 60%, transparent 64%),
    radial-gradient(ellipse at 88% 12%, rgba(139,92,255,0.18), transparent 34%);
  mix-blend-mode: screen;
}

.coord-rail {
  position: fixed;
  left: 1.1rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: .8rem;
  font-family: 'IBM Plex Sans Condensed', system-ui, sans-serif;
}

.rail-dot {
  width: 2.4rem;
  height: 2.4rem;
  display: grid;
  place-items: center;
  color: var(--mist);
  text-decoration: none;
  border: 1px solid rgba(184, 194, 209, .26);
  background: rgba(26, 32, 41, .58);
  clip-path: polygon(16% 0, 100% 0, 84% 100%, 0 100%);
  transition: transform .45s cubic-bezier(.22, 1.4, .36, 1), border-color .3s, color .3s;
}

.rail-dot.active {
  color: var(--cyan);
  border-color: var(--cyan);
  box-shadow: 0 0 22px rgba(25,230,255,.34);
  transform: translateX(.35rem) skewY(-8deg);
}

.terminal { position: relative; z-index: 1; }

.scene {
  min-height: 100vh;
  scroll-snap-align: start;
  display: grid;
  place-items: center;
  padding: 3.2rem 3.5rem 3.2rem 5rem;
  perspective: 1200px;
}

.bento-grid {
  width: min(1180px, 94vw);
  height: min(780px, 88vh);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(8, 1fr);
  gap: .78rem;
  filter: drop-shadow(0 24px 70px rgba(0,0,0,.55));
}

.cell {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(184, 194, 209, .18);
  background:
    linear-gradient(135deg, rgba(230,237,246,.09), transparent 24%),
    linear-gradient(160deg, rgba(26,32,41,.86), rgba(8,11,16,.82));
  box-shadow: inset 0 0 0 1px rgba(230,237,246,.035), 0 0 34px rgba(25,230,255,.045);
  backdrop-filter: blur(16px);
  clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 14px, 100% 100%, 18px 100%, 0 calc(100% - 18px));
  transform: translate3d(var(--pull-x, 0), var(--pull-y, 0), 0) scale(.98);
  animation: magnetIn 1.2s cubic-bezier(.2, 1.55, .24, 1) both;
  transition: transform .25s cubic-bezier(.2, 1.25, .3, 1), border-color .45s, clip-path .8s cubic-bezier(.2, 1.25, .3, 1);
}

.cell::before {
  content: '';
  position: absolute;
  inset: -1px;
  border: 1px solid transparent;
  background: linear-gradient(100deg, transparent, rgba(25,230,255,.5), transparent, rgba(255,47,125,.34), transparent) border-box;
  mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: .35;
  pointer-events: none;
}

.cell::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--mx) var(--my), rgba(230,237,246,.18), transparent 13rem);
  opacity: .18;
  pointer-events: none;
}

.cell-tag, .coord {
  position: absolute;
  top: .75rem;
  left: .85rem;
  z-index: 2;
  font-family: 'IBM Plex Sans Condensed', system-ui, sans-serif;
  font-size: .78rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--mist);
}

.domain-cell { grid-column: 1 / 4; grid-row: 1 / 9; }
.signal-a { grid-column: 4 / 13; grid-row: 1 / 2; }
.reactor-cell { grid-column: 4 / 8; grid-row: 2 / 6; }
.manifesto-cell { grid-column: 8 / 10; grid-row: 2 / 9; }
.void-cell { grid-column: 10 / 13; grid-row: 2 / 8; }
.signal-b { grid-column: 4 / 8; grid-row: 6 / 9; }

.domain-cell h1, .domain-cell h2, .domain-cell strong {
  margin: 0;
  font-family: 'Inter Tight', Inter, system-ui, sans-serif;
  font-weight: 900;
  letter-spacing: -.09em;
  line-height: .78;
  color: var(--frost);
  text-shadow: -3px 0 rgba(25,230,255,.25), 3px 0 rgba(255,47,125,.18);
}

.domain-cell h1 {
  position: absolute;
  left: 50%;
  bottom: 1.4rem;
  writing-mode: vertical-rl;
  transform: translateX(-50%) rotate(180deg) scaleY(1.08);
  font-size: clamp(5.6rem, 13vh, 9.8rem);
}

.vertical-note {
  position: absolute;
  right: 1rem;
  top: 5rem;
  writing-mode: vertical-rl;
  margin: 0;
  color: var(--cyan);
  font-family: 'IBM Plex Sans Condensed', system-ui, sans-serif;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.signal-cell {
  display: flex;
  align-items: center;
  border-color: rgba(25,230,255,.24);
  background: linear-gradient(90deg, rgba(25,230,255,.1), rgba(26,32,41,.82), rgba(139,92,255,.11));
}

.ticker {
  white-space: nowrap;
  font-family: 'IBM Plex Sans Condensed', system-ui, sans-serif;
  letter-spacing: .22em;
  color: var(--cyan);
  animation: ticker 11s linear infinite;
  padding-left: 100%;
}
.ticker.reverse { color: var(--magenta); animation-direction: reverse; animation-duration: 14s; }

.reactor-core, .band-reactor {
  position: absolute;
  inset: 12%;
  display: grid;
  place-items: center;
}

.ring {
  position: absolute;
  border: 2px solid var(--cyan);
  border-radius: 50%;
  filter: drop-shadow(0 0 18px rgba(25,230,255,.45));
  animation: breathe 3.6s ease-in-out infinite;
}
.ring-one { width: 82%; height: 82%; border-left-color: var(--violet); }
.ring-two { width: 52%; height: 52%; border-top-color: var(--magenta); animation-delay: -.9s; }
.plasma {
  width: 34%; height: 34%; border-radius: 44% 56% 42% 58%;
  background: radial-gradient(circle at 35% 30%, var(--frost), var(--cyan) 28%, var(--violet) 62%, transparent 70%);
  box-shadow: 0 0 42px rgba(139,92,255,.65);
  animation: wobble 5s ease-in-out infinite;
}

.manifesto-cell {
  padding: 4rem 1rem 1rem;
  color: var(--mist);
  font-size: clamp(1rem, 1.8vh, 1.25rem);
  line-height: 1.55;
}

.void-cell { background: linear-gradient(145deg, rgba(57,70,85,.5), rgba(8,11,16,.78)); }
.membrane, .capsule, .shard { position: absolute; will-change: transform; }
.membrane {
  width: 72%; height: 48%; left: 14%; top: 26%;
  border: 1px solid rgba(230,237,246,.2);
  background: linear-gradient(135deg, rgba(25,230,255,.13), rgba(139,92,255,.08));
  transform: skew(-16deg) rotate(8deg);
  animation: drift 7s ease-in-out infinite;
}
.capsule {
  width: 52%; height: 18%; right: 9%; bottom: 18%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--cyan), transparent 50%, var(--magenta));
  opacity: .7;
  filter: blur(.3px) drop-shadow(0 0 20px rgba(25,230,255,.35));
  animation: drift 6s ease-in-out infinite reverse;
}
.shard {
  width: 34%; height: 38%; left: 9%; top: 17%;
  background: linear-gradient(150deg, rgba(255,47,125,.7), rgba(139,92,255,.05));
  clip-path: polygon(25% 0, 100% 18%, 65% 100%, 0 70%);
  animation: shard 5.2s ease-in-out infinite;
}

.scene-rupture .domain-cell { grid-column: 1 / 9; grid-row: 1 / 4; }
.scene-rupture .domain-cell h2 { font-size: clamp(5rem, 14vw, 12rem); position: absolute; left: 1rem; bottom: -.45rem; }
.scene-rupture .domain-cell strong { position: absolute; right: 1rem; top: 1rem; font-size: clamp(2rem, 5vw, 5rem); color: var(--cyan); }
.scene-rupture .signal-a { grid-column: 9 / 13; grid-row: 1 / 4; }
.scene-rupture .reactor-cell { grid-column: 1 / 8; grid-row: 4 / 6; }
.scene-rupture .manifesto-cell { grid-column: 8 / 11; grid-row: 4 / 9; transform: translate3d(var(--pull-x,0), var(--pull-y,0),0) skewY(-8deg); border-color: rgba(255,47,125,.42); }
.scene-rupture .void-cell { grid-column: 11 / 13; grid-row: 4 / 9; }
.scene-rupture .signal-b { grid-column: 1 / 8; grid-row: 6 / 9; }
.band-reactor { inset: 20% 6%; grid-template-columns: repeat(4, 1fr); gap: .8rem; }
.band-reactor i { display: block; height: 100%; border-radius: 999px; border: 1px solid var(--cyan); background: linear-gradient(180deg, rgba(25,230,255,.38), rgba(255,47,125,.08)); animation: breathe 2.4s ease-in-out infinite; }
.band-reactor i:nth-child(2) { animation-delay: -.3s; border-color: var(--violet); }
.band-reactor i:nth-child(3) { animation-delay: -.6s; border-color: var(--magenta); }

.scene-reform .domain-cell { grid-column: 3 / 11; grid-row: 2 / 7; text-align: center; display: grid; place-items: center; }
.scene-reform .domain-cell h2 { font-size: clamp(4.8rem, 13vw, 11rem); }
.scene-reform .domain-cell p { margin-top: 7rem; color: var(--mist); font-family: 'IBM Plex Sans Condensed', system-ui, sans-serif; letter-spacing: .16em; text-transform: uppercase; }
.scene-reform .signal-a { grid-column: 1 / 3; grid-row: 2 / 7; }
.scene-reform .reactor-cell { grid-column: 11 / 13; grid-row: 2 / 7; }
.scene-reform .manifesto-cell { grid-column: 3 / 8; grid-row: 7 / 9; padding-top: 2.4rem; }
.scene-reform .void-cell { grid-column: 8 / 11; grid-row: 7 / 9; }
.scene-reform .signal-b { grid-column: 1 / 3; grid-row: 7 / 9; }
.calm .ring { animation-duration: 5.8s; }

.fault-svg {
  position: fixed;
  inset: 0;
  z-index: 8;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  filter: drop-shadow(0 0 13px rgba(25,230,255,.58));
}
.fault-svg path {
  fill: none;
  stroke: var(--cyan);
  stroke-width: .22;
  stroke-linecap: round;
  stroke-dasharray: 3 2;
  animation: faultRun 3.8s linear infinite;
}
.fault-svg .fault-ghost { stroke: var(--magenta); opacity: .45; animation-duration: 5.5s; }

@keyframes magnetIn {
  0% { opacity: 0; transform: translate3d(calc(var(--pull-x,0) - 12px), calc(var(--pull-y,0) + 28px), 0) scale(.86) skew(-3deg); }
  68% { opacity: 1; transform: translate3d(var(--pull-x,0), var(--pull-y,0), 0) scale(1.025) skew(1deg); }
  100% { opacity: 1; transform: translate3d(var(--pull-x,0), var(--pull-y,0), 0) scale(1); }
}
@keyframes ticker { to { transform: translateX(-190%); } }
@keyframes breathe { 50% { transform: scale(1.12) rotate(9deg); opacity: .72; } }
@keyframes wobble { 50% { border-radius: 62% 38% 55% 45%; transform: translate(5px, -3px) scale(1.09); } }
@keyframes drift { 50% { transform: translate(12px, -9px) skew(-20deg) rotate(-3deg); } }
@keyframes shard { 50% { transform: translate(-8px, 10px) rotate(11deg) scale(1.08); } }
@keyframes faultRun { to { stroke-dashoffset: -40; } }

@media (max-width: 760px) {
  .scene { padding: 2.2rem 1rem 2.2rem 3.7rem; }
  .bento-grid { height: 88vh; gap: .55rem; }
  .domain-cell, .scene-rupture .domain-cell, .scene-reform .domain-cell { grid-column: 1 / 13; grid-row: 1 / 3; }
  .domain-cell h1 { writing-mode: horizontal-tb; transform: none; left: 1rem; bottom: .5rem; font-size: clamp(3.2rem, 17vw, 6rem); }
  .reactor-cell, .scene-rupture .reactor-cell, .scene-reform .reactor-cell { grid-column: 1 / 7; grid-row: 3 / 6; }
  .manifesto-cell, .scene-rupture .manifesto-cell, .scene-reform .manifesto-cell { grid-column: 7 / 13; grid-row: 3 / 7; }
  .void-cell, .scene-rupture .void-cell, .scene-reform .void-cell { grid-column: 1 / 13; grid-row: 7 / 9; }
  .signal-a, .signal-b, .scene-rupture .signal-a, .scene-rupture .signal-b, .scene-reform .signal-a, .scene-reform .signal-b { display: none; }
  .scene-reform .domain-cell h2 { font-size: clamp(3.3rem, 18vw, 6rem); }
}