:root {
  /* Design typography tokens for compliance: Space Grotesk* Grotesk* IBM Plex Mono* only in very small doses for coordinates or glitch fragments clear */
  --midnight-canopy: #071126;
  --deep-lagoon: #0B1F3A;
  --cyan: #37F5FF;
  --magenta: #FF4FD8;
  --orchid: #8B5CFF;
  --algae: #B7FF3C;
  --mist: #D8E8FF;
  --ink: #17284A;
  --glass: rgba(216, 232, 255, 0.10);
  --glass-deeper: rgba(23, 40, 74, 0.42);
  --display: "Bungee Hairline", "Arial Narrow", sans-serif;
  --body: "Space Grotesk", Inter, system-ui, sans-serif;
  --poetic: "Cormorant Garamond", Georgia, serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; overflow: hidden; }

body {
  background: var(--midnight-canopy);
  color: var(--mist);
  font-family: var(--body);
}

button { font: inherit; }

.conservatory {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 78%, rgba(255, 79, 216, 0.16), transparent 28%),
    radial-gradient(circle at 82% 17%, rgba(55, 245, 255, 0.13), transparent 26%),
    linear-gradient(135deg, #071126 0%, #0B1F3A 58%, #071126 100%);
}

.sky-noise {
  position: absolute;
  inset: 0;
  opacity: .19;
  background-image:
    linear-gradient(rgba(216, 232, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(216, 232, 255, .025) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(circle at center, black, transparent 76%);
}

.horizon-grid {
  position: absolute;
  left: -20vw;
  right: -20vw;
  bottom: -12vh;
  height: 48vh;
  transform: perspective(520px) rotateX(63deg);
  transform-origin: bottom;
  background-image:
    linear-gradient(rgba(55, 245, 255, .30) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 79, 216, .20) 1px, transparent 1px);
  background-size: 7vh 7vh;
  filter: drop-shadow(0 0 18px rgba(55,245,255,.32));
  opacity: .5;
  animation: gridBreathe 7s ease-in-out infinite;
}

.aurora {
  position: absolute;
  width: 52vmax;
  height: 52vmax;
  border-radius: 50%;
  filter: blur(70px);
  opacity: .22;
  pointer-events: none;
}
.aurora-cyan { top: -28vmax; right: -18vmax; background: var(--cyan); animation: driftGlow 17s infinite alternate ease-in-out; }
.aurora-magenta { bottom: -34vmax; left: -20vmax; background: var(--magenta); animation: driftGlow 21s infinite alternate-reverse ease-in-out; }

.garden-gates {
  position: fixed;
  z-index: 20;
  top: 50%;
  right: 3.2vw;
  transform: translateY(-50%);
  display: grid;
  gap: 18px;
}

.gate {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  border: 1px solid rgba(55,245,255,.72);
  background: rgba(216,232,255,.05);
  box-shadow: 0 0 18px rgba(55,245,255,.38);
  color: var(--mist);
  cursor: pointer;
  position: relative;
  transition: transform .35s ease, background .35s ease, border-color .35s ease;
}
.gate span {
  position: absolute;
  right: 22px;
  top: -5px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(216,232,255,.58);
  opacity: 0;
  transform: translateX(8px);
  transition: .3s ease;
}
.gate.active, .gate:hover { transform: scale(1.55); background: var(--magenta); border-color: var(--magenta); }
.gate.active span, .gate:hover span { opacity: 1; transform: translateX(0); }

.coordinate-label {
  position: fixed;
  z-index: 20;
  left: 3.4vw;
  top: 4vh;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(183, 255, 60, .78);
  text-shadow: 0 0 14px rgba(183,255,60,.32);
}

.clearing {
  position: absolute;
  inset: 0;
  min-height: 100vh;
  opacity: 0;
  pointer-events: none;
  transform: translateX(28px);
  transition: opacity .8s ease, transform .8s ease;
}
.clearing.active { opacity: 1; pointer-events: auto; transform: translateX(0); }

.glass-leaf {
  position: absolute;
  left: 58vw;
  top: 18vh;
  width: 170px;
  height: 320px;
  border: 1px solid rgba(55,245,255,.46);
  border-radius: 90% 12% 83% 10% / 68% 14% 78% 20%;
  background: linear-gradient(135deg, rgba(216,232,255,.16), rgba(55,245,255,.035));
  box-shadow: inset 0 0 42px rgba(55,245,255,.15), 0 0 42px rgba(139,92,255,.25);
  backdrop-filter: blur(14px);
  transform: rotate(19deg);
  animation: leafFloat 9s ease-in-out infinite;
}
.glass-leaf::before, .glass-leaf::after {
  content: "";
  position: absolute;
  inset: 12%;
  border-left: 1px solid rgba(183,255,60,.48);
  transform: rotate(-17deg);
}
.glass-leaf::after {
  inset: 18% 24%;
  border-left-color: rgba(255,79,216,.34);
  transform: translate(11px, 5px) rotate(-17deg);
  filter: blur(.5px);
}
.glass-leaf span {
  position: absolute;
  inset: 26% 18%;
  background: repeating-linear-gradient(180deg, rgba(55,245,255,.0) 0 10px, rgba(55,245,255,.18) 11px 12px);
  border-radius: inherit;
}

.hero-wordmark {
  position: absolute;
  left: 9vw;
  bottom: 24vh;
  font-family: var(--display);
  font-size: clamp(74px, 16vw, 220px);
  line-height: .82;
  letter-spacing: .07em;
  color: var(--mist);
  text-shadow: 0 0 10px rgba(55,245,255,.9), 0 0 48px rgba(255,79,216,.35);
  animation: neonWarm 4s ease-in-out both;
}

.glitch-word::before, .glitch-word::after, .chroma-text::before, .chroma-text::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .5;
}
.glitch-word::before, .chroma-text::before { color: var(--cyan); transform: translate(-3px, 1px); mix-blend-mode: screen; }
.glitch-word::after, .chroma-text::after { color: var(--magenta); transform: translate(3px, -1px); mix-blend-mode: screen; }
.glitching .glitch-word::before, .glitching .chroma-text::before { animation: chromaSlip .32s steps(2, end); }
.glitching .glitch-word::after, .glitching .chroma-text::after { animation: chromaSlip .32s steps(2, end) reverse; }

.opening-line {
  position: absolute;
  left: 11vw;
  bottom: 17vh;
  margin: 0;
  font-size: clamp(19px, 2.1vw, 34px);
  color: rgba(216,232,255,.82);
}
.chroma-text { position: absolute; }

.tiny-label, .whisper {
  position: absolute;
  font-family: var(--poetic);
  font-style: italic;
  color: rgba(216,232,255,.68);
  font-size: clamp(17px, 1.5vw, 24px);
}
.label-one { right: 10vw; bottom: 12vh; }
.label-two { left: 6vw; top: 28vh; color: rgba(183,255,60,.66); }
.right-whisper { right: 12vw; top: 25vh; width: 270px; }
.left-whisper { left: 7vw; bottom: 15vh; width: 250px; }

.chapter-glyph {
  position: absolute;
  left: 6vw;
  top: 13vh;
  font-family: var(--display);
  font-size: clamp(110px, 18vw, 280px);
  color: rgba(55,245,255,.13);
  text-shadow: 0 0 30px rgba(55,245,255,.22);
}

.specimen-card, .final-panel {
  position: absolute;
  border: 1px solid rgba(55,245,255,.42);
  background: linear-gradient(145deg, rgba(216, 232, 255, 0.13), rgba(23, 40, 74, 0.36));
  backdrop-filter: blur(24px) saturate(125%);
  box-shadow: inset 0 1px 0 rgba(216,232,255,.18), 0 28px 92px rgba(0,0,0,.34), 0 0 34px rgba(55,245,255,.12);
  overflow: hidden;
  transform-style: preserve-3d;
  transition: transform .55s ease, border-color .45s ease, box-shadow .45s ease;
}
.specimen-card:hover, .final-panel:hover { border-color: rgba(255,79,216,.65); box-shadow: inset 0 1px 0 rgba(216,232,255,.22), 0 34px 100px rgba(0,0,0,.42), 0 0 48px rgba(255,79,216,.18); }
.specimen-card::before, .final-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(180deg, rgba(216,232,255,.025) 0 2px, transparent 3px 9px);
  pointer-events: none;
}
.specimen-card::after, .final-panel::after {
  content: "";
  position: absolute;
  inset: -30%;
  background: linear-gradient(90deg, transparent, rgba(55,245,255,.12), transparent, rgba(255,79,216,.12), transparent);
  transform: translateX(-40%) rotate(16deg);
  animation: glassSweep 9s linear infinite;
  pointer-events: none;
}
.rim-light {
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(120deg, rgba(55,245,255,.0), rgba(55,245,255,.32), rgba(255,79,216,.28), rgba(55,245,255,.0));
  opacity: .45;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  padding: 1px;
}
.vine-trace {
  position: absolute;
  inset: 16px;
  border-radius: 26px;
  border-top: 1px solid rgba(183,255,60,.52);
  border-right: 1px solid rgba(183,255,60,.18);
  clip-path: inset(0 62% 78% 0);
  transition: clip-path .8s ease;
}
.specimen-card:hover .vine-trace, .final-panel:hover .vine-trace { clip-path: inset(0 0 0 0); }

.card-loop {
  left: 42vw;
  top: 23vh;
  width: min(460px, 42vw);
  min-height: 430px;
  border-radius: 34px 12px 42px 18px;
  padding: 40px;
  animation: cardDrift 8s ease-in-out infinite;
}

.specimen-label {
  margin: 0 0 25px;
  color: var(--algae);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.specimen-card h1, .specimen-card h2, .final-panel h2 {
  margin: 0;
  font-family: var(--body);
  font-weight: 500;
  letter-spacing: -.04em;
  color: var(--mist);
}
.specimen-card h1 { font-size: clamp(34px, 4.2vw, 64px); line-height: .94; }
.specimen-card h2, .final-panel h2 { font-size: clamp(26px, 3vw, 44px); line-height: 1; }
.specimen-copy, .final-panel p:not(.specimen-label) {
  position: relative;
  z-index: 1;
  color: rgba(216,232,255,.72);
  font-size: 17px;
  line-height: 1.55;
}

.waveform { display: flex; align-items: end; gap: 8px; height: 92px; margin: 30px 0 18px; }
.waveform i {
  width: 8px;
  height: calc(18px + var(--h, 24px));
  border-radius: 99px;
  background: linear-gradient(var(--cyan), var(--magenta));
  box-shadow: 0 0 18px rgba(55,245,255,.38);
  animation: wavePulse 1.8s ease-in-out infinite;
}
.waveform i:nth-child(2) { --h: 44px; animation-delay: .1s; }
.waveform i:nth-child(3) { --h: 70px; animation-delay: .2s; }
.waveform i:nth-child(4) { --h: 35px; animation-delay: .3s; }
.waveform i:nth-child(5) { --h: 58px; animation-delay: .4s; }
.waveform i:nth-child(6) { --h: 28px; animation-delay: .5s; }
.waveform i:nth-child(7) { --h: 66px; animation-delay: .6s; }
.waveform i:nth-child(8) { --h: 40px; animation-delay: .7s; }

.specimen-cluster { position: absolute; inset: 0; }
.card-seed { width: min(380px, 36vw); min-height: 410px; left: 17vw; top: 18vh; padding: 34px; border-radius: 18px 44px 18px 38px; animation: cardDrift 9s ease-in-out infinite .4s; }
.card-dew { width: min(390px, 36vw); min-height: 390px; right: 16vw; bottom: 15vh; padding: 34px; border-radius: 46px 18px 38px 18px; animation: cardDrift 10s ease-in-out infinite reverse; }

.seed-diagram {
  position: relative;
  height: 128px;
  margin: 26px 0;
  border-radius: 80px;
  background: radial-gradient(circle at 50% 50%, rgba(183,255,60,.22), transparent 24%), radial-gradient(circle, rgba(55,245,255,.1), transparent 60%);
}
.seed-diagram b {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--algae);
  box-shadow: 0 0 18px var(--algae);
}
.seed-diagram b:nth-child(1) { left: 48%; top: 14%; }
.seed-diagram b:nth-child(2) { left: 27%; top: 48%; }
.seed-diagram b:nth-child(3) { right: 25%; top: 45%; }
.seed-diagram b:nth-child(4) { left: 41%; bottom: 12%; }
.seed-diagram b:nth-child(5) { right: 42%; bottom: 27%; background: var(--cyan); box-shadow: 0 0 18px var(--cyan); }

.dew-drop {
  width: 138px;
  height: 138px;
  margin: 28px auto;
  border-radius: 56% 44% 61% 39% / 49% 44% 56% 51%;
  border: 1px solid rgba(55,245,255,.62);
  background: radial-gradient(circle at 35% 28%, rgba(216,232,255,.54), transparent 12%), linear-gradient(135deg, rgba(55,245,255,.22), rgba(255,79,216,.16));
  box-shadow: inset -18px -20px 34px rgba(139,92,255,.22), 0 0 36px rgba(55,245,255,.28);
}

.hidden-botanical {
  position: absolute;
  opacity: .18;
  transition: opacity .45s ease, transform .45s ease;
}
.specimen-card:hover .hidden-botanical { opacity: .62; transform: translateZ(40px) scale(1.05); }
.moth-wing { right: -28px; bottom: -12px; width: 170px; height: 120px; border-radius: 72% 28% 66% 34%; background: repeating-linear-gradient(20deg, rgba(255,79,216,.45) 0 3px, rgba(55,245,255,.22) 4px 11px); }
.fern-pixel { right: 20px; bottom: 18px; width: 120px; height: 150px; background: linear-gradient(90deg, transparent 49%, var(--algae) 50%, transparent 51%); }
.fern-pixel::before { content: ""; position: absolute; inset: 18px 10px; background: repeating-linear-gradient(135deg, transparent 0 10px, rgba(183,255,60,.58) 11px 16px, transparent 17px 28px); }
.orchid-wire { right: 20px; bottom: 20px; width: 145px; height: 145px; border-radius: 50%; border: 1px solid rgba(255,79,216,.55); box-shadow: inset 34px 0 0 rgba(139,92,255,.18), 0 0 24px rgba(255,79,216,.25); }

.final-panel {
  width: min(620px, 62vw);
  left: 16vw;
  top: 25vh;
  padding: 44px 48px 38px;
  border-radius: 14px 56px 20px 42px;
}
.next-pattern {
  margin-top: 18px;
  color: var(--mist);
  background: rgba(216,232,255,.08);
  border: 1px solid rgba(55,245,255,.48);
  border-radius: 999px;
  padding: 13px 19px;
  box-shadow: 0 0 24px rgba(55,245,255,.12);
  cursor: pointer;
  transition: .35s ease;
}
.next-pattern:hover { border-color: var(--magenta); color: white; transform: translateY(-2px); }

.retro-sun {
  position: absolute;
  right: 10vw;
  bottom: 18vh;
  width: 220px;
  height: 110px;
  border-radius: 220px 220px 0 0;
  background: linear-gradient(var(--magenta), var(--orchid));
  opacity: .42;
  overflow: hidden;
  filter: blur(.2px) drop-shadow(0 0 34px rgba(255,79,216,.35));
}
.retro-sun span { display: block; height: 12px; margin-top: 14px; background: var(--deep-lagoon); opacity: .75; }

.pollen {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 13px var(--cyan);
  opacity: .76;
  transform: translate3d(var(--x), var(--y), 0);
  animation: pollenFloat var(--dur) linear infinite;
}
.pollen:nth-child(3n) { background: var(--algae); box-shadow: 0 0 13px var(--algae); }
.pollen:nth-child(4n) { background: var(--magenta); box-shadow: 0 0 13px var(--magenta); }
.cursor-spore {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 30;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border: 1px solid rgba(183,255,60,.5);
  border-radius: 50%;
  pointer-events: none;
  box-shadow: 0 0 22px rgba(183,255,60,.2);
  transform: translate(-80px, -80px);
}

.transition-smear {
  position: fixed;
  inset: 0;
  z-index: 15;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(55,245,255,.16), rgba(255,79,216,.18), transparent);
  transform: translateX(-100%) skewX(-10deg);
}
.transition-smear.active { animation: smear .7s ease; }

@keyframes gridBreathe { 0%,100% { opacity: .38; } 50% { opacity: .62; } }
@keyframes driftGlow { to { transform: translate(7vw, 5vh) scale(1.08); } }
@keyframes leafFloat { 0%,100% { transform: translateY(0) rotate(19deg); } 50% { transform: translateY(-24px) rotate(24deg); } }
@keyframes neonWarm { 0% { opacity: .08; filter: blur(5px); } 18% { opacity: .4; } 25% { opacity: .16; } 52% { opacity: .82; filter: blur(1px); } 100% { opacity: 1; filter: blur(0); } }
@keyframes chromaSlip { 0% { transform: translate(0); clip-path: inset(0 0 0 0); } 35% { transform: translate(14px, -2px); clip-path: inset(20% 0 48% 0); } 65% { transform: translate(-11px, 2px); clip-path: inset(62% 0 8% 0); } 100% { transform: translate(0); clip-path: inset(0 0 0 0); } }
@keyframes glassSweep { to { transform: translateX(40%) rotate(16deg); } }
@keyframes cardDrift { 0%,100% { translate: 0 0; } 50% { translate: 0 -16px; } }
@keyframes wavePulse { 0%,100% { transform: scaleY(.55); opacity: .62; } 50% { transform: scaleY(1); opacity: 1; } }
@keyframes pollenFloat { from { translate: 0 0; } to { translate: var(--dx) -118vh; } }
@keyframes smear { 0% { opacity: 0; transform: translateX(-110%) skewX(-10deg); } 24% { opacity: 1; } 100% { opacity: 0; transform: translateX(110%) skewX(-10deg); } }

@media (max-width: 760px) {
  .garden-gates { right: 5vw; }
  .hero-wordmark { left: 7vw; bottom: 28vh; font-size: 24vw; }
  .opening-line { left: 8vw; right: 16vw; bottom: 20vh; }
  .glass-leaf { left: 55vw; width: 115px; height: 230px; }
  .card-loop, .card-seed, .card-dew, .final-panel { left: 7vw; right: auto; top: 22vh; bottom: auto; width: 76vw; min-height: 0; padding: 28px; }
  .card-dew { top: auto; bottom: 10vh; }
  .left-whisper, .right-whisper { display: none; }
  .retro-sun { width: 140px; height: 70px; right: 9vw; bottom: 9vh; }
}