:root {
  --midnight: #0B1026;
  --paper: #F6F1E8;
  --frost: #C9D7FF;
  --mint: #7CFFCB;
  --magenta: #FF6B9A;
  --violet: #8B5CF6;
  --brass: #F8D347;
  --graphite: #202638;
  --ease: cubic-bezier(.22, .78, .24, 1);
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: "Manrope", "Inter", system-ui, sans-serif;
  color: var(--paper);
  background: var(--midnight);
  overflow-x: hidden;
}

.ambient-field {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(circle at 76% 14%, rgba(139, 92, 246, .26), transparent 24rem),
    linear-gradient(115deg, #0B1026 0%, #0B1026 54%, rgba(32, 38, 56, .94) 54.2%, rgba(32, 38, 56, .5) 68%, #0B1026 100%);
}

.grain {
  position: absolute;
  inset: 0;
  opacity: .18;
  background-image:
    linear-gradient(90deg, rgba(246, 241, 232, .04) 1px, transparent 1px),
    linear-gradient(0deg, rgba(246, 241, 232, .035) 1px, transparent 1px);
  background-size: 42px 42px;
}

.fixed-spine {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 37vw;
  width: 1px;
  background: linear-gradient(#C9D7FF00, #C9D7FF, #F8D347, #C9D7FF00);
  box-shadow: 0 0 24px rgba(124, 255, 203, .24);
}

.horizon-glow {
  position: absolute;
  right: -6vw;
  top: 42vh;
  width: 57vw;
  height: 2px;
  background: linear-gradient(90deg, transparent, #8B5CF6, #FF6B9A, #F8D347);
  filter: blur(.2px) drop-shadow(0 0 18px rgba(255, 107, 154, .65));
  transform: rotate(-7deg);
}

.corner-index {
  position: fixed;
  z-index: 20;
  top: 24px;
  left: 24px;
  display: grid;
  gap: 14px;
  width: 178px;
  padding: 16px 14px;
  border: 1px solid rgba(201, 215, 255, .24);
  background: rgba(11, 16, 38, .58);
  backdrop-filter: blur(18px);
}

.brand {
  font-family: "Bebas Neue", Impact, sans-serif;
  color: var(--paper);
  font-size: 1.38rem;
  letter-spacing: .08em;
  line-height: 1;
}

.jp-label,
.micro-note,
.scene-kicker {
  font-family: "Noto Sans JP", "Manrope", sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: .66rem;
}

.jp-label { color: var(--frost); opacity: .76; }

.chapter-dots {
  display: flex;
  gap: 8px;
}

.index-dot {
  position: relative;
  width: 24px;
  height: 24px;
  color: var(--frost);
  text-decoration: none;
  border: 1px solid rgba(201, 215, 255, .36);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: .8rem;
  transition: .5s var(--ease);
}

.index-dot.active,
.index-dot.stamped {
  color: var(--midnight);
  border-color: var(--brass);
  background: var(--brass);
  box-shadow: 0 0 18px rgba(248, 211, 71, .42);
}

main {
  position: relative;
  z-index: 1;
}

.scene {
  min-height: 100vh;
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 20px;
  padding: 8vh 6vw 7vh;
  overflow: hidden;
  isolation: isolate;
}

.scene::before {
  content: "";
  position: absolute;
  inset: 9vh 5vw;
  border-top: 1px solid rgba(201, 215, 255, .22);
  border-bottom: 1px solid rgba(201, 215, 255, .1);
  transform: skewY(-3deg);
  z-index: -1;
}

.night-scene {
  background: linear-gradient(120deg, rgba(11, 16, 38, .98), rgba(11, 16, 38, .92) 58%, rgba(139, 92, 246, .16));
}

.paper-scene {
  color: var(--graphite);
  background:
    radial-gradient(circle at 66% 52%, rgba(124, 255, 203, .22), transparent 22rem),
    linear-gradient(113deg, var(--paper) 0 56%, #C9D7FF 56.3% 56.7%, rgba(246, 241, 232, .94) 56.9% 100%);
}

.violet-shift { background: linear-gradient(125deg, #0B1026 0%, #202638 54%, rgba(139, 92, 246, .5) 100%); }

.final-scene {
  color: var(--graphite);
  background:
    linear-gradient(100deg, #F6F1E8 0 36%, rgba(248, 211, 71, .28) 36.2% 52%, #C9D7FF 52.2% 52.6%, #F6F1E8 53% 100%);
}

.date-column {
  grid-column: 1 / 5;
  align-self: stretch;
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 78vh;
  padding-top: 12vh;
}

.scene-kicker {
  margin: 0;
  color: var(--mint);
}

.paper-scene .scene-kicker,
.final-scene .scene-kicker { color: var(--violet); }

.large-number {
  align-self: center;
  margin-left: -8vw;
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: clamp(10rem, 32vw, 30rem);
  line-height: .72;
  letter-spacing: -.035em;
  color: transparent;
  -webkit-text-stroke: 2px rgba(246, 241, 232, .72);
  text-shadow: 0 0 34px rgba(124, 255, 203, .18);
  white-space: nowrap;
}

.paper-scene .large-number,
.final-scene .large-number {
  -webkit-text-stroke-color: rgba(32, 38, 56, .66);
  text-shadow: 0 0 28px rgba(255, 107, 154, .2);
}

.vertical-tag {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: "Bebas Neue", Impact, sans-serif;
  letter-spacing: .18em;
  font-size: 1.4rem;
  color: var(--brass);
  margin: 0 0 1vh 5vw;
}

.instruction-panel {
  grid-column: 5 / 9;
  align-self: center;
  padding: clamp(24px, 4vw, 54px);
  transform: translateY(-5vh) rotate(-1deg);
  border: 1px solid rgba(201, 215, 255, .22);
  box-shadow: 0 24px 80px rgba(11, 16, 38, .18);
}

.instruction-panel h1,
.instruction-panel h2 {
  font-family: "Bebas Neue", Impact, sans-serif;
  font-weight: 400;
  letter-spacing: .055em;
  font-size: clamp(3.3rem, 7vw, 7rem);
  line-height: .88;
  margin: 0 0 22px;
}

.instruction-panel p {
  margin: 0 0 22px;
  max-width: 34rem;
  font-size: clamp(1rem, 1.35vw, 1.22rem);
  line-height: 1.8;
}

.dark-panel {
  background: rgba(11, 16, 38, .54);
  backdrop-filter: blur(20px);
}

.light-panel,
.final-panel {
  background: rgba(246, 241, 232, .76);
  border-color: rgba(32, 38, 56, .16);
}

.offset-low { transform: translateY(10vh) rotate(1.4deg); }
.micro-note { color: var(--frost); }
.light-panel .micro-note,
.final-panel .micro-note { color: var(--graphite); opacity: .72; }
.mint { color: var(--mint); background: var(--graphite); padding: 1px 5px; }
.jp { font-family: "Noto Sans JP", "Manrope", sans-serif; }

.geometry-scene {
  grid-column: 9 / 13;
  align-self: center;
  justify-self: stretch;
  position: relative;
  min-height: 520px;
  transform: translateX(2vw) rotate(2deg);
}

.date-wheel,
.aperture {
  width: min(41vw, 560px);
  max-width: 100%;
  filter: drop-shadow(0 24px 50px rgba(11, 16, 38, .35));
}

.wheel-ring,
.aperture-track {
  fill: rgba(201, 215, 255, .035);
  stroke: rgba(201, 215, 255, .56);
  stroke-width: 2;
}
.wheel-ring.faint { stroke-dasharray: 6 18; opacity: .8; }
.sunrise-arc { fill: none; stroke: var(--magenta); stroke-width: 12; stroke-linecap: round; stroke-dasharray: 470; animation: arcResolve 7s var(--ease) infinite alternate; }
.horizon-line { stroke: var(--brass); stroke-width: 2; filter: drop-shadow(0 0 12px #F8D347); }
.calendar-holes circle { fill: var(--mint); animation: tickPulse 2.8s ease-in-out infinite; }

.hover-note {
  position: absolute;
  right: 0;
  bottom: 5%;
  max-width: 220px;
  padding: 12px 14px;
  font-size: .76rem;
  line-height: 1.5;
  letter-spacing: .04em;
  color: var(--paper);
  background: rgba(11, 16, 38, .82);
  border: 1px solid rgba(124, 255, 203, .35);
  opacity: 0;
  transform: translateY(14px);
  transition: .45s var(--ease);
}

.geometry-scene:hover .hover-note,
.geometry-scene.note-open .hover-note {
  opacity: 1;
  transform: translateY(0);
}

.orbit-field { min-height: 540px; }
.orbit-ring {
  position: absolute;
  border: 1px solid rgba(32, 38, 56, .22);
  border-radius: 50%;
  animation: slowRotate 18s linear infinite;
}
.ring-one { inset: 4% 8% 18% 2%; }
.ring-two { inset: 19% 4% 4% 25%; animation-direction: reverse; }
.orbit-dot {
  position: absolute;
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 50%;
  background: var(--magenta);
  box-shadow: 0 0 0 11px rgba(255, 107, 154, .13), 0 0 24px rgba(255, 107, 154, .6);
  cursor: pointer;
}
.dot-a { left: 18%; top: 8%; }
.dot-b { right: 12%; bottom: 15%; background: var(--mint); box-shadow: 0 0 0 11px rgba(124, 255, 203, .16), 0 0 24px rgba(124, 255, 203, .55); }
.orbit-field.paused .orbit-ring { animation-play-state: paused; }

.meeting-slip {
  position: absolute;
  left: 15%;
  top: 38%;
  padding: 24px 58px 24px 22px;
  background: var(--paper);
  border: 1px solid rgba(32, 38, 56, .22);
  transform: rotate(-8deg) skewX(-4deg);
  font-size: .8rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.meeting-slip strong { font-family: "Bebas Neue", Impact, sans-serif; font-size: 2rem; letter-spacing: .08em; }

.minute-stack .tab {
  position: absolute;
  width: 72%;
  height: 90px;
  left: 8%;
  background: rgba(246, 241, 232, .92);
  border: 1px solid rgba(201, 215, 255, .34);
  color: var(--graphite);
  transform: skewY(-7deg);
  box-shadow: 22px 22px 0 rgba(139, 92, 246, .22);
}
.tab span { font-family: "Bebas Neue", Impact, sans-serif; font-size: 4rem; color: var(--graphite); padding-left: 26px; }
.tab-1 { top: 5%; }
.tab-2 { top: 23%; left: 16%; }
.tab-3 { top: 41%; left: 2%; }
.tab-4 { top: 59%; left: 22%; background: var(--brass); }
.dash-constellation { position: absolute; right: 7%; top: 9%; width: 110px; height: 390px; background-image: radial-gradient(circle, #7CFFCB 3px, transparent 4px); background-size: 30px 30px; transform: rotate(18deg); }

.aperture-progress {
  fill: none;
  stroke: var(--magenta);
  stroke-width: 18;
  stroke-linecap: round;
  stroke-dasharray: 886;
  stroke-dashoffset: 886;
  transform-origin: center;
  transform: rotate(-90deg);
  transition: stroke-dashoffset 1.4s var(--ease);
}
.scene.is-visible .aperture-progress { stroke-dashoffset: 54; }
.slanted-horizon { stroke: var(--brass); stroke-width: 10; stroke-linecap: round; }
.mint-path { fill: none; stroke: var(--mint); stroke-width: 2; stroke-dasharray: 8 14; }
.message-icon { position: absolute; left: 7%; bottom: 18%; width: 112px; height: 78px; }
.message-icon span { position: absolute; inset: 10px 0 0 16px; border: 2px solid var(--graphite); background: rgba(246, 241, 232, .6); }
.message-icon span:first-child { transform: translate(-16px, -10px); border-color: var(--violet); }

.stamp-card {
  position: absolute;
  left: 8%;
  top: 20%;
  width: min(31vw, 430px);
  padding: 34px;
  border: 2px solid var(--graphite);
  background: rgba(246, 241, 232, .84);
  transform: rotate(-7deg);
  box-shadow: 24px 24px 0 rgba(255, 107, 154, .32);
  transition: .6s var(--ease);
}
.stamp-card.locked { transform: rotate(-3deg) scale(1.04); box-shadow: 14px 14px 0 rgba(124, 255, 203, .42); }
.stamp-card strong { display: block; font-family: "Bebas Neue", Impact, sans-serif; font-size: clamp(5rem, 10vw, 9rem); line-height: .8; letter-spacing: .03em; color: var(--graphite); }
.stamp-top { color: var(--magenta); text-transform: uppercase; letter-spacing: .22em; font-size: .78rem; }
.afterglow-sun { position: absolute; right: 0; bottom: 12%; width: 280px; height: 140px; background: var(--brass); border-radius: 280px 280px 0 0; border-bottom: 4px solid var(--graphite); filter: drop-shadow(0 0 24px rgba(248, 211, 71, .54)); }
.expanding-dots { position: absolute; right: 26%; top: 20%; display: flex; gap: 28px; }
.expanding-dots i { width: 18px; height: 18px; border-radius: 50%; background: var(--violet); animation: dotExpand 2.5s ease-in-out infinite; }
.expanding-dots i:nth-child(2) { animation-delay: .3s; background: var(--magenta); }
.expanding-dots i:nth-child(3) { animation-delay: .6s; background: var(--mint); }

.stamp-button {
  border: 1px solid var(--graphite);
  background: transparent;
  color: var(--graphite);
  padding: 15px 18px;
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: 1.2rem;
  letter-spacing: .13em;
  cursor: pointer;
  transition: .35s var(--ease);
}
.stamp-button:hover { background: var(--graphite); color: var(--paper); transform: translate(6px, -6px); box-shadow: -6px 6px 0 var(--brass); }

.scene .instruction-panel,
.scene .geometry-scene,
.scene .date-column { opacity: .35; transform-style: preserve-3d; transition: opacity .8s var(--ease), transform .8s var(--ease); }
.scene.is-visible .instruction-panel,
.scene.is-visible .geometry-scene,
.scene.is-visible .date-column { opacity: 1; }
.scene.is-visible .geometry-scene { transform: translateX(0) rotate(0deg); }

@keyframes arcResolve { from { stroke-dashoffset: 430; } to { stroke-dashoffset: 80; } }
@keyframes tickPulse { 50% { opacity: .35; transform: translateY(4px); } }
@keyframes slowRotate { to { transform: rotate(360deg); } }
@keyframes dotExpand { 50% { transform: scale(1.7); opacity: .55; } }

@media (max-width: 900px) {
  .corner-index { top: 12px; left: 12px; width: calc(100% - 24px); grid-template-columns: 1fr auto; }
  .jp-label { display: none; }
  .scene { grid-template-columns: 1fr; padding: 18vh 22px 8vh; gap: 28px; }
  .date-column, .instruction-panel, .geometry-scene { grid-column: 1; min-height: auto; }
  .date-column { padding-top: 0; }
  .large-number { margin-left: -24px; font-size: clamp(8rem, 42vw, 15rem); }
  .vertical-tag { writing-mode: horizontal-tb; transform: none; margin: 0; }
  .instruction-panel { transform: rotate(-1deg); }
  .geometry-scene { min-height: 420px; }
  .stamp-card { width: 86vw; }
}