:root {
  /* Design tokens retained: Intersection Observer (scroll-triggered fade-ins visibility threshold. Playfair Display (700 italic (Google Fonts ornamental stroke contrast 1920s lettering */
  --lacquer: #0C0A08;
  --walnut: #1A1610;
  --amber: #C9A84C;
  --rosewood: #6B3A2A;
  --bronze: #7A6B52;
  --pale: #E8D5A3;
  --parchment: #B8A88A;
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1.0);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--lacquer);
  color: var(--parchment);
  font-family: "Karla", sans-serif;
  font-weight: 400;
}

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  opacity: 1;
  background-image: radial-gradient(rgba(232, 213, 163, 0.18) 1px, transparent 1px);
  background-size: 8px 8px;
  mix-blend-mode: screen;
  opacity: 0.03;
}

.wayfinder {
  position: fixed;
  top: 32px;
  left: 32px;
  z-index: 10;
  min-width: 12px;
  min-height: 12px;
}

.nav-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 18px rgba(201, 168, 76, 0.5);
  transition: transform 400ms var(--ease), box-shadow 400ms var(--ease);
}

.nav-list {
  position: absolute;
  top: -10px;
  left: -10px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 154px;
  padding: 34px 20px 18px;
  border: 1px solid rgba(201, 168, 76, 0.3);
  background: rgba(26, 22, 16, 0.88);
  opacity: 0;
  transform: scale(0.75) translate(-16px, -16px);
  transform-origin: 18px 18px;
  pointer-events: none;
  transition: opacity 400ms var(--ease), transform 400ms var(--ease);
}

.wayfinder:hover .nav-dot { transform: scale(1.35); box-shadow: 0 0 28px rgba(201, 168, 76, 0.7); }
.wayfinder:hover .nav-list { opacity: 1; transform: scale(1) translate(0, 0); pointer-events: auto; }

.nav-list a {
  color: var(--bronze);
  font-family: "Inconsolata", monospace;
  font-size: 0.75rem;
  font-weight: 300;
  letter-spacing: 0.12em;
  text-decoration: none;
  text-transform: uppercase;
  transition: color 400ms var(--ease);
}

.nav-list a:hover { color: var(--amber); }

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

.scene {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-top: 1px solid rgba(201, 168, 76, 0.3);
  isolation: isolate;
}

.hero-scene { border-top: 0; }
.coda-scene { min-height: 50vh; }

.scene::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -3;
  background: radial-gradient(circle at 50% 45%, rgba(26, 22, 16, 0.9), transparent 44%), var(--lacquer);
}

.bokeh-field, .bokeh {
  position: absolute;
  pointer-events: none;
}

.bokeh-field { inset: 0; z-index: -2; }

.bokeh {
  display: block;
  width: var(--size);
  height: var(--size);
  left: var(--x);
  top: var(--y);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201, 168, 76, var(--alpha)) 0%, transparent 70%);
  filter: blur(40px);
  animation: drift var(--duration) ease-in-out infinite alternate, pulse calc(var(--duration) * 1.4) ease-in-out infinite alternate;
}

.hero-bokeh .b1 { --size: 300px; --x: 12%; --y: 8%; --alpha: 0.15; --duration: 16s; }
.hero-bokeh .b2 { --size: 220px; --x: 68%; --y: 18%; --alpha: 0.12; --duration: 11s; }
.hero-bokeh .b3 { --size: 180px; --x: 46%; --y: 64%; --alpha: 0.13; --duration: 18s; }
.hero-bokeh .b4 { --size: 120px; --x: 80%; --y: 70%; --alpha: 0.1; --duration: 9s; }
.hero-bokeh .b5 { --size: 260px; --x: -4%; --y: 58%; --alpha: 0.11; --duration: 20s; }
.hero-bokeh .b6 { --size: 90px; --x: 28%; --y: 30%; --alpha: 0.14; --duration: 8s; }
.hero-bokeh .b7 { --size: 160px; --x: 58%; --y: -2%; --alpha: 0.1; --duration: 14s; }

.morning-bokeh .b1 { --size: 130px; --x: 6%; --y: 14%; --alpha: 0.1; --duration: 12s; }
.morning-bokeh .b2 { --size: 240px; --x: 72%; --y: 26%; --alpha: 0.12; --duration: 18s; }
.morning-bokeh .b3 { --size: 90px; --x: 58%; --y: 72%; --alpha: 0.11; --duration: 10s; }
.morning-bokeh .b4 { --size: 180px; --x: 18%; --y: 76%; --alpha: 0.08; --duration: 19s; }
.morning-bokeh .b5 { --size: 110px; --x: 82%; --y: 6%; --alpha: 0.1; --duration: 14s; }

.afternoon-bokeh .b1 { --size: 210px; --x: 11%; --y: 20%; --alpha: 0.1; --duration: 15s; }
.afternoon-bokeh .b2 { --size: 105px; --x: 70%; --y: 12%; --alpha: 0.13; --duration: 9s; }
.afternoon-bokeh .b3 { --size: 260px; --x: 68%; --y: 65%; --alpha: 0.1; --duration: 20s; }
.afternoon-bokeh .b4 { --size: 80px; --x: 36%; --y: 80%; --alpha: 0.14; --duration: 8s; }
.afternoon-bokeh .b5 { --size: 150px; --x: 2%; --y: 66%; --alpha: 0.09; --duration: 17s; }
.afternoon-bokeh .b6 { --size: 130px; --x: 46%; --y: 8%; --alpha: 0.11; --duration: 13s; }

.evening-bokeh .b1 { --size: 300px; --x: 62%; --y: 10%; --alpha: 0.15; --duration: 19s; }
.evening-bokeh .b2 { --size: 220px; --x: 4%; --y: 58%; --alpha: 0.12; --duration: 16s; }
.evening-bokeh .b3 { --size: 170px; --x: 72%; --y: 72%; --alpha: 0.14; --duration: 11s; }
.evening-bokeh .b4 { --size: 120px; --x: 24%; --y: 10%; --alpha: 0.1; --duration: 10s; }
.evening-bokeh .b5 { --size: 260px; --x: 38%; --y: 42%; --alpha: 0.08; --duration: 20s; }

.night-bokeh .b1 { --size: 180px; --x: 74%; --y: 16%; --alpha: 0.08; --duration: 18s; }
.night-bokeh .b2 { --size: 110px; --x: 16%; --y: 26%; --alpha: 0.1; --duration: 13s; }
.night-bokeh .b3 { --size: 240px; --x: 50%; --y: 70%; --alpha: 0.08; --duration: 20s; }
.night-bokeh .b4 { --size: 90px; --x: 8%; --y: 78%; --alpha: 0.11; --duration: 9s; }

.coda-bokeh .b1 { --size: 160px; --x: 20%; --y: 22%; --alpha: 0.08; --duration: 14s; }
.coda-bokeh .b2 { --size: 100px; --x: 70%; --y: 18%; --alpha: 0.1; --duration: 10s; }
.coda-bokeh .b3 { --size: 200px; --x: 42%; --y: 62%; --alpha: 0.08; --duration: 18s; }
.coda-bokeh .b4 { --size: 90px; --x: 8%; --y: 70%; --alpha: 0.09; --duration: 12s; }

.hero-content {
  width: min(720px, calc(100% - 48px));
  margin: 0 auto;
  padding: 0 clamp(24px, 5vw, 48px);
  text-align: center;
  opacity: 0;
  animation: lightsOn 2s var(--ease) forwards;
}

.hero-content h1 {
  margin: 0;
  color: var(--amber);
  font-family: "Playfair Display", serif;
  font-size: clamp(3.2rem, 9vw, 7rem);
  font-style: italic;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-shadow: 0 0 26px rgba(201, 168, 76, 0.14);
}

.hero-content p,
.timestamp,
.coda-mark p {
  font-family: "Inconsolata", monospace;
  font-weight: 300;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bronze);
}

.hero-content p { margin: 20px 0 0; font-size: 0.75rem; }

.stage {
  position: relative;
  width: min(720px, 100%);
  min-height: 620px;
  margin: 0 auto;
  padding: 0 clamp(24px, 5vw, 48px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.iso-floor {
  position: absolute;
  width: 360px;
  height: 360px;
  background: var(--walnut);
  border: 1px solid rgba(201, 168, 76, 0.24);
  transform: rotateX(55deg) rotateZ(-45deg);
  box-shadow: 28px 28px 0 rgba(107, 58, 42, 0.22), inset 0 0 0 24px rgba(12, 10, 8, 0.22), inset 0 0 0 25px rgba(201, 168, 76, 0.12);
  opacity: 0.72;
}

.floor-one { top: 124px; right: 26px; }
.floor-two { top: 150px; left: 6px; width: 390px; }
.floor-three { top: 118px; right: -10px; width: 420px; height: 420px; }
.floor-four { top: 158px; left: 42px; width: 330px; height: 330px; opacity: 0.58; }

.memory-card {
  position: relative;
  width: min(560px, 100%);
  max-width: 560px;
  padding: 48px 40px 56px 40px;
  border: 1px solid rgba(201, 168, 76, 0.3);
  background: rgba(26, 22, 16, 0.82);
  box-shadow: 8px 8px 0 rgba(107, 58, 42, 0.32), 0 22px 70px rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(2px);
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 900ms var(--ease), transform 900ms var(--ease);
}

.memory-card::before,
.memory-card::after {
  content: "";
  position: absolute;
  width: 26px;
  height: 26px;
  border-color: var(--amber);
  border-style: solid;
  opacity: 0.72;
}

.memory-card::before { top: 14px; left: 14px; border-width: 1px 0 0 1px; }
.memory-card::after { right: 14px; bottom: 14px; border-width: 0 1px 1px 0; }

.memory-card.is-visible { opacity: 1; transform: translateY(0); }

.timestamp {
  display: block;
  margin-bottom: 18px;
  font-size: 0.75rem;
}

h2 {
  margin: 0 0 26px;
  color: var(--pale);
  font-family: "Bitter", serif;
  font-size: clamp(1.4rem, 3.5vw, 2.4rem);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.memory-card p {
  margin: 0;
  color: var(--parchment);
  font-size: clamp(0.95rem, 1.8vw, 1.1rem);
  line-height: 1.85;
}

.night-card p { color: var(--bronze); font-size: clamp(0.88rem, 1.6vw, 1rem); }

.underline-card h2 span,
.last-line {
  background-image: linear-gradient(var(--amber), var(--amber));
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0% 2px;
  transition: background-size 800ms var(--ease);
}

.underline-card.is-visible h2 span { background-size: 100% 2px; }
.reverse-underline-card .last-line { background-size: 100% 2px; }
.reverse-underline-card.is-visible .last-line { background-size: 0% 2px; }

.iso-object {
  position: absolute;
  width: 120px;
  height: 120px;
  transform-style: preserve-3d;
  transform: rotateX(55deg) rotateZ(-45deg);
  z-index: 2;
}

.coffee-cup { right: 28px; top: 172px; }
.cup-top { position: absolute; left: 31px; top: 18px; width: 58px; height: 58px; border-radius: 50%; background: var(--walnut); border: 7px solid var(--amber); box-shadow: inset 0 0 0 12px var(--lacquer); }
.cup-left { position: absolute; left: 30px; top: 56px; width: 33px; height: 48px; background: var(--bronze); transform: skewY(28deg); }
.cup-right { position: absolute; left: 62px; top: 56px; width: 33px; height: 48px; background: var(--rosewood); transform: skewY(-28deg); }
.saucer { position: absolute; left: 16px; top: 86px; width: 90px; height: 26px; border-radius: 50%; border: 2px solid rgba(201, 168, 76, 0.7); background: rgba(26, 22, 16, 0.9); }
.steam { position: absolute; left: 45px; top: -24px; width: 28px; height: 42px; border-left: 2px solid rgba(232, 213, 163, 0.45); border-radius: 50%; transform: rotateZ(35deg); animation: steam 5s ease-in-out infinite alternate; }

.vinyl { left: 44px; top: 176px; }
.record { position: absolute; inset: 8px; border-radius: 50%; background: repeating-radial-gradient(circle, var(--lacquer) 0 8px, #15110d 9px 11px, var(--lacquer) 12px 17px); border: 2px solid var(--bronze); animation: spin 12s linear infinite; }
.record::before { content: ""; position: absolute; inset: 38px; border-radius: 50%; background: var(--amber); box-shadow: inset 0 0 0 10px var(--rosewood); }
.record::after { content: ""; position: absolute; inset: 54px; border-radius: 50%; background: var(--lacquer); }

.pocket-watch { right: 34px; top: 168px; transform: rotateX(55deg) rotateZ(-45deg) rotateY(0deg); }
.watch-ring { position: absolute; inset: 12px; border-radius: 50%; border: 7px solid var(--amber); background: var(--walnut); box-shadow: inset 0 0 0 2px var(--bronze), 0 0 0 1px rgba(201, 168, 76, 0.3); }
.watch-ring::before { content: ""; position: absolute; left: 35px; top: -22px; width: 22px; height: 22px; border-radius: 50%; border: 4px solid var(--bronze); }
.hand { position: absolute; left: 59px; top: 59px; width: 2px; background: var(--pale); transform-origin: 50% 100%; }
.hour { height: 27px; animation: clock 18s linear infinite; }
.minute { height: 39px; background: var(--amber); animation: clock 7s linear infinite; }

.folded-letter { left: 56px; top: 184px; }
.letter-base { position: absolute; left: 14px; top: 30px; width: 96px; height: 62px; background: var(--parchment); transform: skewY(-12deg); box-shadow: 10px 10px 0 rgba(107, 58, 42, 0.35); }
.letter-flap { position: absolute; left: 14px; top: 30px; width: 96px; height: 62px; background: linear-gradient(135deg, transparent 49%, rgba(122, 107, 82, 0.7) 50%, transparent 51%), rgba(232, 213, 163, 0.45); clip-path: polygon(0 0, 50% 62%, 100% 0, 100% 100%, 0 100%); transform: skewY(-12deg); }
.seal { position: absolute; left: 52px; top: 58px; width: 22px; height: 22px; border-radius: 50%; background: var(--rosewood); box-shadow: inset 0 0 0 3px rgba(201, 168, 76, 0.45), 2px 2px 0 rgba(12, 10, 8, 0.2); }

.coda-mark { text-align: center; }
.final-dot { display: block; width: 12px; height: 12px; margin: 0 auto 22px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 28px rgba(201, 168, 76, 0.7); animation: dotPulse 3.8s ease-in-out infinite; }
.coda-mark p { margin: 0; font-size: 0.7rem; }

@keyframes lightsOn { from { opacity: 0; filter: blur(6px); } to { opacity: 1; filter: blur(0); } }
@keyframes drift { from { transform: translate(-10px, 12px); } to { transform: translate(14px, -15px); } }
@keyframes pulse { from { opacity: 0.08; } to { opacity: 0.2; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes clock { to { transform: rotate(360deg); } }
@keyframes steam { from { opacity: 0.2; transform: rotateZ(35deg) translateY(8px); } to { opacity: 0.7; transform: rotateZ(35deg) translateY(-8px); } }
@keyframes dotPulse { 0%, 100% { opacity: 0.35; transform: scale(0.75); } 50% { opacity: 1; transform: scale(1); } }

@media (max-width: 720px) {
  .wayfinder { top: 22px; left: 22px; }
  .stage { min-height: 680px; }
  .memory-card { padding: 42px 30px 48px; }
  .iso-floor { width: 280px; height: 280px; }
  .coffee-cup, .pocket-watch { right: 18px; top: 110px; transform: rotateX(55deg) rotateZ(-45deg) scale(0.72); }
  .vinyl, .folded-letter { left: 20px; top: 112px; transform: rotateX(55deg) rotateZ(-45deg) scale(0.72); }
}