:root {
  /* Design parser typography tokens: Mono` secondary numbers labels:** labels:* labels: `Space Grotesk` capsule controls */
  --burnt-amber: #D97932;
  --persimmon: #FF6B3A;
  --photo-cream: #F4D6A2;
  --walnut: #2A160F;
  --teal: #1E6F68;
  --rose: #F2A3B3;
  --chrome: #6E706A;
  --space-brown: #100908;
  --display: "Fraunces", Georgia, serif;
  --interface: "Space Grotesk", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  color: var(--photo-cream);
  background: var(--space-brown);
  font-family: var(--interface);
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 107, 58, .16), transparent 28%),
    radial-gradient(circle at 88% 68%, rgba(242, 163, 179, .12), transparent 34%),
    linear-gradient(105deg, transparent 0 47%, rgba(244, 214, 162, .06) 48% 50%, transparent 52% 100%);
  mix-blend-mode: screen;
}

.film-grain,
.heat-field {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
}

.film-grain {
  opacity: .34;
  background-image:
    repeating-radial-gradient(circle at 17% 29%, rgba(244, 214, 162, .12) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(0deg, transparent 0 18px, rgba(42, 22, 15, .32) 19px 20px);
  animation: grainShift 1.6s steps(3) infinite;
}

.heat-field {
  opacity: .28;
  background: linear-gradient(90deg, transparent, rgba(217, 121, 50, .1), transparent);
  filter: blur(18px);
  transform: skewX(-8deg);
  animation: heatShimmer 7s ease-in-out infinite alternate;
}

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

.scene {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(280px, 39vw) 1fr;
  align-items: center;
  padding: 7vw 8vw;
  isolation: isolate;
  background:
    linear-gradient(120deg, rgba(16, 9, 8, .95), rgba(42, 22, 15, .82) 40%, rgba(16, 9, 8, .96)),
    var(--space-brown);
}

.scene::before,
.scene::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.scene::before {
  z-index: -2;
  background:
    linear-gradient(90deg, rgba(244, 214, 162, .04) 0 1px, transparent 1px 8px),
    radial-gradient(circle at 80% 20%, rgba(217, 121, 50, .18), transparent 38%);
}

.scene::after {
  z-index: 3;
  background:
    linear-gradient(transparent 0 94%, rgba(255, 107, 58, .08)),
    repeating-linear-gradient(90deg, transparent 0 32px, rgba(244,214,162,.045) 33px 34px);
}

.photo-field {
  position: absolute;
  inset: 0;
  z-index: -1;
  transform: scale(1.04);
}

.receiver-photo {
  background:
    radial-gradient(circle at 67% 48%, rgba(255, 107, 58, .28) 0 4%, transparent 9%),
    radial-gradient(circle at 66% 48%, rgba(244, 214, 162, .11) 0 17%, transparent 31%),
    linear-gradient(115deg, rgba(42,22,15,.98) 0 38%, rgba(110,112,106,.28) 39% 43%, transparent 45%),
    repeating-linear-gradient(0deg, rgba(244,214,162,.035) 0 2px, transparent 3px 32px),
    linear-gradient(140deg, #100908, #2A160F 50%, #100908);
}

.receiver-light,
.return-lamp {
  position: absolute;
  width: clamp(34px, 5vw, 72px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, var(--photo-cream), var(--persimmon) 38%, rgba(255,107,58,.22) 62%, transparent 72%);
  box-shadow: 0 0 26px var(--persimmon), 0 0 90px rgba(255,107,58,.48), inset 0 0 14px var(--photo-cream);
  animation: pulseLight 2.8s ease-in-out infinite;
}

.receiver-light { right: 29vw; top: 45vh; }

.dial-ring {
  position: absolute;
  right: 17vw;
  top: 30vh;
  width: 34vw;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(244,214,162,.18);
  box-shadow: inset 0 0 60px rgba(110,112,106,.22);
}

.ring-two { transform: scale(.64); border-color: rgba(217,121,50,.32); }

.chrome-slots {
  position: absolute;
  right: 7vw;
  bottom: 12vh;
  display: grid;
  gap: 12px;
  width: 28vw;
}

.chrome-slots span {
  height: 10px;
  border-radius: 20px;
  background: linear-gradient(90deg, transparent, rgba(110,112,106,.78), rgba(244,214,162,.16), transparent);
}

.scene-copy {
  position: relative;
  z-index: 5;
  max-width: 720px;
  transition: transform .7s ease, opacity .7s ease;
}

.opening-copy { grid-column: 1 / 3; align-self: end; margin-top: 28vh; }
.edge-copy { grid-column: 2; margin-left: auto; }
.crystal-copy { grid-column: 1; }
.return-copy { grid-column: 2; justify-self: end; }

.kicker,
.serial,
.rail-caption,
.stamp-card,
.annotation-stack,
.diagram-card,
.closing-label,
.flip-card {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: .12em;
}

.kicker {
  color: var(--persimmon);
  font-size: clamp(.72rem, .9vw, .88rem);
  margin: 0 0 1rem;
  text-shadow: 0 0 18px rgba(255,107,58,.65);
}

h1, h2 {
  font-family: var(--display);
  font-variation-settings: "SOFT" 82, "WONK" 1;
  margin: 0;
  line-height: .86;
  color: var(--photo-cream);
  text-shadow: 0 0 26px rgba(217,121,50,.34);
}

.wordmark {
  font-size: clamp(5rem, 17vw, 15rem);
  letter-spacing: -.09em;
  position: relative;
  animation: wordWarm 2.2s ease both;
}

.wordmark::before,
.wordmark::after,
.crystal-copy h2::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.wordmark::before {
  color: var(--rose);
  clip-path: polygon(0 20%, 100% 5%, 100% 32%, 0 48%);
  transform: translate(11px, -6px);
  opacity: .46;
  filter: blur(.5px);
}

.wordmark::after {
  color: var(--teal);
  clip-path: polygon(0 54%, 100% 38%, 100% 62%, 0 82%);
  transform: translate(-9px, 5px);
  opacity: .38;
}

h2 {
  font-size: clamp(4.2rem, 10vw, 10.5rem);
  letter-spacing: -.075em;
  max-width: 780px;
}

.crystal-copy h2 { position: relative; }
.crystal-copy h2::after {
  content: attr(data-ghost);
  color: var(--rose);
  transform: translate(15px, -12px);
  opacity: .3;
  clip-path: polygon(10% 0, 90% 0, 68% 100%, 0 100%);
}

.chapter-text {
  color: rgba(244, 214, 162, .82);
  font-size: clamp(1.05rem, 1.8vw, 1.55rem);
  line-height: 1.45;
  max-width: 680px;
  margin: 1.4rem 0 0;
}

.prism {
  position: absolute;
  z-index: 4;
  width: 42vw;
  height: 28vw;
  pointer-events: none;
  background: linear-gradient(115deg, rgba(242,163,179,.0), rgba(242,163,179,.34), rgba(244,214,162,.08), rgba(30,111,104,.24), transparent);
  clip-path: polygon(8% 84%, 48% 2%, 96% 66%, 56% 92%);
  mix-blend-mode: screen;
  filter: blur(.4px);
  animation: prismDrift 9s ease-in-out infinite alternate;
}

.prism-a { right: 9vw; top: 10vh; }

.stamp-card,
.diagram-card,
.closing-label,
.annotation-stack {
  position: absolute;
  z-index: 6;
  color: var(--photo-cream);
}

.stamp-card {
  left: 8vw;
  top: 12vh;
  border: 1px solid rgba(244,214,162,.25);
  padding: 1rem;
  background: rgba(42,22,15,.52);
  box-shadow: inset 0 0 30px rgba(217,121,50,.13);
}

.stamp-card span,
.stamp-card b { display: block; font-size: .72rem; }
.stamp-card b { color: var(--chrome); margin-top: .45rem; }

.instant-photo {
  background:
    radial-gradient(circle at 58% 30%, rgba(244,214,162,.26), transparent 33%),
    linear-gradient(110deg, rgba(16,9,8,.92) 0 35%, rgba(217,121,50,.16) 50%, rgba(16,9,8,.96)),
    repeating-linear-gradient(90deg, rgba(244,214,162,.04) 0 9px, transparent 10px 42px);
}

.polaroid {
  position: absolute;
  left: 8vw;
  top: 10vh;
  width: min(44vw, 560px);
  min-width: 310px;
  padding: 18px 18px 72px;
  transform: rotate(-7deg);
  background: linear-gradient(#F4D6A2, #cfae7f);
  box-shadow: 0 30px 80px rgba(0,0,0,.48), inset 0 0 28px rgba(42,22,15,.18);
}

.photo-window {
  position: relative;
  height: min(58vh, 540px);
  overflow: hidden;
  background: linear-gradient(135deg, #2A160F, #D97932 48%, #100908);
}

.vinyl-seat,
.curtain-glow,
.hand-blur {
  position: absolute;
  display: block;
}

.vinyl-seat {
  left: 12%; bottom: 12%; width: 70%; height: 28%;
  background: radial-gradient(ellipse at center, rgba(242,163,179,.36), rgba(42,22,15,.9) 70%);
  border-radius: 70% 70% 22% 22%;
}

.curtain-glow {
  inset: 0;
  background: repeating-linear-gradient(90deg, rgba(244,214,162,.12) 0 8px, transparent 9px 34px), radial-gradient(circle at 64% 30%, rgba(255,107,58,.35), transparent 36%);
}

.hand-blur {
  right: 4%; top: 23%; width: 38%; height: 18%;
  border-radius: 50%;
  background: rgba(244,214,162,.22);
  filter: blur(15px);
  transform: rotate(-16deg);
}

.photo-caption {
  color: var(--walnut);
  font: 600 .78rem var(--mono);
  letter-spacing: .08em;
  position: absolute;
  left: 22px;
  bottom: 26px;
}

.annotation-stack {
  left: 7vw;
  bottom: 12vh;
  display: grid;
  gap: .55rem;
  font-size: .72rem;
  color: rgba(244,214,162,.72);
}

.annotation-stack span { border-left: 2px solid var(--persimmon); padding-left: .8rem; }

.crystal-photo {
  background:
    radial-gradient(circle at 62% 42%, rgba(242,163,179,.28), transparent 30%),
    radial-gradient(circle at 30% 70%, rgba(30,111,104,.3), transparent 34%),
    linear-gradient(132deg, #100908 0 46%, #2A160F 47% 70%, #100908);
}

.portrait-split {
  position: absolute;
  right: 10vw;
  top: 10vh;
  width: 45vw;
  height: 76vh;
  filter: saturate(1.3) contrast(1.1);
}

.portrait-split span {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 48% 22%, rgba(244,214,162,.5), transparent 12%),
    radial-gradient(ellipse at 42% 40%, rgba(217,121,50,.55), transparent 26%),
    linear-gradient(160deg, transparent 0 26%, rgba(242,163,179,.25) 27% 47%, rgba(30,111,104,.26) 48% 68%, transparent 69%);
  clip-path: polygon(20% 0, 72% 8%, 92% 100%, 3% 88%);
  border: 1px solid rgba(244,214,162,.14);
}

.portrait-split span:nth-child(2) { transform: translate(26px, 14px); opacity: .42; mix-blend-mode: screen; }
.portrait-split span:nth-child(3) { transform: translate(-28px, -18px); opacity: .28; mix-blend-mode: screen; }

.quartz {
  position: absolute;
  background: linear-gradient(145deg, rgba(244,214,162,.06), rgba(242,163,179,.32), rgba(30,111,104,.16));
  border: 1px solid rgba(244,214,162,.22);
  clip-path: polygon(50% 0, 100% 34%, 84% 100%, 14% 100%, 0 34%);
  animation: prismDrift 8s ease-in-out infinite alternate;
}

.quartz-one { width: 18vw; height: 38vh; right: 30vw; top: 16vh; }
.quartz-two { width: 13vw; height: 29vh; right: 9vw; top: 42vh; animation-delay: -2s; }
.quartz-three { width: 10vw; height: 24vh; left: 8vw; bottom: 9vh; animation-delay: -5s; }

.diagram-card {
  right: 8vw;
  bottom: 10vh;
  width: 260px;
  padding: 1rem;
  background: rgba(16,9,8,.58);
  border: 1px solid rgba(242,163,179,.35);
  font-size: .68rem;
}

.triangle-diagram {
  height: 110px;
  background:
    linear-gradient(32deg, transparent 48%, var(--rose) 49% 51%, transparent 52%),
    linear-gradient(148deg, transparent 48%, var(--photo-cream) 49% 51%, transparent 52%),
    linear-gradient(90deg, transparent 48%, var(--teal) 49% 51%, transparent 52%);
  clip-path: polygon(50% 2%, 96% 94%, 4% 94%);
  opacity: .8;
}

.return-photo {
  background:
    radial-gradient(circle at 72% 48%, rgba(255,107,58,.26), transparent 24%),
    radial-gradient(circle at 33% 48%, rgba(30,111,104,.32), transparent 34%),
    linear-gradient(100deg, #100908, #1E6F68 42%, #2A160F 56%, #100908);
}

.orbit-system {
  position: absolute;
  left: 10vw;
  top: 17vh;
  width: 44vw;
  aspect-ratio: 1;
}

.orbit-system span {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(244,214,162,.26);
  border-radius: 50%;
  transform: rotateX(68deg) rotateZ(var(--turn, 0deg));
  box-shadow: 0 0 30px rgba(30,111,104,.28);
}

.orbit-system span:nth-child(2) { inset: 15%; --turn: 56deg; border-color: rgba(255,107,58,.42); }
.orbit-system span:nth-child(3) { inset: 31%; --turn: -28deg; border-color: rgba(242,163,179,.38); }

.wave-line {
  position: absolute;
  left: 5vw;
  right: 5vw;
  top: 61vh;
  height: 90px;
  background: repeating-linear-gradient(90deg, transparent 0 2%, rgba(244,214,162,.5) 2.5% 3%, transparent 3.5% 5%);
  clip-path: polygon(0 50%, 8% 28%, 16% 50%, 24% 72%, 32% 50%, 40% 25%, 48% 50%, 56% 72%, 64% 50%, 72% 30%, 80% 50%, 88% 70%, 100% 50%);
  opacity: .7;
}

.return-lamp { left: 31vw; top: 45vh; }

.closing-label {
  left: 8vw;
  bottom: 10vh;
  display: grid;
  gap: .35rem;
  padding: 1rem 1.2rem;
  border: 1px solid rgba(244,214,162,.22);
  background: rgba(16,9,8,.58);
}

.closing-label span { color: var(--persimmon); font-size: .7rem; }
.closing-label strong { font-family: var(--display); font-size: 2rem; letter-spacing: -.04em; text-transform: none; }

.signal-nav {
  position: fixed;
  right: 2rem;
  top: 50%;
  z-index: 30;
  transform: translateY(-50%);
  display: grid;
  gap: 1rem;
}

.nav-bead {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid rgba(244,214,162,.42);
  background: rgba(16,9,8,.72);
  color: var(--photo-cream);
  text-decoration: none;
  position: relative;
  transition: transform .3s ease, box-shadow .3s ease, background .3s ease;
}

.nav-bead span {
  position: absolute;
  right: 27px;
  top: 50%;
  transform: translateY(-50%);
  font: 600 .68rem var(--mono);
  opacity: 0;
  transition: opacity .3s ease;
}

.nav-bead.is-active {
  background: var(--persimmon);
  box-shadow: 0 0 18px var(--persimmon), 0 0 42px rgba(255,107,58,.35);
  transform: scale(1.28);
}

.nav-bead.is-active span { opacity: 1; }

.console-rail {
  position: fixed;
  left: 1.3rem;
  top: 1.4rem;
  bottom: 1.4rem;
  z-index: 28;
  width: 58px;
  border: 1px solid rgba(244,214,162,.18);
  background: rgba(16,9,8,.42);
  backdrop-filter: blur(8px);
  display: grid;
  grid-template-rows: auto 1fr auto;
  justify-items: center;
  padding: .9rem .45rem;
}

.serial,
.rail-caption {
  writing-mode: vertical-rl;
  font-size: .64rem;
  color: rgba(244,214,162,.64);
}

.needle-housing {
  position: relative;
  width: 34px;
  margin: 2rem 0;
  border-left: 1px solid rgba(244,214,162,.18);
  border-right: 1px solid rgba(244,214,162,.18);
}

.needle-scale {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.needle-scale i {
  display: block;
  width: 12px;
  height: 1px;
  background: rgba(244,214,162,.35);
}

.signal-needle {
  position: absolute;
  left: 50%;
  top: 0%;
  width: 30px;
  height: 2px;
  transform-origin: left center;
  background: var(--persimmon);
  box-shadow: 0 0 12px var(--persimmon);
}

.flip-stage {
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  display: grid;
  place-items: center;
  perspective: 1300px;
  opacity: 0;
  transition: opacity .2s ease;
}

.flip-stage.is-active { opacity: 1; }

.flip-card {
  width: min(76vw, 520px);
  height: min(68vh, 640px);
  position: relative;
  transform-style: preserve-3d;
  transform: rotateY(0deg) rotateZ(-2deg);
  transition: transform .72s cubic-bezier(.2,.7,.2,1);
}

.flip-stage.is-active .flip-card { transform: rotateY(180deg) rotateZ(2deg); }

.flip-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  display: grid;
  align-content: space-between;
  padding: 2rem;
  border: 1px solid rgba(42,22,15,.35);
  box-shadow: 0 40px 100px rgba(0,0,0,.55);
}

.flip-front {
  background: linear-gradient(145deg, #F4D6A2, #D97932 72%, #2A160F);
  color: var(--walnut);
}

.flip-front span {
  font: 700 clamp(7rem, 18vw, 14rem) var(--display);
  letter-spacing: -.08em;
}

.flip-back {
  transform: rotateY(180deg);
  background:
    linear-gradient(90deg, rgba(42,22,15,.16) 0 1px, transparent 1px 18px),
    linear-gradient(#F4D6A2, #d4a36c);
  color: var(--walnut);
}

.flip-back p { font-size: .95rem; line-height: 1.7; text-transform: none; letter-spacing: .05em; }

.mini-crystal {
  height: 190px;
  background:
    linear-gradient(35deg, transparent 49%, var(--teal) 50% 51%, transparent 52%),
    linear-gradient(145deg, transparent 49%, var(--persimmon) 50% 51%, transparent 52%),
    radial-gradient(circle at 50% 50%, rgba(242,163,179,.36), transparent 48%);
  clip-path: polygon(50% 0, 92% 28%, 78% 100%, 21% 100%, 8% 28%);
}

.caption-stamped .scene-copy { animation: inkStamp .56s ease both; }

@keyframes pulseLight {
  0%, 100% { transform: scale(.92); opacity: .74; }
  50% { transform: scale(1.08); opacity: 1; }
}

@keyframes prismDrift {
  from { transform: translate3d(-1.5vw, -1vh, 0) rotate(-4deg); }
  to { transform: translate3d(2vw, 1.2vh, 0) rotate(5deg); }
}

@keyframes wordWarm {
  from { opacity: 0; filter: blur(18px); transform: translateY(20px) scale(.98); }
  to { opacity: 1; filter: blur(0); transform: translateY(0) scale(1); }
}

@keyframes grainShift {
  0% { transform: translate(0,0); }
  33% { transform: translate(1%, -1%); }
  66% { transform: translate(-1%, 1%); }
  100% { transform: translate(0,0); }
}

@keyframes heatShimmer {
  from { transform: translateX(-8vw) skewX(-8deg); }
  to { transform: translateX(8vw) skewX(-12deg); }
}

@keyframes inkStamp {
  0% { opacity: .35; transform: translateY(18px) scale(1.02); filter: blur(4px); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

@media (max-width: 780px) {
  .scene { grid-template-columns: 1fr; padding: 7rem 1.4rem 4rem 5.2rem; }
  .opening-copy, .edge-copy, .crystal-copy, .return-copy { grid-column: 1; margin: 0; justify-self: start; align-self: center; }
  .signal-nav { right: 1rem; }
  .polaroid { left: 5.4rem; width: 68vw; min-width: 0; }
  .portrait-split { right: -8vw; width: 74vw; opacity: .64; }
  .stamp-card, .annotation-stack, .diagram-card, .closing-label { left: 5.2rem; right: 1rem; width: auto; }
  h2 { font-size: clamp(3.4rem, 16vw, 6.8rem); }
  .wordmark { font-size: clamp(4.2rem, 18vw, 8rem); }
}