:root {
  --porcelain: #F8F4E8;
  --ink: #181A22;
  --pane-a: #FFD45A;
  --pane-b: #B9A7FF;
  --pane-c: #355CFF;
  --pane-d: #7AD7B5;
  --coral: #FF6F61;
  --dusk: #342252;
  --sun-angle: 34deg;
  --phase: 0;
  --scroll: 0;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  background:
    radial-gradient(circle at 12% 18%, rgba(255, 212, 90, .36), transparent 24vw),
    radial-gradient(circle at 88% 72%, rgba(185, 167, 255, .30), transparent 28vw),
    linear-gradient(90deg, rgba(24, 26, 34, .035) 1px, transparent 1px),
    linear-gradient(0deg, rgba(24, 26, 34, .025) 1px, transparent 1px),
    var(--porcelain);
  background-size: auto, auto, 7.5vw 7.5vw, 7.5vw 7.5vw, auto;
  font-family: "Commissioner", sans-serif;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 30;
  opacity: .18;
  background-image:
    radial-gradient(circle, rgba(24, 26, 34, .38) .7px, transparent .8px),
    linear-gradient(135deg, transparent 0 48%, rgba(255,255,255,.45) 49% 50%, transparent 51%);
  background-size: 9px 9px, 64px 64px;
  mix-blend-mode: multiply;
}

.parallel-stage { position: relative; isolation: isolate; }

.minimal-nav {
  position: fixed;
  top: 1.4rem;
  left: 1.4rem;
  right: 1.4rem;
  z-index: 40;
  display: flex;
  justify-content: space-between;
  font-family: "Azeret Mono", monospace;
  font-size: clamp(.62rem, 1vw, .78rem);
  letter-spacing: .11em;
  text-transform: uppercase;
  color: rgba(24, 26, 34, .72);
  pointer-events: none;
}

.meridian-line {
  position: fixed;
  left: -14vw;
  bottom: 4vh;
  width: 135vw;
  height: 1px;
  z-index: 28;
  transform: rotate(calc(var(--sun-angle) - 2deg));
  transform-origin: 0 50%;
  background: linear-gradient(90deg, transparent, #181A22 12%, #FFD45A 50%, #181A22 88%, transparent);
  box-shadow: 0 0 0 1px rgba(255, 212, 90, .18), 0 0 32px rgba(255, 212, 90, .32);
}

.sun-mark, .moon-mark, .divergence-pin {
  position: absolute;
  top: 50%;
  display: block;
  transform: translate(-50%, -50%);
}

.sun-mark {
  width: 1.3rem;
  height: 1.3rem;
  border: 1px solid #181A22;
  border-radius: 50%;
  background: #FFD45A;
}
.sun-one { left: 24%; }
.sun-two { left: 59%; width: .85rem; height: .85rem; }
.moon-mark { left: 80%; width: 1rem; height: 1rem; border-radius: 50%; box-shadow: inset .28rem 0 0 #342252; }
.divergence-pin { width: .48rem; height: .48rem; border-radius: 50%; background: #FF6F61; }
.pin-a { left: 35%; } .pin-b { left: 49%; background: #7AD7B5; } .pin-c { left: 68%; background: #B9A7FF; }

.act {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  padding: clamp(4rem, 7vw, 7rem) clamp(1rem, 3vw, 3rem);
}

.act::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(100deg, transparent 0 15%, rgba(255,255,255,.26) 16% 17%, transparent 18% 43%, rgba(24,26,34,.05) 44% 44.4%, transparent 45%);
}

.pane-theater {
  position: absolute;
  inset: 0;
  display: grid;
  transform-style: preserve-3d;
  perspective: 1300px;
}

.four-panes { grid-template-columns: repeat(4, 1fr); }

.glass-pane {
  position: relative;
  min-width: 0;
  overflow: hidden;
  padding: clamp(4.4rem, 8vw, 8rem) clamp(1rem, 2.4vw, 2.2rem) 2rem;
  border-left: 1px solid rgba(24, 26, 34, .34);
  border-right: 1px solid rgba(248, 244, 232, .64);
  background: color-mix(in srgb, var(--pane-a) 32%, transparent);
  box-shadow: inset 10px 0 24px rgba(255,255,255,.22), inset -14px 0 28px rgba(24,26,34,.08), 0 18px 90px rgba(24,26,34,.08);
  backdrop-filter: blur(10px);
  transform-origin: left center;
  transform: translateX(calc((var(--phase) - .5) * 10px)) rotateY(calc((var(--phase) - .5) * -11deg));
  transition: transform 700ms cubic-bezier(.2,.75,.15,1), width 700ms, opacity 700ms;
}

.pane-a { --pane-a: #FFD45A; z-index: 4; }
.pane-b { --pane-a: #B9A7FF; z-index: 3; transform-origin: right center; }
.pane-c { --pane-a: #7AD7B5; z-index: 2; }
.pane-d { --pane-a: #355CFF; z-index: 1; color: #F8F4E8; }
.pane-glow { position: absolute; inset: -20% -30%; background: radial-gradient(circle, rgba(255,255,255,.52), transparent 42%); transform: translateY(calc(var(--phase) * 18%)); }

.wordmark-slices {
  position: absolute;
  inset: 0;
  z-index: 12;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  pointer-events: none;
}

.wordmark-slices span {
  display: flex;
  align-items: center;
  white-space: nowrap;
  overflow: hidden;
  font-family: "Instrument Serif", serif;
  font-size: clamp(5rem, 18vw, 17rem);
  line-height: .78;
  letter-spacing: -.075em;
  color: rgba(24, 26, 34, .84);
  text-shadow: .06em .03em 0 rgba(185, 167, 255, .55), -.035em .02em 0 rgba(255, 111, 97, .34);
  transform: translateX(calc(var(--phase) * -2.2vw));
  mix-blend-mode: multiply;
}
.wordmark-slices span:nth-child(2) { transform: translateX(calc(-25vw + var(--phase) * 1.6vw)) translateY(5px); color: rgba(24,26,34,.74); }
.wordmark-slices span:nth-child(3) { transform: translateX(calc(-50vw + var(--phase) * -1.1vw)) translateY(-4px); }
.wordmark-slices span:nth-child(4) { transform: translateX(calc(-75vw + var(--phase) * 2.4vw)) translateY(7px); color: rgba(248,244,232,.80); }

.split-flap-time {
  font-family: "Azeret Mono", monospace;
  letter-spacing: .12em;
  font-size: .75rem;
  text-transform: uppercase;
  background: rgba(24, 26, 34, .86);
  color: #F8F4E8;
  display: inline-block;
  padding: .38rem .54rem;
  box-shadow: inset 0 -1px 0 rgba(248,244,232,.45);
}

h1, h2, .act-title, .closing-thought {
  font-family: "Instrument Serif", serif;
  font-weight: 400;
  letter-spacing: -.045em;
}

.glass-pane h1, .glass-pane h2 { margin: 1rem 0 .65rem; font-size: clamp(2.2rem, 5vw, 6.6rem); line-height: .86; }
.phase-caption { font-size: clamp(.88rem, 1.3vw, 1.18rem); line-height: 1.45; max-width: 24ch; letter-spacing: .01em; }
.pane-d .phase-caption, .pane-d .split-flap-time { color: #F8F4E8; }
.marginalia { font-family: "Nanum Pen Script", cursive; font-size: clamp(1.3rem, 2.8vw, 2.2rem); color: #FF6F61; transform: rotate(-6deg); position: absolute; z-index: 18; right: 7vw; bottom: 8vh; }

.silhouette { position: absolute; bottom: 8vh; left: 19%; width: 9rem; height: 10rem; background: #181A22; opacity: .86; }
.shadow-copy { position: absolute; inset: 0; z-index: -1; opacity: .56; filter: blur(.5px); }
.shadow-copy.lavender { background: #B9A7FF; transform: translate(20px, 14px) skew(-12deg); }
.shadow-copy.coral { background: #FF6F61; transform: translate(-18px, 18px) skew(10deg); }
.shadow-copy.green { background: #7AD7B5; transform: translate(24px, -12px) skew(14deg); }
.shadow-copy.blue { background: #355CFF; transform: translate(-22px, -8px) skew(-9deg); }
.shadow-copy.solar { background: #FFD45A; transform: translate(12px, 22px) skew(16deg); }
.train-door { border-radius: 4rem 4rem 0 0; width: 7rem; }
.train-door::after { content: ""; position: absolute; inset: 18% 24%; border: 2px solid #F8F4E8; }
.chair-window { clip-path: polygon(16% 10%, 82% 10%, 82% 30%, 62% 30%, 62% 73%, 92% 73%, 92% 90%, 11% 90%, 11% 73%, 40% 73%, 40% 30%, 16% 30%); }
.umbrella { width: 11rem; height: 7rem; clip-path: polygon(50% 0, 100% 58%, 66% 47%, 50% 62%, 32% 47%, 0 58%); }
.cup { width: 7rem; height: 5rem; border-radius: .4rem .4rem 2rem 2rem; }
.cup::after { content: ""; position: absolute; right: -2rem; top: 1rem; width: 2.4rem; height: 2.3rem; border: .65rem solid #181A22; border-left: 0; border-radius: 0 2rem 2rem 0; }
.steam { position: absolute; top: -4rem; width: 1.6rem; height: 4rem; border-left: 2px solid #181A22; border-radius: 50%; opacity: .72; }
.steam-a { left: 1.8rem; transform: rotate(-18deg); } .steam-b { left: 4rem; transform: rotate(16deg); border-color: #7AD7B5; }

.act-label { position: absolute; left: 2rem; top: 6rem; font-family: "Azeret Mono", monospace; font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; z-index: 5; }
.seven-panes { grid-template-columns: repeat(7, 1fr); inset: 0 3vw; }
.narrow-pane { background: rgba(255, 212, 90, .18); transform: rotateY(calc((var(--phase) * 28deg) - 14deg)) scaleX(calc(.72 + var(--phase) * .5)); padding-top: 6rem; }
.narrow-pane:nth-child(even) { background: rgba(185, 167, 255, .25); transform-origin: right; }
.narrow-pane:nth-child(3n) { background: rgba(122, 215, 181, .28); }
.active-shutter { background: rgba(53, 92, 255, .30); }
.ruler-lines { position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent 0 22px, rgba(24,26,34,.18) 23px, transparent 24px); }
.noon-object { left: 58%; bottom: 18vh; width: 6rem; height: 16rem; clip-path: polygon(36% 0, 64% 0, 64% 62%, 94% 100%, 6% 100%, 36% 62%); z-index: 9; }
.act-title { position: relative; z-index: 10; font-size: clamp(4rem, 13vw, 13rem); line-height: .8; margin: 0; color: rgba(24,26,34,.88); text-shadow: 12px 9px 0 rgba(185,167,255,.28), -10px 7px 0 rgba(255,212,90,.34); }
.act-copy { position: absolute; z-index: 10; right: 8vw; bottom: 15vh; background: rgba(248,244,232,.72); padding: 1rem; border-left: 2px solid #FF6F61; }

.act-fold { background: linear-gradient(130deg, #F8F4E8 0 48%, rgba(255,111,97,.18) 48.2% 50%, rgba(185,167,255,.28) 50.3% 100%); }
.folded-vellum { position: absolute; inset: 7vh 12vw; background: rgba(248,244,232,.48); border: 1px solid rgba(24,26,34,.28); transform: rotate(-11deg) skewX(-7deg); box-shadow: 30px 28px 0 rgba(122,215,181,.23), -22px -16px 0 rgba(255,212,90,.28); }
.huge-time { position: absolute; left: 8vw; top: 20vh; z-index: 10; font-size: clamp(1rem, 2vw, 1.5rem); }
.diagonal-caption { position: absolute; right: 11vw; top: 37vh; z-index: 10; transform: rotate(-11deg); background: #F8F4E8; padding: .8rem 1rem; }
.registration-cross { position: absolute; width: 3rem; height: 3rem; z-index: 7; }
.registration-cross::before, .registration-cross::after { content: ""; position: absolute; background: #FF6F61; }
.registration-cross::before { left: 50%; top: 0; width: 1px; height: 100%; } .registration-cross::after { top: 50%; left: 0; height: 1px; width: 100%; }
.cross-one { left: 14vw; bottom: 18vh; } .cross-two { right: 19vw; top: 17vh; transform: rotate(22deg); }
.stairwell { left: 39%; bottom: 9vh; width: 18rem; height: 18rem; clip-path: polygon(0 80%, 24% 80%, 24% 65%, 42% 65%, 42% 50%, 60% 50%, 60% 35%, 78% 35%, 78% 20%, 100% 20%, 100% 100%, 0 100%); }

.act-blue { background: #342252; color: #F8F4E8; }
.blue-pane-stack { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1.2fr .9fr; }
.night-pane { position: relative; min-height: 100vh; background: rgba(53, 92, 255, .22); border-color: rgba(248,244,232,.26); transform: translateX(calc(var(--phase) * 26px)) rotateY(calc(var(--phase) * -13deg)); }
.night-pane:nth-child(2) { background: rgba(185,167,255,.20); transform: translateX(calc(var(--phase) * -22px)); }
.night-pane:nth-child(3) { background: rgba(122,215,181,.12); }
.blue-caption { position: absolute; right: 9vw; bottom: 14vh; z-index: 9; color: #F8F4E8; }
.duplicate-moons { position: absolute; right: 15vw; top: 18vh; z-index: 8; }
.duplicate-moons span { display: inline-block; width: 6rem; height: 6rem; margin-left: -1.1rem; border-radius: 50%; background: #FFD45A; box-shadow: inset 1.6rem 0 0 #342252; opacity: .86; }
.duplicate-moons span:nth-child(2) { background: #B9A7FF; transform: translateY(1.8rem); opacity: .55; }
.plant { left: 18vw; width: 10rem; height: 18rem; background: #181A22; clip-path: polygon(44% 100%, 56% 100%, 56% 54%, 96% 32%, 59% 44%, 78% 8%, 52% 36%, 31% 0, 43% 42%, 0 22%, 44% 56%); }

.act-convergence { background: #F8F4E8; }
.horizon-system { position: absolute; inset: 0; z-index: 3; }
.horizon { position: absolute; left: 0; right: 0; height: 1px; top: 52%; background: #181A22; transform: translateY(var(--gap)); opacity: .72; }
.h1 { --gap: -7px; background: #355CFF; } .h2 { --gap: -2px; background: #FFD45A; } .h3 { --gap: 3px; background: #7AD7B5; } .h4 { --gap: 9px; background: #FF6F61; }
.convergence-panes { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(2px, .28vw, 6px); padding: 0 4vw; }
.final-pane { min-height: 100vh; background: rgba(185,167,255,.13); transform: scaleX(calc(.94 + var(--phase) * .055)); }
.final-pane:nth-child(2) { background: rgba(255,212,90,.16); } .final-pane:nth-child(3) { background: rgba(122,215,181,.16); } .final-pane:nth-child(4) { background: rgba(255,111,97,.12); }
.closing-thought { position: relative; z-index: 10; font-size: clamp(4rem, 12vw, 13rem); text-align: center; max-width: 10ch; line-height: .82; margin: 0; color: #181A22; }
.final-note { left: 9vw; right: auto; color: #342252; }

.is-active .glass-pane { animation: registrationJitter 5s steps(2, end) infinite; }
.glass-pane.is-hovered { transform: translateZ(28px) rotateY(0deg) scaleX(1.025); }

@keyframes registrationJitter {
  0%, 100% { filter: none; }
  48% { filter: drop-shadow(3px -2px 0 rgba(185,167,255,.24)); }
  50% { filter: drop-shadow(-2px 2px 0 rgba(255,111,97,.22)); }
}

@media (max-width: 760px) {
  .four-panes { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); }
  .wordmark-slices { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); }
  .seven-panes { grid-template-columns: repeat(7, 24vw); overflow: hidden; }
  .act-title, .closing-thought { font-size: clamp(3.7rem, 18vw, 7rem); }
  .silhouette { transform: scale(.72); transform-origin: bottom left; }
}