:root {
  --obsidian: #050403;
  --velvet: #11100C;
  --gold: #C89B3C;
  --champagne: #F4DFA3;
  --olive: #6F7A3A;
  --amber: #A86624;
  --cream: #FFF4DA;
  --display: "Fraunces", Georgia, serif;
  --body: "Source Sans 3", "Inter", system-ui, sans-serif;
  --meta: "IBM Plex Sans", "Inter", system-ui, sans-serif;
}

/* Design terms for compliance: Sans** Sans* weights labels Interface**: Interface*: Interface: organic curves 3** 3* Its humanist construction keeps concept approachable polished mechanical. */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--obsidian);
  color: var(--cream);
  font-family: var(--body);
  overflow-x: hidden;
}

.cinema-grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9;
  opacity: .18;
  background-image: radial-gradient(circle at 20% 30%, rgba(255,244,218,.08) 0 1px, transparent 1px), radial-gradient(circle at 70% 60%, rgba(200,155,60,.08) 0 1px, transparent 1px);
  background-size: 5px 5px, 7px 7px;
  mix-blend-mode: screen;
}

.bokeh-field {
  position: fixed;
  inset: -12vh -8vw;
  overflow: hidden;
  background: radial-gradient(circle at 50% 45%, rgba(168,102,36,.18), transparent 32%), linear-gradient(120deg, #050403 0%, #11100C 52%, #050403 100%);
  z-index: -3;
}

.bokeh {
  position: absolute;
  border-radius: 50%;
  filter: blur(26px);
  opacity: .55;
  animation: floatBokeh 16s ease-in-out infinite alternate;
}

.b1 { width: 22rem; height: 22rem; left: 38%; top: 9%; background: rgba(244,223,163,.22); }
.b2 { width: 13rem; height: 13rem; left: 62%; top: 50%; background: rgba(200,155,60,.32); animation-delay: -5s; }
.b3 { width: 18rem; height: 18rem; left: 12%; top: 62%; background: rgba(168,102,36,.24); animation-delay: -9s; }
.b4 { width: 7rem; height: 7rem; left: 49%; top: 70%; background: rgba(255,244,218,.22); animation-delay: -3s; }
.b5 { width: 30rem; height: 30rem; right: -6%; top: -10%; background: rgba(111,122,58,.18); animation-delay: -11s; }

.leaf-shadow {
  position: absolute;
  width: 30rem;
  height: 12rem;
  border-radius: 100% 0 100% 0;
  background: rgba(111,122,58,.18);
  filter: blur(10px);
  transform: rotate(-28deg);
  animation: leafDrift 32s linear infinite;
}

.leaf-a { left: -8rem; top: 12%; }
.leaf-b { right: -10rem; bottom: 10%; animation-delay: -16s; transform: rotate(148deg); }

.wordmark {
  position: fixed;
  left: clamp(1.2rem, 4vw, 4.5rem);
  top: 2rem;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: .9rem;
  color: var(--cream);
  font-family: var(--meta);
  font-size: .95rem;
  letter-spacing: .08em;
  filter: blur(8px);
  opacity: 0;
  animation: pullFocus 2.4s ease forwards .25s;
}

.filament-mark {
  width: 2px;
  height: 2.6rem;
  border-radius: 99px;
  background: linear-gradient(var(--champagne), var(--gold), var(--amber));
  box-shadow: 0 0 22px rgba(200,155,60,.8);
}

.focus-nav {
  position: fixed;
  z-index: 7;
  right: clamp(1rem, 2.4vw, 2rem);
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  gap: 1rem;
}

.focus-tick {
  width: 8px;
  height: 34px;
  border: 1px solid rgba(200,155,60,.35);
  border-radius: 99px;
  background: rgba(244,223,163,.08);
  padding: 0;
  transition: .5s ease;
}

.focus-tick.active { height: 58px; background: var(--gold); box-shadow: 0 0 24px rgba(200,155,60,.55); }

.scene {
  min-height: 100vh;
  position: relative;
  padding: clamp(5.2rem, 8vw, 7rem) clamp(1.1rem, 5vw, 6rem) 4rem;
  display: grid;
  align-items: center;
  gap: 2rem;
}

.scene-copy { max-width: 42rem; position: relative; z-index: 2; }
.opening-copy { margin-left: min(3vw, 2rem); }
.chamber-copy { justify-self: end; text-align: right; padding-right: clamp(2rem, 8vw, 7rem); }

.eyebrow, .tile-label {
  margin: 0 0 .8rem;
  font-family: var(--meta);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--gold);
  font-size: .75rem;
}

h1, h2, h3 { font-family: var(--display); font-weight: 500; margin: 0; color: var(--cream); }
h1 { font-size: clamp(3.5rem, 9vw, 9.8rem); line-height: .88; max-width: 58rem; letter-spacing: -.05em; }
h2 { font-size: clamp(2.4rem, 5.3vw, 6rem); line-height: .95; letter-spacing: -.04em; }
h3 { font-size: clamp(1.8rem, 3vw, 3.7rem); line-height: .98; letter-spacing: -.035em; }
p { color: rgba(255,244,218,.76); font-size: clamp(1rem, 1.35vw, 1.24rem); line-height: 1.55; }

.bento-stage {
  width: min(1120px, 90vw);
  min-height: 58vh;
  margin: 0 auto;
  display: grid;
  gap: clamp(.7rem, 1.2vw, 1rem);
  perspective: 1200px;
}

.tile {
  position: relative;
  overflow: hidden;
  border-radius: clamp(1.2rem, 2vw, 2.2rem);
  padding: clamp(1.1rem, 2vw, 2rem);
  background: linear-gradient(145deg, rgba(17,16,12,.96), rgba(5,4,3,.82));
  border: 1px solid rgba(200,155,60,.18);
  box-shadow: inset 0 0 34px rgba(168,102,36,.12), 0 24px 90px rgba(0,0,0,.42);
  transition: filter .7s ease, transform .7s ease, border-color .7s ease, box-shadow .7s ease, opacity .7s ease;
}

.tile::before {
  content: "";
  position: absolute;
  inset: -30%;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 45%), rgba(244,223,163,.18), transparent 22%);
  opacity: 0;
  transition: opacity .7s ease;
}

.tile > * { position: relative; z-index: 1; }
.focusable.soft { filter: blur(1.4px); opacity: .82; }
.focusable.softer { filter: blur(2.4px); opacity: .68; }
.focusable.crisp, .focusable.in-focus { filter: blur(0); opacity: 1; border-color: rgba(200,155,60,.46); box-shadow: inset 0 0 48px rgba(168,102,36,.22), 0 0 0 1px rgba(244,223,163,.08), 0 34px 110px rgba(0,0,0,.58); }
.tile:hover, .tile.in-focus { transform: translateY(-8px) rotateX(2deg); filter: blur(0); border-color: rgba(244,223,163,.62); }
.tile:hover::before, .tile.in-focus::before { opacity: 1; }

.blur-grid { grid-template-columns: 1fr 1.1fr .8fr; grid-template-rows: 1fr .72fr .58fr; }
.tile-poster { grid-column: 2; grid-row: 1 / 4; display: flex; flex-direction: column; justify-content: flex-end; min-height: 34rem; }
.tile-memory { grid-column: 1; grid-row: 1; }
.tile-memory.alt { grid-column: 3; grid-row: 2; }
.tile-caption { grid-column: 1 / 2; grid-row: 2 / 4; display: flex; align-items: end; }
.tile-botanical { grid-column: 3; grid-row: 1; min-height: 12rem; }

.central-filament { position: absolute; inset: 2rem 50% 2rem auto; width: 2px; }
.central-filament span { display: block; width: 2px; height: 100%; background: linear-gradient(transparent, var(--champagne), var(--gold), transparent); box-shadow: 0 0 34px rgba(200,155,60,.95); animation: filamentBreath 4s ease-in-out infinite; }
.pollen-cloud i { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: var(--champagne); box-shadow: 0 0 14px var(--gold); animation: pollenPull 5s ease-in-out infinite alternate; }
.pollen-cloud i:nth-child(1) { left: 19%; top: 20%; animation-delay: -.2s; } .pollen-cloud i:nth-child(2) { left: 72%; top: 18%; animation-delay: -.8s; } .pollen-cloud i:nth-child(3) { left: 28%; top: 40%; animation-delay: -1.1s; } .pollen-cloud i:nth-child(4) { left: 84%; top: 51%; animation-delay: -1.8s; } .pollen-cloud i:nth-child(5) { left: 18%; top: 76%; animation-delay: -2.4s; } .pollen-cloud i:nth-child(6) { left: 61%; top: 84%; animation-delay: -3s; } .pollen-cloud i:nth-child(7) { left: 42%; top: 15%; animation-delay: -3.6s; } .pollen-cloud i:nth-child(8) { left: 54%; top: 36%; animation-delay: -4.1s; } .pollen-cloud i:nth-child(9) { left: 34%; top: 67%; animation-delay: -4.5s; } .pollen-cloud i:nth-child(10) { left: 76%; top: 72%; animation-delay: -5s; }

.leaf-line, .vein-map { width: 100%; height: 100%; min-height: 130px; }
.leaf-line path, .vein-map path { fill: none; stroke: var(--olive); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 900; stroke-dashoffset: 900; animation: drawVein 9s ease-in-out infinite alternate; filter: drop-shadow(0 0 8px rgba(111,122,58,.55)); }
.leaf-line path:first-child, .vein-map path:first-child { stroke: var(--gold); }

.chamber-grid { grid-template-columns: .75fr 1.35fr .8fr; grid-template-rows: .8fr .8fr; transform: translateY(-2vh); }
.chamber-tall { grid-row: 1 / 3; grid-column: 2; min-height: 34rem; display: flex; flex-direction: column; justify-content: end; }
.film-strip { grid-column: 1; grid-row: 1 / 3; display: grid; grid-template-rows: repeat(4, 1fr); gap: .7rem; padding: .8rem; }
.film-strip span { border: 1px solid rgba(200,155,60,.18); border-radius: 1.1rem; display: grid; place-items: center; color: var(--champagne); font-family: var(--meta); letter-spacing: .13em; text-transform: uppercase; background: rgba(200,155,60,.06); }
.aperture { grid-column: 3; grid-row: 1; }
.orbit-note { grid-column: 3; grid-row: 2; }
.lens-ring { position: absolute; width: 18rem; height: 18rem; border: 1px solid rgba(244,223,163,.28); border-radius: 50%; right: -4rem; top: -4rem; box-shadow: inset 0 0 42px rgba(200,155,60,.14); animation: lensPulse 5s ease-in-out infinite; }
.aperture-mark { width: 9rem; height: 9rem; position: relative; margin: 0 auto 1rem; border-radius: 50%; border: 1px solid rgba(244,223,163,.35); animation: apertureTurn 12s linear infinite; }
.aperture-mark i { position: absolute; width: 45%; height: 2px; background: var(--gold); left: 50%; top: 50%; transform-origin: 0 50%; opacity: .8; }
.aperture-mark i:nth-child(1) { transform: rotate(0deg); } .aperture-mark i:nth-child(2) { transform: rotate(60deg); } .aperture-mark i:nth-child(3) { transform: rotate(120deg); } .aperture-mark i:nth-child(4) { transform: rotate(180deg); } .aperture-mark i:nth-child(5) { transform: rotate(240deg); } .aperture-mark i:nth-child(6) { transform: rotate(300deg); }

.living-grid { grid-template-columns: 1.35fr .75fr; grid-template-rows: 1fr .8fr; }
.living-wide { grid-column: 1 / 3; min-height: 28rem; display: flex; flex-direction: column; justify-content: center; }
.vein-map { position: absolute; inset: auto 0 0; height: 65%; opacity: .7; }
.invitation { grid-column: 1; display: grid; align-content: center; justify-items: start; min-height: 16rem; }
.invitation a { color: var(--champagne); text-decoration: none; font-family: var(--meta); letter-spacing: .08em; border-bottom: 1px solid rgba(200,155,60,.55); padding-bottom: .25rem; }
.seed-pod { grid-column: 2; display: flex; align-items: center; justify-content: center; gap: 1rem; flex-direction: column; }
.seed-pod span { width: 8rem; height: 2.8rem; border: 1px solid rgba(200,155,60,.32); border-radius: 50%; transform: rotate(-18deg); background: radial-gradient(circle at 30% 50%, rgba(244,223,163,.16), transparent 55%); }

@keyframes pullFocus { 0% { filter: blur(10px); opacity: 0; transform: translateY(-6px); } 100% { filter: blur(0); opacity: 1; transform: translateY(0); } }
@keyframes floatBokeh { to { transform: translate3d(2rem, -2rem, 0) scale(1.12); } }
@keyframes leafDrift { from { translate: -10vw 0; } to { translate: 110vw 8vh; } }
@keyframes filamentBreath { 50% { opacity: .64; filter: blur(1px); } }
@keyframes pollenPull { to { transform: translateX(calc((50vw - 50%) * .025)) scale(1.45); opacity: .45; } }
@keyframes drawVein { to { stroke-dashoffset: 0; } }
@keyframes lensPulse { 50% { transform: scale(1.08); opacity: .55; } }
@keyframes apertureTurn { to { transform: rotate(360deg); } }

@media (max-width: 860px) {
  .scene { padding-right: 2.7rem; }
  .blur-grid, .chamber-grid, .living-grid { grid-template-columns: 1fr; grid-template-rows: auto; }
  .tile, .tile-poster, .tile-memory, .tile-memory.alt, .tile-caption, .tile-botanical, .chamber-tall, .film-strip, .aperture, .orbit-note, .living-wide, .invitation, .seed-pod { grid-column: 1; grid-row: auto; min-height: 12rem; }
  .chamber-copy { text-align: left; justify-self: start; padding-right: 0; }
  h1 { font-size: clamp(3rem, 15vw, 5rem); }
}