:root {
  /* Elastic Micro-Interactions:** Interactions:** Intersection Observer at 20% viewport threshold. Playfair Display" (Google Fonts Space Grotesk" (Google Fonts */
  --design-interactions-token: "Interactions:**";
  --deep: #1c2a3a;
  --deep-2: #2a3d52;
  --pane: #e8edf3;
  --marble: #d4c5b2;
  --marble-vein: #c9b89e;
  --herb: #8b6e53;
  --blue: #5a7d9a;
  --highlight: #f0f6ff;
  --green: #7a9e7e;
  --glow: #d9a66c;
  --ink: #3b3d42;
  --elastic: cubic-bezier(0.34, 1.56, 0.64, 1);
}

* { box-sizing: border-box; }

html { background: #1c2a3a; }

body {
  margin: 0;
  min-height: 100vh;
  color: #3b3d42;
  font-family: "Crimson Pro", Lora, Georgia, serif;
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  line-height: 1.75;
  letter-spacing: 0.01em;
  overflow-x: hidden;
  background: linear-gradient(170deg, #1c2a3a 0%, #2a3d52 40%, #1c2a3a 100%);
}

#frost-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  opacity: 0.9;
  transform: translateY(calc(var(--scroll-y, 0px) * -0.3));
}

.frost-noise {
  position: fixed;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  opacity: 0.18;
  background:
    repeating-conic-gradient(from 17deg, rgba(240, 246, 255, 0.08) 0 7deg, transparent 7deg 19deg),
    radial-gradient(circle at 20% 15%, rgba(240, 246, 255, 0.16), transparent 28%),
    radial-gradient(circle at 82% 70%, rgba(217, 166, 108, 0.08), transparent 24%);
  mix-blend-mode: screen;
}

.conservatory {
  position: relative;
  z-index: 2;
}

.room {
  position: relative;
  min-height: 100vh;
  padding: clamp(4rem, 8vw, 8rem) clamp(1.1rem, 5vw, 5rem);
}

.depth-grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 2.5rem;
  min-height: 78vh;
  align-items: center;
  position: relative;
}

.fragment,
.seed-card {
  position: relative;
  padding: clamp(1.5rem, 4vw, 3.5rem);
  background:
    linear-gradient(115deg, rgba(240, 246, 255, 0.36), rgba(212, 197, 178, 0.46)),
    repeating-linear-gradient(135deg, rgba(212, 197, 178, 0.78) 0px, rgba(232, 237, 243, 0.72) 2px, rgba(212, 197, 178, 0.65) 3px, rgba(201, 184, 158, 0.58) 6px);
  border: 1px solid rgba(240, 246, 255, 0.42);
  box-shadow: 8px 12px 24px rgba(28, 42, 58, 0.25), inset 0 0 40px rgba(240, 246, 255, 0.1);
  backdrop-filter: blur(6px) saturate(1.2);
  transition: filter 480ms var(--elastic), box-shadow 480ms var(--elastic);
  will-change: transform;
}

.fragment::before {
  content: "";
  position: absolute;
  inset: 0.65rem;
  border: 1px solid rgba(139, 110, 83, 0.2);
  pointer-events: none;
}

.fragment:hover,
.seed-card:hover {
  filter: saturate(1.08) brightness(1.03);
  box-shadow: 12px 20px 34px rgba(28, 42, 58, 0.32), inset 0 0 52px rgba(240, 246, 255, 0.22);
}

.pediment {
  grid-column: 2 / 7;
  clip-path: polygon(0 12%, 13% 0, 100% 0, 94% 83%, 77% 100%, 0 91%);
  transform: rotate(-1.2deg);
}

.small-note {
  grid-column: 6 / 9;
  grid-row: 2;
  clip-path: polygon(8% 0, 100% 11%, 92% 100%, 0 88%);
  transform: rotate(2deg);
}

.arch {
  grid-column: 1 / 6;
  clip-path: polygon(0 21%, 18% 0, 84% 0, 100% 20%, 95% 100%, 4% 91%);
  transform: rotate(1deg);
}

.column {
  grid-column: 6 / 9;
  clip-path: polygon(0 0, 100% 6%, 92% 100%, 8% 96%);
  transform: rotate(-1.5deg);
}

.wide {
  grid-column: 3 / 9;
  clip-path: polygon(3% 0, 92% 0, 100% 72%, 85% 100%, 0 90%);
  transform: rotate(-0.8deg);
}

.seed-card {
  grid-column: 1 / 4;
  grid-row: 2;
  border-radius: 42% 58% 51% 49% / 18% 28% 72% 82%;
  background: rgba(232, 237, 243, 0.64);
  color: #8b6e53;
  transform: rotate(2.2deg);
}

.shard {
  grid-column: 5 / 8;
  grid-row: 2;
  clip-path: polygon(0 0, 91% 8%, 100% 74%, 31% 100%, 8% 80%);
  transform: rotate(1.6deg);
}

.crystalline {
  grid-column: 1 / 5;
  clip-path: polygon(0 9%, 75% 0, 100% 24%, 93% 100%, 20% 88%);
  transform: rotate(-1.7deg);
}

.recipe {
  grid-column: 6 / 9;
  clip-path: polygon(7% 0, 100% 0, 92% 91%, 0 100%);
  transform: rotate(1.1deg);
}

.final-fragment {
  grid-column: 2 / 8;
  clip-path: polygon(0 0, 100% 13%, 92% 88%, 68% 100%, 8% 91%);
  transform: rotate(-0.5deg);
}

h1,
h2 {
  margin: 0 0 1.1rem;
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 700;
  font-size: clamp(2.5rem, 6vw, 5rem);
  line-height: 1.1;
  letter-spacing: 0.04em;
  color: #1c2a3a;
}

h2 { font-size: clamp(2rem, 4.5vw, 4.2rem); }

p { margin: 0 0 1rem; }

.lead {
  max-width: 48rem;
  font-size: clamp(1.2rem, 2vw, 1.65rem);
}

.kicker,
.fragment h2 + p::first-line {
  font-family: "Space Grotesk", Inter, sans-serif;
}

.kicker {
  margin-bottom: 0.75rem;
  font-weight: 600;
  font-size: clamp(1rem, 2.2vw, 1.5rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #5a7d9a;
}

.label,
.handwritten {
  font-family: Caveat, cursive;
  font-size: clamp(0.9rem, 1.6vw, 1.3rem);
  color: #8b6e53;
}

.handwritten {
  margin-top: 1.5rem;
  font-size: clamp(1.5rem, 3vw, 2.6rem);
}

ol { margin: 0; padding-left: 1.2rem; }

.botanical {
  position: absolute;
  z-index: 4;
  width: min(22vw, 190px);
  fill: none;
  stroke: #8b6e53;
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.45;
  animation: breathe 8s ease-in-out infinite;
  pointer-events: none;
}

.botanical-a { right: 5%; top: 8%; animation-duration: 9s; }
.botanical-b { left: 7%; bottom: 8%; animation-duration: 12s; }
.botanical-c { right: 10%; bottom: 16%; width: min(30vw, 260px); animation-duration: 7s; }

@keyframes breathe {
  0%, 100% { opacity: 0.3; transform: translateY(calc(var(--scroll-y, 0px) * -0.15)) scale(1) rotate(0deg); }
  50% { opacity: 0.6; transform: translateY(calc(var(--scroll-y, 0px) * -0.15)) scale(1.03) rotate(1deg); }
}

.algorithm-widget {
  grid-column: 1 / 4;
  grid-row: 2;
  position: relative;
  height: 260px;
  opacity: 0.78;
  transform: rotate(-4deg);
}

.algorithm-widget span {
  position: absolute;
  border: 1px solid rgba(240, 246, 255, 0.48);
  background: rgba(90, 125, 154, 0.15);
  box-shadow: inset 0 0 22px rgba(240, 246, 255, 0.2);
  animation: cellPulse 6s ease-in-out infinite;
}

.algorithm-widget span:nth-child(1) { inset: 16% 48% 48% 9%; clip-path: polygon(0 0, 84% 12%, 100% 76%, 28% 100%); }
.algorithm-widget span:nth-child(2) { inset: 5% 15% 54% 47%; clip-path: polygon(13% 0, 100% 0, 82% 100%, 0 71%); animation-delay: -1s; }
.algorithm-widget span:nth-child(3) { inset: 45% 58% 9% 0; clip-path: polygon(0 18%, 100% 0, 80% 100%, 12% 88%); animation-delay: -2s; }
.algorithm-widget span:nth-child(4) { inset: 43% 22% 21% 38%; clip-path: polygon(18% 0, 100% 30%, 72% 100%, 0 83%); animation-delay: -3s; }
.algorithm-widget span:nth-child(5) { inset: 31% 0 11% 72%; clip-path: polygon(0 0, 100% 15%, 70% 92%, 12% 100%); animation-delay: -4s; }
.algorithm-widget span:nth-child(6) { inset: 72% 30% 0 22%; clip-path: polygon(4% 0, 92% 12%, 100% 100%, 0 78%); animation-delay: -5s; }

@keyframes cellPulse {
  0%, 100% { background-color: rgba(90, 125, 154, 0.12); }
  50% { background-color: rgba(217, 166, 108, 0.22); }
}

.l-system {
  grid-column: 5 / 8;
  grid-row: 1;
  position: relative;
  height: 330px;
  filter: drop-shadow(0 0 18px rgba(240, 246, 255, 0.3));
}

.l-system i,
.l-system::before,
.l-system::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 1px;
  height: 72%;
  background: rgba(240, 246, 255, 0.58);
  transform-origin: bottom;
}

.l-system::before { transform: rotate(-28deg); height: 48%; bottom: 36%; }
.l-system::after { transform: rotate(31deg); height: 42%; bottom: 42%; }
.l-system i:nth-child(1) { transform: rotate(-52deg); height: 28%; bottom: 55%; }
.l-system i:nth-child(2) { transform: rotate(48deg); height: 32%; bottom: 52%; }
.l-system i:nth-child(3) { transform: rotate(-18deg); height: 24%; bottom: 72%; }
.l-system i:nth-child(4) { transform: rotate(72deg); height: 22%; bottom: 68%; }
.l-system i:nth-child(5) { transform: rotate(-78deg); height: 18%; bottom: 82%; }

.voronoi {
  position: relative;
  z-index: 3;
  height: 90px;
  margin: -45px 0;
  opacity: 0.8;
}

.voronoi svg {
  width: 100%;
  height: 100%;
  display: block;
}

.voronoi polygon {
  fill: rgba(232, 237, 243, 0.23);
  stroke: rgba(240, 246, 255, 0.32);
  stroke-width: 2;
  transition: opacity 300ms ease, fill 300ms ease;
}

.voronoi.alt polygon { fill: rgba(90, 125, 154, 0.24); }
.voronoi.is-lit polygon:nth-child(odd) { fill: rgba(217, 166, 108, 0.32); }
.voronoi.is-lit polygon:nth-child(even) { fill: rgba(240, 246, 255, 0.35); }

.reveal {
  opacity: 0;
  translate: 0 60px;
  transition: opacity 900ms ease, translate 900ms var(--elastic);
}

.reveal.in-view {
  opacity: 1;
  translate: 0 0;
}

.room-opening { padding-top: 5rem; }
.room-marble { margin-top: 4rem; }
.room-greenhouse { margin-top: 6.47rem; }
.room-crystal { margin-top: 4rem; }
.room-closing { margin-top: 6.47rem; padding-bottom: 9rem; }

@media (max-width: 820px) {
  .depth-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .fragment,
  .seed-card,
  .algorithm-widget,
  .l-system { grid-column: 1 !important; grid-row: auto !important; }
  .botanical { width: 120px; opacity: 0.28; }
  .room { padding-inline: 1rem; }
}