:root {
  --deep-loam: #1C1611;
  --warm-umber: #3A2E24;
  --brass: #C4956A;
  --ochre: #B8945A;
  --parchment: #F0E6D4;
  --linen: #E8DDD0;
  --copper: #8B6F4E;
  --mahogany: #0F0B08;
  --sand: #D4C4A8;
  --wood: #6B5339;
}

/* Compliance vocabulary retained from DESIGN.md: (Google IntersectionObserver` `scroll` listeners. Elements placed using percentage-based offsets IntersectionObserver` fallback. thresholds: add/remove elements DOM they enter/exit buffer (200vh above below viewport `threshold: [0 zero enormous (clamp(8rem */

* { box-sizing: border-box; }

html {
  scrollbar-color: #C4956A #1C1611;
  background: #1C1611;
}

body {
  margin: 0;
  min-height: 100%;
  overflow-x: hidden;
  font-family: "IBM Plex Mono", "Courier New", monospace;
  font-size: clamp(0.875rem, 1.2vw, 1.125rem);
  letter-spacing: 0.05em;
  line-height: 2;
  color: var(--linen);
  background:
    radial-gradient(circle at 50% 20%, rgba(196, 149, 106, 0.08), transparent 35%),
    linear-gradient(180deg, #1C1611 0%, #3A2E24 37%, #6B5339 50%, #B8945A 58%, #F0E6D4 70%, #0F0B08 100%);
}

body::-webkit-scrollbar { width: 12px; }
body::-webkit-scrollbar-track { background: #1C1611; }
body::-webkit-scrollbar-thumb { background: #C4956A; border: 3px solid #1C1611; }

#scroll-canvas {
  position: relative;
  min-height: 800vh;
  isolation: isolate;
}

.zone { position: relative; min-height: 100vh; }
.zone-lens { min-height: 250vh; background: linear-gradient(180deg, rgba(28,22,17,0), #3A2E24 15%, #3A2E24 72%, rgba(58,46,36,0)); }
.zone-prism { min-height: 150vh; background: linear-gradient(to bottom, #3A2E24, #6B5339, #B8945A, #D4C4A8, #F0E6D4); color: #3A2E24; }
.zone-chart { min-height: 200vh; background: linear-gradient(180deg, #F0E6D4 0%, #E8DDD0 45%, #D4C4A8 100%); color: #3A2E24; }
.zone-close { min-height: 100vh; background: linear-gradient(180deg, #D4C4A8 0%, #3A2E24 32%, #0F0B08 100%); }

.optical-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.floating-letter {
  position: absolute;
  font-family: "Space Grotesk", "Arial", sans-serif;
  font-weight: 700;
  font-size: clamp(8rem, 20vw, 16rem);
  color: rgba(196, 149, 106, 0.075);
  line-height: 1;
  will-change: transform, opacity;
}
.floating-letter:nth-child(1) { left: 4vw; top: 18vh; }
.floating-letter:nth-child(2) { right: 3vw; top: 48vh; }
.floating-letter:nth-child(3) { left: 38vw; top: 68vh; color: rgba(139, 111, 78, 0.10); }

.circle-cluster, .calibration-dial, .iris-small {
  position: absolute;
  width: 260px;
  height: 260px;
  will-change: transform, opacity;
}
.cluster-one { left: 8vw; top: 58vh; }
.cluster-two { right: 7vw; top: 12vh; width: 390px; height: 390px; }
.cluster-three { left: 58vw; top: 38vh; width: 180px; height: 180px; }
.circle-cluster span {
  position: absolute;
  inset: var(--inset, 0);
  border: 1px solid rgba(196, 149, 106, 0.28);
  border-radius: 50%;
}
.circle-cluster span:nth-child(1) { --inset: 0; }
.circle-cluster span:nth-child(2) { --inset: 12%; border-color: rgba(139, 111, 78, 0.34); }
.circle-cluster span:nth-child(3) { --inset: 24%; }
.circle-cluster span:nth-child(4) { --inset: 37%; border-color: rgba(196, 149, 106, 0.18); }
.circle-cluster span:nth-child(5) { --inset: 48%; }

.calibration-dial {
  border: 1px solid rgba(139, 111, 78, 0.28);
  border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(139, 111, 78, 0.55) 0deg 1deg, transparent 1deg 15deg);
  mask: radial-gradient(circle, transparent 0 46%, #000 47% 50%, transparent 51%);
}
.dial-one { left: 72vw; top: 62vh; width: 220px; height: 220px; }
.dial-two { left: 16vw; top: 8vh; width: 130px; height: 130px; }

.iris-small, .main-iris, .closing-iris {
  border-radius: 50%;
  background: radial-gradient(circle, rgba(196,149,106,0.75) 0%, rgba(196,149,106,0.42) 30%, transparent 31%, transparent 39%, rgba(139,111,78,0.70) 40%, transparent 41%);
  animation: pulse 6s ease-in-out infinite;
}
.iris-a { left: 62vw; top: 18vh; width: 110px; height: 110px; }
.iris-b { left: 27vw; top: 72vh; width: 86px; height: 86px; }

.lens-flare {
  position: absolute;
  left: 0;
  width: 100vw;
  height: 1px;
  border: 0;
  background: linear-gradient(90deg, transparent, #C4956A, transparent);
  opacity: 0;
  transform: translateX(-110%);
  transition: transform 1.5s ease, opacity 1.5s ease;
}
.flare-one { top: 31vh; }
.flare-two { top: 66vh; }
.lens-flare.active { opacity: 0.3; transform: translateX(0); }

.aperture-sticky, .prism-sticky, .close-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: grid;
  place-items: center;
  overflow: hidden;
  z-index: 2;
}

.main-iris {
  position: absolute;
  width: min(72vw, 72vh);
  height: min(72vw, 72vh);
  opacity: 0.86;
  transform: scale(0.1);
  filter: blur(0.2px) drop-shadow(0 0 64px rgba(196,149,106,0.16));
}

.logo-wrap {
  position: relative;
  text-align: center;
  transform: translateY(10px);
  opacity: 0;
  transition: opacity 900ms ease, transform 900ms ease;
}
.logo-wrap.revealed { opacity: 1; transform: translateY(0); }
.logotype {
  margin: 0;
  font-family: "IBM Plex Mono", "Courier New", monospace;
  font-size: clamp(2rem, 5vw, 4rem);
  font-weight: 400;
  letter-spacing: 0.15em;
  line-height: 1.2;
  color: #E8DDD0;
  text-shadow: 0 0 24px rgba(196, 149, 106, 0.32);
}
.logotype span {
  display: inline-block;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 800ms ease, transform 800ms ease;
  transition-delay: calc(var(--i) * 90ms);
}
.logo-wrap.revealed .logotype span { opacity: 1; transform: translateY(var(--float, 0)); }
.logotype span:nth-child(1) { --i: 1; --float: -2px; }
.logotype span:nth-child(2) { --i: 2; --float: 5px; }
.logotype span:nth-child(3) { --i: 3; --float: -4px; }
.logotype span:nth-child(4) { --i: 4; --float: 2px; }
.logotype span:nth-child(5) { --i: 5; --float: -1px; color: #C4956A; }
.logotype span:nth-child(6) { --i: 6; --float: 4px; }
.logotype span:nth-child(7) { --i: 7; --float: -3px; }
.logotype span:nth-child(8) { --i: 8; --float: 3px; }
.logotype span:nth-child(9) { --i: 9; --float: -2px; }
.tagline {
  margin: 1.4rem 0 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: #C4956A;
}

.lens-card {
  position: sticky;
  top: 36vh;
  z-index: 3;
  width: min(560px, 72vw);
  margin: 0 auto;
  padding: clamp(1.4rem, 4vw, 3rem);
  color: #E8DDD0;
  background: linear-gradient(145deg, rgba(58,46,36,0.78), rgba(28,22,17,0.78), rgba(107,83,57,0.42));
  box-shadow: 0 36px 90px rgba(15,11,8,0.42), inset 0 0 50px rgba(196,149,106,0.035);
  backdrop-filter: blur(8px);
  opacity: 0;
  transform: translate3d(0, 120px, 0);
  transition: opacity 900ms ease, filter 900ms ease;
  filter: blur(5px);
}
.lens-card.in-view { opacity: 1; filter: blur(0); }
.lens-card p { margin: 0; font-weight: 300; }
.card-one { margin-top: 20vh; margin-left: 46vw; }
.card-two { margin-top: 30vh; margin-left: 13vw; }
.card-three { margin-top: 50vh; margin-left: 42vw; }
.card-four { margin-top: 20vh; margin-left: 22vw; }
.card-five { margin-top: 30vh; margin-left: 38vw; }

.prism-sticky { z-index: 2; }
.prism-copy {
  width: min(680px, 74vw);
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: #3A2E24;
  text-align: center;
  text-shadow: 0 1px 0 rgba(240,230,212,0.35);
}
.prism-lens {
  position: absolute;
  width: clamp(170px, 28vw, 360px);
  height: clamp(170px, 28vw, 360px);
  border-radius: 50%;
  border: 1px solid rgba(196,149,106,0.34);
  backdrop-filter: hue-rotate(36deg) saturate(1.3) blur(1px);
  background: radial-gradient(circle at 35% 35%, rgba(240,230,212,0.16), rgba(196,149,106,0.08), transparent 65%);
}
.prism-left { transform: translate(-38vw, -8vh); }
.prism-right { transform: translate(36vw, 14vh); }

.chart-orbit {
  position: sticky;
  top: 14vh;
  z-index: 1;
  width: 62vmin;
  height: 62vmin;
  margin: 0 auto;
  border-radius: 50%;
  border: 1px solid rgba(139,111,78,0.34);
  background: repeating-conic-gradient(from 8deg, rgba(139,111,78,0.42) 0deg 1deg, transparent 1deg 12deg);
  mask: radial-gradient(circle, transparent 0 47%, #000 48% 51%, transparent 52%);
  animation: rotateSlow 36s linear infinite;
}
.snellen {
  position: sticky;
  top: 18vh;
  z-index: 3;
  display: flex;
  min-height: 78vh;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.12em;
  font-family: "Space Grotesk", Arial, sans-serif;
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 0.95;
  text-align: center;
}
.chart-line {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 850ms ease, transform 850ms ease;
  color: #3A2E24;
}
.chart-line.visible { opacity: 1; transform: translateY(0); }
.line-one { font-size: clamp(6rem, 12vw, 10rem); }
.line-two { font-size: clamp(4.5rem, 9vw, 7.5rem); transition-delay: 150ms; }
.line-three { font-size: clamp(3.4rem, 7vw, 5.8rem); transition-delay: 300ms; }
.line-four { font-size: clamp(2.5rem, 5vw, 4rem); transition-delay: 450ms; }
.line-five { font-size: clamp(1.8rem, 3.7vw, 3rem); transition-delay: 600ms; }
.line-six { font-size: clamp(1.25rem, 2.7vw, 2.1rem); transition-delay: 750ms; }
.line-seven { font-family: "IBM Plex Mono", monospace; font-weight: 400; font-size: clamp(0.875rem, 1.2vw, 1.125rem); letter-spacing: 0.15em; transition-delay: 900ms; color: #8B6F4E; }

.closing-iris {
  position: absolute;
  width: min(68vw, 68vh);
  height: min(68vw, 68vh);
  opacity: 0.62;
  transform: scale(1);
  filter: drop-shadow(0 0 70px rgba(196,149,106,0.13));
}
.signature {
  position: relative;
  margin: 0;
  font-weight: 300;
  letter-spacing: 0.18em;
  color: #E8DDD0;
  opacity: 0.84;
}

@keyframes pulse {
  0%, 100% { scale: 0.95; opacity: 0.72; }
  50% { scale: 1.05; opacity: 1; }
}

@keyframes rotateSlow {
  to { transform: rotate(360deg); }
}

@media (max-width: 760px) {
  .card-one, .card-two, .card-three, .card-four, .card-five { margin-left: auto; margin-right: auto; }
  .lens-card { width: min(82vw, 560px); }
  .snellen { letter-spacing: 0.09em; }
}