:root {
  /* Typography compliance phrase: Inter** only for small functional details such as “lot” to create an artistic gallery ledger. */
  --night: #10241F;
  --leaf: #1F5C45;
  --petal: #F6F0DA;
  --mint: #A8D8BF;
  --lavender: #C9B9E8;
  --indigo: #27324F;
  --gold: #D9B75F;
  --rose: #C77B8A;
  --serif: "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --display: "Fraunces", "Baskerville", "Georgia", serif;
  --jp: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html {
  background: var(--night);
  color: var(--petal);
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100%;
  overflow-x: hidden;
  font-family: var(--serif);
  background:
    radial-gradient(circle at 18% 12%, rgba(168, 216, 191, 0.18), transparent 30rem),
    radial-gradient(circle at 88% 30%, rgba(201, 185, 232, 0.13), transparent 34rem),
    linear-gradient(128deg, #10241F 0%, #10241F 46%, #27324F 100%);
}

.filters { position: absolute; pointer-events: none; }

.paper-grain,
.glass-ribs,
.scent-plume,
.cursor-rings {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 3;
}

.paper-grain {
  opacity: 0.42;
  mix-blend-mode: soft-light;
  background-image:
    repeating-radial-gradient(circle at 20% 30%, rgba(246, 240, 218, 0.18) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(74deg, rgba(168, 216, 191, 0.08) 0 1px, transparent 1px 8px);
}

.glass-ribs {
  z-index: 1;
  opacity: 0.28;
  background:
    linear-gradient(100deg, transparent 0 11%, rgba(246, 240, 218, 0.16) 11.2% 11.5%, transparent 11.7% 24%, rgba(168, 216, 191, 0.12) 24.1% 24.5%, transparent 24.8% 49%, rgba(246, 240, 218, 0.12) 49.1% 49.4%, transparent 49.8% 77%, rgba(168, 216, 191, 0.12) 77.2% 77.5%, transparent 77.8%),
    repeating-linear-gradient(0deg, transparent 0 15vh, rgba(246, 240, 218, 0.06) 15.2vh 15.45vh);
}

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

.scene {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  display: grid;
  align-items: center;
  padding: clamp(2rem, 6vw, 6rem);
  isolation: isolate;
}

.scene::before,
.scene::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  filter: url(#watercolor) blur(0.4px);
  opacity: 0.56;
  z-index: -1;
}

.scene::before {
  width: 44vw;
  height: 44vw;
  background: radial-gradient(circle, rgba(168, 216, 191, 0.28), rgba(168, 216, 191, 0.05) 44%, transparent 69%);
  left: -12vw;
  top: 16vh;
}

.scene::after {
  width: 34vw;
  height: 34vw;
  background: radial-gradient(circle, rgba(201, 185, 232, 0.24), rgba(201, 185, 232, 0.05) 45%, transparent 70%);
  right: -8vw;
  bottom: 4vh;
}

.gate {
  place-items: center;
  background:
    radial-gradient(circle at 50% 42%, rgba(246, 240, 218, 0.09), transparent 18rem),
    linear-gradient(115deg, rgba(16, 36, 31, 0.95), rgba(31, 92, 69, 0.36), rgba(39, 50, 79, 0.76));
}

.condensation {
  position: absolute;
  inset: -6%;
  z-index: 2;
  opacity: calc(0.95 - var(--scroll, 0) * 1.4);
  backdrop-filter: blur(calc(11px - var(--scroll, 0) * 8px));
  background:
    radial-gradient(circle at 12% 22%, rgba(246, 240, 218, 0.34) 0 0.22rem, transparent 0.32rem),
    radial-gradient(circle at 31% 68%, rgba(168, 216, 191, 0.28) 0 0.18rem, transparent 0.29rem),
    radial-gradient(circle at 72% 18%, rgba(246, 240, 218, 0.24) 0 0.24rem, transparent 0.36rem),
    radial-gradient(circle at 88% 61%, rgba(201, 185, 232, 0.24) 0 0.16rem, transparent 0.28rem),
    repeating-radial-gradient(circle at 40% 40%, rgba(246, 240, 218, 0.11) 0 1px, transparent 2px 12px),
    linear-gradient(180deg, rgba(246, 240, 218, 0.09), rgba(168, 216, 191, 0.04));
  transform: translateY(calc(var(--scroll, 0) * 11vh));
}

.gate-label,
.vellum-tag,
.specimen,
.closing-ledger {
  background: linear-gradient(135deg, rgba(246, 240, 218, 0.76), rgba(168, 216, 191, 0.32) 58%, rgba(201, 185, 232, 0.2));
  color: var(--night);
  border: 1px solid rgba(246, 240, 218, 0.46);
  box-shadow: 0 2rem 7rem rgba(0, 0, 0, 0.26), inset 0 0 3rem rgba(246, 240, 218, 0.23);
  filter: url(#soft-bleed);
}

.specimen-label {
  position: relative;
  z-index: 4;
  width: min(36rem, 82vw);
  padding: clamp(1.3rem, 4vw, 2.6rem);
  text-align: center;
  transform: rotate(-2.5deg);
  clip-path: polygon(4% 0, 96% 2%, 100% 88%, 93% 100%, 6% 97%, 0 10%);
}

.jp {
  font-family: var(--jp);
  letter-spacing: 0.16em;
}

h1, h2, p { margin: 0; }

h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(4.2rem, 13vw, 12rem);
  line-height: 0.78;
  color: rgba(246, 240, 218, 0.88);
  text-shadow: 0 0 3rem rgba(168, 216, 191, 0.34);
  mix-blend-mode: screen;
}

.gate-label h1 {
  color: var(--night);
  mix-blend-mode: normal;
  font-size: clamp(3rem, 8vw, 8rem);
}

.gate-label p,
.detail,
.scroll-cue,
.seal-button {
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.72rem;
}

.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 2rem;
  transform: translateX(-50%);
  color: rgba(246, 240, 218, 0.68);
  z-index: 5;
}

.scent-plume { z-index: 4; opacity: 0.74; mix-blend-mode: screen; }

.plume-line {
  position: absolute;
  left: -12vw;
  bottom: 5vh;
  width: 128vw;
  height: 38vh;
  border-radius: 50%;
  border-top: 2.4rem solid rgba(168, 216, 191, 0.16);
  border-left: 1.2rem solid transparent;
  transform: rotate(calc(-18deg + var(--scroll, 0) * 18deg)) translateY(calc(var(--scroll, 0) * -15vh));
  filter: blur(12px) url(#watercolor);
}

.plume-two {
  border-top-color: rgba(201, 185, 232, 0.13);
  transform: rotate(calc(-24deg + var(--scroll, 0) * 24deg)) translate(8vw, calc(var(--scroll, 0) * -18vh));
}

.plume-three {
  border-top-color: rgba(246, 240, 218, 0.1);
  transform: rotate(calc(-12deg + var(--scroll, 0) * 11deg)) translate(-4vw, calc(var(--scroll, 0) * -12vh));
}

.bloom {
  position: absolute;
  width: 8.5rem;
  height: 8.5rem;
  filter: drop-shadow(0 0 2.3rem rgba(246, 240, 218, 0.5));
}

.bloom i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 3.8rem;
  height: 5.4rem;
  margin: -4.6rem 0 0 -1.9rem;
  border-radius: 72% 72% 48% 48%;
  background: radial-gradient(circle at 50% 24%, #F6F0DA, rgba(246, 240, 218, 0.86) 48%, rgba(168, 216, 191, 0.2));
  transform-origin: 50% 92%;
}

.bloom i:nth-child(2) { transform: rotate(72deg); }
.bloom i:nth-child(3) { transform: rotate(144deg); }
.bloom i:nth-child(4) { transform: rotate(216deg); }
.bloom i:nth-child(5) { transform: rotate(288deg); }
.bloom b {
  position: absolute;
  inset: 40%;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 1.2rem rgba(217, 183, 95, 0.72);
}

.entrance-bloom { right: 16vw; bottom: 18vh; z-index: 4; transform: scale(calc(0.7 + var(--scroll, 0) * 0.65)); }
.offscreen-bloom { right: -3rem; top: 18vh; transform: rotate(18deg); opacity: 0.84; }

.vellum-tag {
  position: relative;
  width: min(31rem, 84vw);
  padding: clamp(1.3rem, 3.4vw, 2.4rem);
  clip-path: polygon(3% 3%, 96% 0, 100% 90%, 90% 100%, 0 96%, 2% 12%);
  transform: rotate(var(--tilt, -2deg)) translateY(var(--lift, 0));
  transition: transform 700ms ease;
}

.vellum-tag h2,
.specimen h2,
.closing-ledger h2 {
  font-family: var(--display);
  font-size: clamp(2.6rem, 7vw, 6.7rem);
  font-weight: 500;
  line-height: 0.92;
  color: var(--leaf);
  margin: 0.45rem 0 1rem;
}

.vellum-tag p,
.specimen p,
.closing-ledger p {
  font-size: clamp(1.05rem, 1.8vw, 1.35rem);
  line-height: 1.62;
}

.lot-one { background: linear-gradient(160deg, rgba(16, 36, 31, 0.98), rgba(31, 92, 69, 0.44)); }
.tag-left { margin-left: 8vw; --tilt: -4deg; }
.mint-wash {
  position: absolute;
  left: 18vw;
  top: 20vh;
  width: 48vw;
  height: 48vw;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(168, 216, 191, 0.34), transparent 68%);
  filter: blur(18px) url(#watercolor);
  transform: scale(calc(0.75 + var(--scroll, 0) * 0.5));
}

.pearl-bids { display: flex; gap: 0.7rem; margin-top: 1.4rem; }
.pearl-bids span,
.orbit span {
  width: 0.74rem;
  height: 0.74rem;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #F6F0DA, #D9B75F 72%);
  box-shadow: 0 0 1rem rgba(217, 183, 95, 0.54);
}

.vertical-note {
  position: absolute;
  right: 10vw;
  bottom: 16vh;
  writing-mode: vertical-rl;
  color: rgba(246, 240, 218, 0.62);
}

.lot-two {
  justify-items: end;
  background: linear-gradient(90deg, rgba(16, 36, 31, 0.94), rgba(39, 50, 79, 0.88));
}

.tag-right { margin-right: 5vw; --tilt: 3deg; }
.narrow { width: min(27rem, 78vw); }

.trellis-lines {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 42vw;
  background:
    repeating-linear-gradient(90deg, transparent 0 3.2rem, rgba(168, 216, 191, 0.22) 3.25rem 3.38rem),
    repeating-linear-gradient(180deg, transparent 0 8rem, rgba(246, 240, 218, 0.12) 8.05rem 8.16rem);
  mask-image: linear-gradient(90deg, transparent, black 30%);
}

.drip-field span {
  position: absolute;
  top: -18vh;
  width: 0.18rem;
  height: 48vh;
  border-radius: 99px;
  background: linear-gradient(rgba(168, 216, 191, 0), rgba(168, 216, 191, 0.36), rgba(246, 240, 218, 0));
  animation: drip 7s infinite ease-in;
}
.drip-field span:nth-child(1) { right: 14vw; animation-delay: -1s; }
.drip-field span:nth-child(2) { right: 22vw; animation-delay: -3s; height: 62vh; }
.drip-field span:nth-child(3) { right: 31vw; animation-delay: -5s; }
.drip-field span:nth-child(4) { right: 39vw; animation-delay: -2s; height: 36vh; }
.drip-field span:nth-child(5) { right: 8vw; animation-delay: -4s; height: 54vh; }

@keyframes drip { 0% { transform: translateY(-30vh); opacity: 0; } 18%, 76% { opacity: 1; } 100% { transform: translateY(126vh); opacity: 0; } }

.mini-icons { display: flex; gap: 1rem; margin-top: 1.3rem; align-items: center; }
.drop { width: 0.8rem; height: 1.1rem; border-radius: 60% 60% 70% 70%; background: rgba(168, 216, 191, 0.74); transform: rotate(12deg); }
.knot { width: 1.3rem; height: 1.3rem; border: 2px solid var(--leaf); border-radius: 48% 52% 44% 56%; }

.archive {
  background: linear-gradient(150deg, rgba(246, 240, 218, 0.86), rgba(168, 216, 191, 0.42), rgba(16, 36, 31, 0.82));
  color: var(--night);
}
.specimen-stack { position: relative; width: min(48rem, 88vw); height: 38rem; margin: auto; }
.specimen {
  position: absolute;
  padding: 2rem;
  width: min(28rem, 78vw);
  min-height: 15rem;
}
.slip-a { left: 2rem; top: 7rem; transform: rotate(-7deg); }
.slip-b { right: 2rem; top: 3rem; transform: rotate(8deg); background: rgba(201, 185, 232, 0.42); }
.slip-c { left: 14rem; bottom: 2rem; transform: rotate(3deg); background: rgba(246, 240, 218, 0.62); }
.hand-number { font-family: var(--display); font-size: 5rem; color: var(--rose); opacity: 0.75; }
.pressed-vine span {
  position: absolute;
  width: 12rem;
  height: 0.18rem;
  background: rgba(31, 92, 69, 0.45);
  transform: rotate(-32deg);
}
.pressed-vine span:nth-child(1) { left: 8vw; bottom: 16vh; }
.pressed-vine span:nth-child(2) { left: 15vw; bottom: 22vh; transform: rotate(-12deg); }
.pressed-vine span:nth-child(3) { right: 12vw; top: 22vh; }
.pressed-vine span:nth-child(4) { right: 18vw; top: 30vh; transform: rotate(-55deg); }

.moon {
  background:
    radial-gradient(circle at 60% 40%, rgba(201, 185, 232, 0.28), transparent 22rem),
    linear-gradient(160deg, #10241F, #27324F 58%, #1F5C45);
}
.moon-bowl {
  position: absolute;
  left: 50%; top: 47%;
  width: min(42rem, 80vw); height: min(42rem, 80vw);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle at 44% 36%, rgba(246, 240, 218, 0.26), rgba(201, 185, 232, 0.12) 39%, rgba(39, 50, 79, 0.04) 65%, transparent 70%);
  box-shadow: inset 0 0 7rem rgba(246, 240, 218, 0.08), 0 0 8rem rgba(201, 185, 232, 0.2);
}
.moon-tag { margin-left: 8vw; --tilt: -1deg; background: linear-gradient(135deg, rgba(16, 36, 31, 0.6), rgba(246, 240, 218, 0.56)); color: var(--petal); }
.moon-tag h2 { color: var(--petal); }
.orbit { position: absolute; border: 1px solid rgba(246, 240, 218, 0.18); border-radius: 50%; animation: orbit 20s linear infinite; }
.orbit-a { width: 24rem; height: 24rem; right: 17vw; top: 24vh; }
.orbit-b { width: 15rem; height: 15rem; right: 28vw; top: 38vh; animation-duration: 14s; animation-direction: reverse; }
.orbit span { position: absolute; }
.orbit span:nth-child(1) { left: 50%; top: -0.4rem; }
.orbit span:nth-child(2) { right: -0.4rem; top: 50%; }
.orbit span:nth-child(3) { left: 16%; bottom: 8%; }
.orbit span:nth-child(4) { left: -0.4rem; top: 36%; }
@keyframes orbit { to { transform: rotate(360deg); } }
.moon-blooms .bloom { right: 24vw; top: 33vh; }
.moon-blooms .small { right: 14vw; top: 56vh; transform: scale(0.56) rotate(20deg); }

.closing {
  place-items: center;
  background:
    radial-gradient(circle at 50% 80%, rgba(199, 123, 138, 0.18), transparent 22rem),
    linear-gradient(180deg, #27324F, #10241F 60%);
}
.closing-ledger {
  position: relative;
  width: min(42rem, 86vw);
  padding: clamp(2rem, 5vw, 4rem);
  text-align: center;
  clip-path: polygon(2% 2%, 100% 0, 97% 94%, 88% 100%, 0 97%);
}
.closing-ledger h2 { font-family: var(--serif); color: var(--night); }
.seal-button {
  margin-top: 2rem;
  border: 1px solid rgba(16, 36, 31, 0.42);
  color: var(--night);
  background: rgba(217, 183, 95, 0.32);
  padding: 0.9rem 1.2rem;
  border-radius: 99px;
  cursor: pointer;
}
.stamp {
  position: absolute;
  right: 2rem;
  bottom: 2rem;
  width: 7rem;
  height: 7rem;
  border: 0.2rem double var(--rose);
  border-radius: 50%;
  color: var(--rose);
  display: grid;
  place-items: center;
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.13em;
  font-size: 0.68rem;
  transform: rotate(-17deg) scale(0);
  opacity: 0;
  transition: transform 520ms cubic-bezier(.2,1.6,.3,1), opacity 260ms ease;
}
.stamp.sealed { transform: rotate(-17deg) scale(1); opacity: 0.82; }

.petal-trail span {
  position: absolute;
  width: 1.3rem;
  height: 2.2rem;
  border-radius: 70% 70% 55% 55%;
  background: rgba(246, 240, 218, 0.76);
  filter: blur(0.2px);
  animation: floatPetal 11s infinite ease-in-out;
}
.petal-trail span:nth-child(1) { left: 8%; top: 22%; transform: rotate(22deg); }
.petal-trail span:nth-child(2) { left: 23%; top: 73%; animation-delay: -2s; }
.petal-trail span:nth-child(3) { left: 61%; top: 16%; animation-delay: -4s; }
.petal-trail span:nth-child(4) { left: 75%; top: 69%; animation-delay: -7s; }
.petal-trail span:nth-child(5) { left: 89%; top: 42%; animation-delay: -5s; }
.petal-trail span:nth-child(6) { left: 37%; top: 31%; animation-delay: -9s; }
@keyframes floatPetal { 50% { translate: 1.4rem -2.2rem; rotate: 18deg; opacity: 0.52; } }

.cursor-rings { z-index: 5; }
.cursor-rings::before,
.cursor-rings::after {
  content: "";
  position: absolute;
  left: var(--x, 50%);
  top: var(--y, 50%);
  width: 8rem;
  height: 8rem;
  border: 1px solid rgba(168, 216, 191, 0.28);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(var(--ring, 0.35));
  opacity: var(--ring-opacity, 0);
  transition: opacity 420ms ease;
}
.cursor-rings::after { width: 13rem; height: 13rem; border-color: rgba(201, 185, 232, 0.2); }

@media (max-width: 760px) {
  .scene { padding: 1.2rem; }
  .tag-left, .tag-right, .moon-tag { margin: 0; }
  .specimen-stack { height: 44rem; }
  .slip-a { left: 0; top: 3rem; }
  .slip-b { right: 0; top: 16rem; }
  .slip-c { left: 1rem; bottom: 0; }
  .orbit-a { right: -3rem; }
  .orbit-b { right: 2rem; }
}