:root {
  --void: #1a0e2e;
  --orchid: #2d1b4e;
  --gilt: #d4a853;
  --violet: #9b4dca;
  --rose: #c4a1b0;
  --ivory: #f0e6d3;
  --cyan: #7fdbca;
  --shadow: #120a1f;
}

/* Design tokens: IntersectionObserver 60% threshold. Each card flips once as it enters the viewport center IntersectionObserver. Vines should appear to grow from clock gears toward the edges of cards and sections. Intertwined with the clockwork imagery are **SVG botanical illustration* — stylized roses Space Mono" (Google Fonts */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  background: radial-gradient(circle at 70% 10%, rgba(155, 77, 202, 0.24), transparent 32%), linear-gradient(145deg, var(--shadow), var(--void) 48%, var(--orchid));
  color: var(--ivory);
  font-family: "Libre Baskerville", Georgia, serif;
}

.particle-field {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.clock-tower {
  position: fixed;
  z-index: 10;
  inset: 0 auto 0 0;
  width: 72px;
  background: linear-gradient(180deg, var(--shadow), var(--void) 35%, #211238 100%);
  border-right: 2px solid var(--gilt);
  box-shadow: 0 0 35px rgba(155, 77, 202, 0.35), inset -12px 0 22px rgba(18, 10, 31, 0.8);
  transition: width 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  overflow: hidden;
}

.clock-tower:hover { width: 260px; }

.clock-tower::before, .clock-tower::after {
  content: "";
  position: absolute;
  inset: 18px 10px;
  border-left: 1px solid rgba(212, 168, 83, 0.5);
  border-right: 1px solid rgba(212, 168, 83, 0.5);
  pointer-events: none;
}

.tower-cap, .tower-base {
  height: 86px;
  display: grid;
  place-items: center;
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: 1.3rem;
  color: var(--gilt);
  text-shadow: 0 0 12px var(--violet);
}

.tower-base { position: absolute; bottom: 0; width: 100%; }

.tower-nav {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 6vh, 54px);
  padding-top: 8vh;
}

.tower-link {
  display: flex;
  align-items: center;
  gap: 18px;
  width: 260px;
  padding-left: 17px;
  color: var(--rose);
  text-decoration: none;
}

.mini-clock {
  position: relative;
  flex: 0 0 38px;
  height: 38px;
  border: 2px solid var(--rose);
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(196, 161, 176, 0.35);
}

.mini-clock::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px dotted rgba(240, 230, 211, 0.45);
  border-radius: 50%;
}

.mini-clock i, .mini-clock b {
  position: absolute;
  left: 17px;
  top: 8px;
  width: 2px;
  height: 12px;
  background: currentColor;
  transform-origin: 50% 11px;
}

.mini-clock b { height: 9px; top: 11px; transform: rotate(90deg); }
.tower-link[data-hour="2"] .mini-clock i { transform: rotate(60deg); }
.tower-link[data-hour="4"] .mini-clock i { transform: rotate(120deg); }
.tower-link[data-hour="7"] .mini-clock i { transform: rotate(210deg); }
.tower-link[data-hour="10"] .mini-clock i { transform: rotate(300deg); }

.tower-link.active { color: var(--gilt); }
.tower-link.active .mini-clock { border-color: var(--gilt); box-shadow: 0 0 18px var(--gilt), 0 0 30px var(--violet); }
.tower-link.active .mini-clock i { transform: rotate(0deg); }
.tower-link.active .mini-clock b { transform: rotate(0deg); }

.nav-label {
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity 0.25s ease, transform 0.35s ease;
  font-family: "Caveat", cursive;
  font-size: 1.8rem;
  color: var(--gilt);
  white-space: nowrap;
  text-shadow: 0 0 16px var(--violet);
}

.clock-tower:hover .nav-label { opacity: 1; transform: translateX(0); }

.temporal-corridor {
  position: relative;
  z-index: 1;
  margin-left: 72px;
  scroll-snap-type: y proximity;
}

.era {
  position: relative;
  min-height: 120vh;
  scroll-snap-align: start;
  display: grid;
  place-items: center;
  padding: 8vh 7vw 8vh 12vw;
}

.opening-era { min-height: 100vh; }

.timeline-thread {
  position: absolute;
  left: 3.5vw;
  top: 0;
  width: 80px;
  height: 100%;
  min-height: 4200px;
  overflow: visible;
  z-index: 1;
  pointer-events: none;
}

#timelinePath {
  fill: none;
  stroke: url(#threadGradient);
  stroke-width: 2;
  filter: drop-shadow(0 0 8px var(--violet));
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.timeline-node {
  fill: var(--violet);
  filter: drop-shadow(0 0 10px var(--violet));
  animation: pulseNode 2.4s ease-in-out infinite;
}

.roman-watermark {
  position: absolute;
  right: 5vw;
  top: 10vh;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(11rem, 27vw, 28rem);
  font-style: italic;
  line-height: 1;
  opacity: 0.04;
  color: var(--rose);
  pointer-events: none;
}

.assembly-stage {
  position: relative;
  display: grid;
  place-items: center;
  width: min(92vw, 920px);
  min-height: 760px;
}

.master-clock {
  position: absolute;
  width: min(82vw, 760px);
  opacity: 0.92;
}

.gear-ring circle, .gear-ring path, .clock-hands, .card-art circle, .card-art path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.gear-ring, .clock-hands, .card-art { color: var(--gilt); filter: drop-shadow(0 0 8px currentColor); }
.gear-a { transform-origin: 400px 400px; animation: gearDraw 2s ease both 0.3s, rotateGear 18s linear infinite 2s; }
.gear-b { color: var(--violet); transform-origin: 240px 270px; animation: gearDraw 1.8s ease both 0.7s, rotateGearReverse 14s linear infinite 2.2s; }
.gear-c { color: var(--cyan); transform-origin: 565px 545px; animation: gearDraw 1.8s ease both 1s, rotateGear 16s linear infinite 2.4s; }
.clock-hands { color: var(--gilt); animation: tickHands 8s steps(12) infinite 2.8s; transform-origin: 400px 400px; }

.botanical-vine {
  fill: none;
  stroke: var(--rose) !important;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000;
  filter: drop-shadow(0 0 8px var(--rose));
  transition: stroke-dashoffset 3s ease-in-out;
}

.botanical-vine.visible, .opening-era.loaded .intro-vine { stroke-dashoffset: 0; }

.written-title {
  position: relative;
  z-index: 2;
  margin: 0;
  overflow: hidden;
  font-family: "Caveat", cursive;
  font-size: clamp(4rem, 11vw, 9rem);
  line-height: 1.05;
  letter-spacing: 0.02em;
  color: var(--gilt);
  text-shadow: 0 0 20px var(--violet), 0 0 35px rgba(212, 168, 83, 0.45);
}

.written-title span {
  display: block;
  transform: translateY(105%);
  animation: writeTitle 1.4s cubic-bezier(0.2, 0.9, 0.2, 1) forwards 3.5s;
}

.opening-copy {
  position: relative;
  z-index: 2;
  margin-top: 11rem;
  max-width: 620px;
  text-align: center;
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: clamp(1.4rem, 2.5vw, 2.2rem);
  color: var(--rose);
  opacity: 0;
  animation: fadeUp 1.2s ease forwards 4.5s;
}

.scroll-hand {
  position: absolute;
  bottom: 58px;
  width: 2px;
  height: 64px;
  background: var(--gilt);
  box-shadow: 0 0 14px var(--gilt);
  transform-origin: 50% 8px;
  animation: pendulum 1.9s ease-in-out infinite 4.7s;
}
.scroll-hand::after { content: ""; position: absolute; left: -7px; bottom: -8px; border: 8px solid transparent; border-top-color: var(--gilt); }

.chrono-card {
  position: relative;
  z-index: 2;
  width: min(85vw, 720px);
  aspect-ratio: 4 / 3;
  perspective: 1200px;
}

.align-left { justify-self: start; }
.align-right { justify-self: end; }

.chrono-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.chrono-card.flipped .chrono-card-inner { transform: rotateY(180deg); }

.chrono-card-front, .chrono-card-back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border: 2px solid var(--gilt);
  box-shadow: 0 0 26px rgba(155, 77, 202, 0.5), inset 0 0 40px rgba(18, 10, 31, 0.7);
  overflow: hidden;
}

.chrono-card-front {
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 50% 50%, rgba(155, 77, 202, 0.28), transparent 45%), linear-gradient(135deg, var(--shadow), var(--orchid));
}

.chrono-card-front::before, .chrono-card-back::before {
  content: "";
  position: absolute;
  inset: 16px;
  border: 1px solid rgba(212, 168, 83, 0.55);
  pointer-events: none;
}

.chrono-card-back {
  transform: rotateY(180deg);
  padding: clamp(28px, 5vw, 58px);
  background-color: var(--ivory);
  background-image: repeating-conic-gradient(from 20deg, rgba(26, 14, 46, 0.035) 0 9deg, transparent 9deg 18deg);
  color: var(--void);
}

.data-readout, .temporal-data {
  font-family: "Space Mono", monospace;
  color: var(--cyan);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-shadow: 0 0 10px var(--cyan);
}

.data-readout { position: absolute; top: 28px; left: 30px; }

.card-art { width: 82%; height: 82%; color: var(--gilt); }
.orchid-face .card-art { color: var(--violet); }
.greenhouse-face .card-art { color: var(--cyan); }
.paradox-face .card-art { color: var(--gilt); }

.kicker {
  margin: 0 0 0.5rem;
  font-family: "Space Mono", monospace;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--violet);
}

.chrono-card h2 {
  margin: 0 0 1rem;
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: clamp(1.9rem, 4vw, 3.6rem);
  line-height: 1;
  color: var(--void);
}

.chrono-card p {
  font-size: clamp(1rem, 1.2vw, 1.15rem);
  line-height: 1.75;
}

@keyframes gearDraw { from { opacity: 0; stroke-dasharray: 800; stroke-dashoffset: 800; } to { opacity: 1; stroke-dasharray: 800; stroke-dashoffset: 0; } }
@keyframes rotateGear { to { transform: rotate(360deg); } }
@keyframes rotateGearReverse { to { transform: rotate(-360deg); } }
@keyframes tickHands { to { transform: rotate(360deg); } }
@keyframes writeTitle { to { transform: translateY(0); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pendulum { 0%, 100% { transform: rotate(-24deg); } 50% { transform: rotate(24deg); } }
@keyframes pulseNode { 0%, 100% { r: 7; opacity: 0.8; } 50% { r: 11; opacity: 1; } }

@media (max-width: 760px) {
  .clock-tower { width: 58px; }
  .clock-tower:hover { width: 220px; }
  .temporal-corridor { margin-left: 58px; }
  .era { padding: 7vh 5vw 7vh 16vw; }
  .timeline-thread { left: 0.8vw; }
  .align-left, .align-right { justify-self: center; }
  .chrono-card { width: min(88vw, 520px); }
  .chrono-card-back { padding: 24px; }
}