:root {
  --violet: #30104D;
  --chlorophyll: #C7F23A;
  --magenta: #FF4FB8;
  --pollen: #FFF1B8;
  --glass: #090B2B;
  --leaf: #7CFF6B;
  --mauve: #9D6AAE;
  --display: "Bree Serif", Georgia, serif;
  --caption: "Fraunces", Georgia, serif;
  --ui: "Nunito Sans", Inter, system-ui, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--pollen);
  background: var(--glass);
  font-family: var(--caption);
  overflow-x: hidden;
}

body.zooming .chamber:not(.focused) { filter: blur(12px) saturate(.7); }

.greenhouse { position: relative; }

.chamber {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transform-style: preserve-3d;
}

.hero-chamber {
  background:
    radial-gradient(circle at 74% 27%, rgba(255, 79, 184, .36), transparent 26%),
    radial-gradient(circle at 90% 72%, rgba(199, 242, 58, .28), transparent 30%),
    linear-gradient(140deg, var(--violet), var(--glass) 62%, #160629);
}

.trellis-grid {
  position: absolute;
  inset: -10%;
  background-image: linear-gradient(115deg, rgba(199,242,58,.16) 1px, transparent 1px), linear-gradient(25deg, rgba(255,241,184,.09) 1px, transparent 1px);
  background-size: 96px 96px, 128px 128px;
  transform: rotate(-9deg) scale(1.12);
  opacity: .58;
}

.checker-floor {
  position: absolute;
  right: -8vw;
  bottom: -16vh;
  width: 78vw;
  height: 32vh;
  transform: perspective(520px) rotateX(62deg) rotateZ(-10deg);
  background-image: linear-gradient(45deg, rgba(255,241,184,.22) 25%, transparent 25%), linear-gradient(-45deg, rgba(255,241,184,.22) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, rgba(124,255,107,.18) 75%), linear-gradient(-45deg, transparent 75%, rgba(124,255,107,.18) 75%);
  background-size: 72px 72px;
  filter: blur(.2px);
}

.spotlight { position: absolute; border-radius: 999px; filter: blur(14px); mix-blend-mode: screen; }
.spotlight.one { width: 44vw; height: 44vw; left: -16vw; top: -18vw; background: rgba(199,242,58,.25); }
.spotlight.two { width: 34vw; height: 34vw; right: 10vw; top: 8vh; background: rgba(255,79,184,.28); }

.wordmark-wrap {
  position: absolute;
  left: -4vw;
  top: -4vh;
  z-index: 3;
  transform: rotate(-8deg);
}

.wordmark {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(8.8rem, 25vw, 26rem);
  line-height: .68;
  letter-spacing: -.09em;
  color: var(--pollen);
  text-shadow: 1.2vw 1.2vw 0 rgba(157,106,174,.65), 2vw 2vw 0 rgba(9,11,43,.72), -.35vw -.25vw 0 var(--chlorophyll);
  filter: blur(10px);
  opacity: .2;
  transform: scale(1.35);
  transition: filter 1.2s ease, opacity 1.2s ease, transform 1.4s cubic-bezier(.16,1,.3,1);
}

body.ready .wordmark { filter: blur(0); opacity: 1; transform: scale(1); }

.vowel {
  appearance: none;
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  letter-spacing: inherit;
  transition: transform .55s cubic-bezier(.2,1.4,.3,1), color .35s ease, filter .35s ease;
}

.vowel:hover, .vowel.active { color: var(--chlorophyll); transform: translateY(-.05em) scale(1.08); filter: drop-shadow(0 0 28px rgba(199,242,58,.65)); }
.vowel-e:hover, .vowel-e.active { color: var(--magenta); }
.vowel-i:hover, .vowel-i.active { color: var(--leaf); }

.tax-stamp {
  display: inline-block;
  margin-left: .04em;
  font-size: .28em;
  letter-spacing: -.02em;
  color: var(--chlorophyll);
  transform: rotate(12deg) translateY(-.28em);
  text-shadow: .35vw .35vw 0 var(--violet);
}

.hero-caption {
  width: min(380px, 52vw);
  margin: 3rem 0 0 12vw;
  font-size: clamp(1.15rem, 2vw, 2rem);
  line-height: 1.05;
  color: var(--pollen);
  text-shadow: 0 12px 30px rgba(9,11,43,.8);
}

.flora-stack { position: absolute; inset: 0; z-index: 2; pointer-events: none; perspective: 900px; }
.flower { position: absolute; transform-style: preserve-3d; filter: drop-shadow(24px 34px 28px rgba(9,11,43,.56)); }
.flower-a { width: 280px; height: 280px; right: 13vw; top: 10vh; animation: floatOne 6.8s ease-in-out infinite; }
.flower-e { width: 230px; height: 230px; right: 31vw; bottom: 13vh; animation: floatTwo 8.2s ease-in-out infinite; }
.flower-i { width: 160px; height: 310px; right: 6vw; bottom: 5vh; animation: floatThree 7.5s ease-in-out infinite; }

.petal, .fern-ring, .giant-petal {
  position: absolute;
  border-radius: 58% 42% 54% 46% / 62% 34% 66% 38%;
  background: radial-gradient(circle at 32% 24%, var(--pollen), var(--magenta) 28%, var(--violet) 72%);
  box-shadow: inset -18px -24px 34px rgba(9,11,43,.42), inset 9px 8px 18px rgba(255,241,184,.45), 0 0 0 5px rgba(199,242,58,.16);
}
.petal.p1 { width: 190px; height: 240px; left: 26px; top: 16px; transform: rotate(-28deg); }
.petal.p2 { width: 170px; height: 230px; right: 12px; top: 34px; transform: rotate(37deg); background: radial-gradient(circle at 28% 20%, var(--leaf), var(--mauve) 34%, var(--violet) 72%); }
.petal.p3 { width: 178px; height: 150px; left: 45px; bottom: 14px; transform: rotate(8deg); }
.seed-core { position: absolute; inset: 33% auto auto 36%; font: 5rem/.7 var(--display); color: var(--chlorophyll); text-shadow: 0 5px 0 var(--glass); }

.fern-ring { border: 18px solid var(--chlorophyll); background: transparent; box-shadow: inset 0 0 25px rgba(255,79,184,.55), 0 0 26px rgba(199,242,58,.36); }
.r1 { width: 220px; height: 220px; inset: 0; border-radius: 52% 48% 48% 52%; transform: rotate(20deg); }
.r2 { width: 150px; height: 150px; left: 35px; top: 35px; border-color: var(--magenta); transform: rotate(-18deg); }
.r3 { width: 86px; height: 86px; left: 67px; top: 67px; border-color: var(--pollen); }
.flower-e .seed-core { left: 40%; top: 39%; color: var(--magenta); }

.stem { position: absolute; left: 66px; top: 70px; width: 42px; height: 220px; border-radius: 44px; background: linear-gradient(90deg, var(--violet), var(--leaf), var(--chlorophyll)); box-shadow: inset -12px 0 20px rgba(9,11,43,.5); }
.pearl, .pollen { border-radius: 50%; background: radial-gradient(circle at 30% 24%, #fff, var(--pollen) 28%, var(--chlorophyll) 58%, var(--violet)); box-shadow: inset -14px -18px 24px rgba(9,11,43,.38), 0 0 35px rgba(199,242,58,.58); }
.pearl { position: absolute; width: 118px; height: 118px; left: 28px; top: 0; animation: pearlBob 2.8s ease-in-out infinite; }
.flower-i .seed-core { left: 48px; top: 112px; color: var(--glass); }
.pollen { position: absolute; width: 72px; height: 72px; }
.pearl-one { right: 41vw; top: 18vh; animation: pearlBob 3.4s ease-in-out infinite reverse; }
.pearl-two { right: 22vw; bottom: 34vh; width: 48px; height: 48px; animation: pearlBob 2.4s ease-in-out infinite; }
.moth { position: absolute; right: 42vw; top: 43vh; color: var(--pollen); font-size: 3rem; animation: mothDrift 9s linear infinite; }

.specimen-note, .chamber-copy, .glass-pane, .drawer, .label-cloud span, .closing-label {
  border: 1px solid rgba(255,241,184,.45);
  background: rgba(255,241,184,.12);
  box-shadow: 0 24px 60px rgba(9,11,43,.32), inset 0 0 35px rgba(255,241,184,.08);
  backdrop-filter: blur(12px);
}

.hero-note {
  position: absolute;
  right: 33vw;
  top: 29vh;
  z-index: 4;
  width: 210px;
  padding: 1rem;
  transform: rotate(8deg);
  font-family: var(--caption);
}
.hero-note span, .kicker { display: block; font-family: var(--ui); font-size: .68rem; text-transform: uppercase; letter-spacing: .22em; color: var(--chlorophyll); }
.hero-note strong { display: block; font: 1.9rem/.9 var(--display); color: var(--pollen); margin: .35rem 0; }
.hero-note em { font-size: .95rem; color: var(--pollen); }

.hanging-tags {
  position: fixed;
  top: 1.2rem;
  right: 1.2rem;
  z-index: 20;
  display: flex;
  gap: .55rem;
  transform: rotate(3deg);
}
.tag {
  position: relative;
  color: var(--glass);
  background: var(--pollen);
  padding: .55rem .75rem .48rem;
  border-radius: 0 0 16px 16px;
  font: 800 .72rem/1 var(--ui);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .12em;
  box-shadow: 0 12px 0 rgba(48,16,77,.55);
  transition: transform .25s ease, background .25s ease;
}
.tag:before { content: ""; position: absolute; left: 50%; top: -.5rem; width: 1px; height: .5rem; background: var(--pollen); }
.tag.active, .tag:hover { background: var(--chlorophyll); transform: translateY(5px) rotate(-2deg); }

.botanical-compass {
  position: fixed;
  left: 1.25rem;
  bottom: 1.25rem;
  z-index: 20;
  width: 66px;
  height: 66px;
  border: 2px solid var(--chlorophyll);
  border-radius: 50%;
  background: rgba(9,11,43,.55);
  box-shadow: 0 0 30px rgba(199,242,58,.28);
}
.compass-needle { position: absolute; left: 31px; top: 8px; width: 4px; height: 38px; border-radius: 4px; background: var(--magenta); transform-origin: 50% 25px; transition: transform .4s ease; }
.compass-dot { position: absolute; width: 10px; height: 10px; left: 27px; top: 27px; border-radius: 50%; background: var(--pollen); }

.inside-chamber {
  background: linear-gradient(122deg, var(--chlorophyll), var(--leaf) 42%, var(--violet) 43%, var(--glass));
}
.inside-orchid { position: absolute; left: -10vw; top: 2vh; width: 75vw; height: 92vh; filter: drop-shadow(30px 38px 38px rgba(48,16,77,.5)); }
.giant-petal { opacity: .95; }
.giant-petal.left { width: 40vw; height: 70vh; left: 2vw; top: 11vh; transform: rotate(-22deg); }
.giant-petal.center { width: 44vw; height: 78vh; left: 22vw; top: 6vh; transform: rotate(10deg); background: radial-gradient(circle at 32% 28%, var(--pollen), var(--chlorophyll) 18%, var(--magenta) 47%, var(--violet) 76%); }
.giant-petal.right { width: 30vw; height: 60vh; right: -3vw; top: 16vh; transform: rotate(31deg); background: radial-gradient(circle at 32% 25%, var(--pollen), var(--mauve) 36%, var(--glass)); }
.pollen-cluster { position: absolute; left: 28vw; top: 33vh; display: flex; flex-wrap: wrap; gap: 1.1rem; width: 26vw; transform: rotate(-10deg); }
.pollen-cluster span { display: grid; place-items: center; width: clamp(58px, 7vw, 110px); height: clamp(58px, 7vw, 110px); border-radius: 50%; background: radial-gradient(circle at 28% 20%, #fff, var(--pollen) 26%, var(--chlorophyll) 58%, var(--violet)); color: var(--glass); font: clamp(2rem, 5vw, 5rem)/1 var(--display); box-shadow: inset -12px -16px 22px rgba(9,11,43,.3), 0 16px 28px rgba(9,11,43,.3); }
.inside-copy { position: absolute; right: 6vw; top: 22vh; width: min(470px, 40vw); padding: 1.5rem; transform: rotate(4deg); }
.inside-copy h2 { margin: .35rem 0 .85rem; font: clamp(2.3rem, 5vw, 5.6rem)/.85 var(--display); color: var(--pollen); }
.inside-copy p:last-child { margin: 0; font-size: 1.1rem; line-height: 1.35; }
.magnifier-ring { position: absolute; z-index: 5; width: 190px; height: 190px; margin: -95px 0 0 -95px; border: 3px solid var(--pollen); border-radius: 50%; pointer-events: none; mix-blend-mode: screen; box-shadow: inset 0 0 30px rgba(255,241,184,.28), 0 0 42px rgba(255,241,184,.32); transform: translate(50vw, 50vh) scale(.8); transition: opacity .3s ease; }
.glass-pane { position: absolute; padding: 1rem 1.2rem; color: var(--glass); background: rgba(255,241,184,.42); font: 1.1rem var(--ui); text-transform: uppercase; letter-spacing: .15em; }
.pane-one { left: 11vw; bottom: 12vh; transform: rotate(-12deg); }
.pane-two { right: 19vw; bottom: 13vh; transform: rotate(8deg); }

.wall-chamber { background: radial-gradient(circle at 12% 18%, rgba(157,106,174,.5), transparent 26%), linear-gradient(165deg, var(--glass), var(--violet) 60%, #180523); }
.drawer-bank { position: absolute; inset: 15vh 9vw 11vh 10vw; transform: rotate(-5deg); }
.drawer { position: absolute; padding: clamp(1rem, 2vw, 2rem); color: var(--pollen); background: rgba(48,16,77,.72); transform-style: preserve-3d; }
.drawer h3 { margin: 0; font: clamp(6rem, 13vw, 14rem)/.75 var(--display); color: var(--chlorophyll); text-shadow: 10px 10px 0 var(--magenta); }
.drawer p { max-width: 330px; font-size: 1.18rem; }
.drawer-a { width: 34vw; min-height: 44vh; left: 0; top: 4vh; }
.drawer-e { width: 30vw; min-height: 36vh; left: 36vw; top: 0; transform: rotate(8deg); }
.drawer-i { width: 28vw; min-height: 39vh; right: 0; bottom: 0; transform: rotate(-7deg); }
.pin { position: absolute; width: 22px; height: 22px; right: 1.2rem; top: 1.2rem; border-radius: 50%; background: var(--magenta); box-shadow: 0 0 0 8px rgba(255,79,184,.2); }
.label-cloud { position: absolute; left: 8vw; right: 8vw; bottom: 7vh; display: flex; flex-wrap: wrap; gap: .8rem 1rem; transform: rotate(2deg); }
.label-cloud span { padding: .7rem 1rem; border-radius: 999px; color: var(--glass); background: var(--pollen); font: 900 .78rem/1 var(--ui); text-transform: uppercase; letter-spacing: .16em; }
.pressed-flower { position: absolute; border: 2px solid rgba(199,242,58,.28); border-radius: 50%; opacity: .36; }
.pressed-flower:before, .pressed-flower:after { content: ""; position: absolute; inset: 18%; border-radius: 60% 40%; background: var(--mauve); transform: rotate(45deg); }
.pressed-flower:after { transform: rotate(-45deg); background: var(--magenta); }
.f-one { width: 250px; height: 250px; right: 8vw; top: 7vh; }
.f-two { width: 180px; height: 180px; left: 5vw; bottom: 16vh; }

.seal-chamber { display: grid; place-items: center; background: radial-gradient(circle at 50% 33%, rgba(255,241,184,.24), transparent 28%), linear-gradient(180deg, var(--glass), var(--violet)); }
.moon-window { position: absolute; width: 52vmin; height: 52vmin; border-radius: 50%; border: 18px solid rgba(199,242,58,.22); background: radial-gradient(circle at 50% 35%, var(--pollen), var(--mauve) 45%, var(--violet) 70%); box-shadow: inset 0 0 80px rgba(9,11,43,.6), 0 0 70px rgba(199,242,58,.24); }
.conservatory-seal { position: relative; width: min(540px, 82vw); height: min(540px, 82vw); display: grid; place-items: center; border-radius: 50%; background: rgba(48,16,77,.76); border: 4px double var(--chlorophyll); box-shadow: 0 30px 80px rgba(9,11,43,.55), inset 0 0 60px rgba(255,241,184,.12); }
.seal-ring { position: absolute; inset: 1.2rem; display: grid; place-items: center; border: 1px dashed var(--pollen); border-radius: 50%; color: var(--chlorophyll); font: 900 clamp(.72rem, 1.8vw, 1.1rem)/1 var(--ui); text-transform: uppercase; letter-spacing: .28em; text-align: center; animation: spinSeal 18s linear infinite; }
.seal-core { position: relative; z-index: 2; text-align: center; transform: rotate(-6deg); }
.seal-vowels { display: block; font: clamp(7rem, 19vw, 13rem)/.75 var(--display); letter-spacing: -.08em; color: var(--pollen); text-shadow: 9px 9px 0 var(--magenta), -6px -6px 0 var(--chlorophyll); }
.seal-domain { font: 900 clamp(1.4rem, 4vw, 3rem)/1 var(--ui); color: var(--chlorophyll); letter-spacing: .22em; }
.closing-label { position: absolute; bottom: 8vh; width: min(560px, 86vw); padding: 1rem 1.2rem; text-align: center; transform: rotate(2deg); }
.final-tendrils span { position: absolute; width: 190px; height: 190px; border: 5px solid var(--leaf); border-left-color: transparent; border-bottom-color: transparent; border-radius: 50%; animation: tendrilCurl 5s ease-in-out infinite; }
.final-tendrils span:nth-child(1) { left: 10vw; top: 16vh; }
.final-tendrils span:nth-child(2) { right: 12vw; bottom: 18vh; animation-delay: -1.4s; }
.final-tendrils span:nth-child(3) { left: 22vw; bottom: 8vh; animation-delay: -2.6s; }

.vowel-card { position: fixed; z-index: 30; left: 50%; bottom: 3vh; width: min(420px, 88vw); display: flex; gap: 1rem; align-items: center; padding: .9rem 1rem; border-radius: 28px; background: var(--pollen); color: var(--glass); box-shadow: 0 22px 70px rgba(9,11,43,.5); transform: translate(-50%, 160%) scale(.92); transition: transform .45s cubic-bezier(.2,1.4,.3,1); }
.vowel-card.show { transform: translate(-50%, 0) scale(1); }
.vowel-card span { font: 4rem/.75 var(--display); color: var(--magenta); }
.vowel-card p { margin: 0; font: 800 1rem/1.15 var(--ui); text-transform: uppercase; letter-spacing: .08em; }

.lens-loader { position: fixed; inset: 0; z-index: 99; display: grid; place-items: center; background: var(--violet); transition: opacity .7s ease, transform 1s cubic-bezier(.16,1,.3,1), visibility .7s ease; }
.lens-loader p { position: absolute; bottom: 17vh; font: 900 .8rem/1 var(--ui); text-transform: uppercase; letter-spacing: .24em; color: var(--chlorophyll); }
.loader-orb { width: 140vmax; height: 140vmax; border-radius: 50%; background: radial-gradient(circle at 34% 30%, #fff 0 2%, var(--pollen) 4%, var(--chlorophyll) 13%, var(--magenta) 24%, var(--violet) 42%, var(--glass) 70%); transform: scale(.16); box-shadow: inset -7vmax -8vmax 12vmax rgba(9,11,43,.55); animation: loaderPulse 1.8s ease-in-out infinite alternate; }
body.ready .lens-loader { opacity: 0; visibility: hidden; transform: scale(1.8); }

@keyframes loaderPulse { to { transform: scale(.19) rotate(8deg); filter: saturate(1.3); } }
@keyframes floatOne { 50% { transform: translate3d(-16px, 22px, 70px) rotate(5deg); } }
@keyframes floatTwo { 50% { transform: translate3d(18px, -18px, 110px) rotate(-9deg); } }
@keyframes floatThree { 50% { transform: translate3d(0, 24px, 80px) rotate(6deg); } }
@keyframes pearlBob { 50% { transform: translateY(-18px) scale(1.05); } }
@keyframes mothDrift { 50% { transform: translate(-30px, 26px) rotate(40deg); opacity: .5; } }
@keyframes spinSeal { to { transform: rotate(360deg); } }
@keyframes tendrilCurl { 50% { transform: rotate(32deg) scale(1.08); border-color: var(--chlorophyll); border-left-color: transparent; border-bottom-color: transparent; } }

@media (max-width: 860px) {
  .wordmark-wrap { left: -12vw; top: 5vh; }
  .hero-caption { margin-left: 18vw; width: 70vw; }
  .flower-a { right: -8vw; top: 25vh; transform: scale(.76); }
  .flower-e { right: 34vw; bottom: 12vh; transform: scale(.78); }
  .flower-i { right: 4vw; bottom: 4vh; transform: scale(.75); }
  .hero-note { right: 7vw; top: 56vh; }
  .hanging-tags { transform: scale(.82) rotate(3deg); transform-origin: top right; }
  .inside-copy { width: 84vw; right: 8vw; top: 55vh; }
  .inside-orchid { width: 112vw; left: -28vw; }
  .drawer-bank { inset: 12vh 7vw 10vh; transform: none; }
  .drawer { width: 72vw; min-height: auto; }
  .drawer-a { left: 0; top: 0; }
  .drawer-e { left: 15vw; top: 30vh; }
  .drawer-i { left: 4vw; top: 58vh; }
  .label-cloud { bottom: 2vh; }
}