:root {
  /* Design compliance phrases: IntersectionObserver` `threshold: 0.2` */
  --midnight-foxglove: #0d1b3e;
  --twilight-periwinkle: #1a2d5e;
  --haze-cornflower: #4a6fa5;
  --moonlit-wisteria: #8b7fba;
  --morning-dew: #c8dae8;
  --ink-thistle: #2c2840;
  --bioluminescent-moss: #a7c7e7;
  --pressed-rose: #d4a0a0;
  --parchment-breath: #f0eff4;
}

* { box-sizing: border-box; }

html { min-height: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100%;
  background-color: #0d1b3e;
  color: var(--parchment-breath);
  font-family: "Cormorant Garamond", serif;
  overflow-x: hidden;
  transition: color 0.25s ease;
}

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
  opacity: 0.16;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.38'/%3E%3C/svg%3E");
}

.quest-page {
  position: relative;
  background:
    radial-gradient(circle at 18% 12%, rgba(167, 199, 231, 0.18), transparent 28rem),
    radial-gradient(circle at 84% 48%, rgba(139, 127, 186, 0.11), transparent 24rem),
    linear-gradient(180deg, rgba(13, 27, 62, 0.78), rgba(26, 45, 94, 0.52) 35%, rgba(200, 218, 232, 0.55) 100%);
}

.scene {
  position: relative;
  min-height: 100vh;
  padding: clamp(4rem, 12vh, 8rem) 0;
  display: grid;
  place-items: center;
}

.content-column {
  width: min(clamp(320px, 55vw, 640px), calc(100vw - 2rem));
  margin: 0 auto;
  position: relative;
  z-index: 2;
  text-align: center;
}

.threshold {
  min-height: 100vh;
  background: linear-gradient(180deg, #0d1b3e 0%, #1a2d5e 56%, #2a3f6e 100%);
  overflow: hidden;
}

.threshold::after {
  content: "";
  position: absolute;
  inset: auto -10% -18% -10%;
  height: 44%;
  background: radial-gradient(ellipse at center, rgba(167, 199, 231, 0.18), transparent 70%);
}

.annotation {
  margin: 0 0 0.9rem;
  font-family: "Kalam", cursive;
  font-size: clamp(0.75rem, 1.4vw, 0.95rem);
  font-weight: 300;
  font-style: italic;
  letter-spacing: 0.07em;
  color: currentColor;
  opacity: 0.73;
}

.moon-note { color: #e8eff7; }

.site-title {
  margin: 0;
  font-family: "Caveat", cursive;
  font-size: clamp(2.5rem, 7vw, 5.5rem);
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1;
  color: #f0eff4;
  text-shadow: 0 0 30px rgba(167, 199, 231, 0.4), 0 0 70px rgba(167, 199, 231, 0.22);
}

.scroll-vine {
  width: 7.5rem;
  height: 10rem;
  margin-top: 2.1rem;
  overflow: visible;
}

.stars {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.star {
  position: absolute;
  width: var(--size, 3px);
  height: var(--size, 3px);
  border-radius: 45% 55% 52% 48%;
  background: radial-gradient(circle, #a7c7e7 0 18%, rgba(167, 199, 231, 0.55) 42%, transparent 72%);
  box-shadow: 0 0 10px rgba(167, 199, 231, 0.72);
  filter: blur(0.2px);
  opacity: var(--base-opacity, 0.8);
}

.s1{left:50%;top:8%;--size:3px}.s2{left:43%;top:13%;--size:2px}.s3{left:58%;top:16%;--size:4px}.s4{left:36%;top:20%;--size:3px}.s5{left:66%;top:23%;--size:2px}.s6{left:28%;top:29%;--size:4px}.s7{left:74%;top:31%;--size:3px}.s8{left:19%;top:38%;--size:2px}.s9{left:82%;top:40%;--size:4px}.s10{left:12%;top:49%;--size:3px}.s11{left:88%;top:51%;--size:2px}.s12{left:47%;top:29%;--size:3px}.s13{left:54%;top:37%;--size:2px}.s14{left:38%;top:44%;--size:4px}.s15{left:62%;top:47%;--size:3px}.s16{left:30%;top:57%;--size:2px}.s17{left:70%;top:59%;--size:4px}.s18{left:22%;top:68%;--size:3px}.s19{left:78%;top:70%;--size:2px}.s20{left:15%;top:78%;--size:4px}.s21{left:85%;top:80%;--size:3px}.s22{left:52%;top:64%;--size:2px}.s23{left:45%;top:74%;--size:3px}.s24{left:60%;top:84%;--size:4px}.s25{left:6%;top:22%;--size:2px}.s26{left:94%;top:26%;--size:3px}.s27{left:8%;top:61%;--size:4px}.s28{left:92%;top:65%;--size:2px}.s29{left:33%;top:9%;--size:3px}.s30{left:68%;top:9%;--size:2px}.s31{left:39%;top:88%;--size:3px}.s32{left:71%;top:91%;--size:2px}

.botanical-svg,
.corner-botanical,
.scroll-vine,
.garland svg,
.wreath {
  fill: none;
  stroke: #4a6fa5;
  stroke-width: 1.5px;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.threshold .botanical-svg,
.threshold .scroll-vine {
  stroke: #a7c7e7;
  opacity: 0.82;
}

.corner-botanical {
  position: absolute;
  width: clamp(10rem, 22vw, 18rem);
  height: auto;
  z-index: 2;
}

.top-left { top: 4vh; left: 3vw; }

.draw-path {
  fill: none;
  stroke-dasharray: var(--path-length, 900);
  stroke-dashoffset: var(--path-length, 900);
  transition: stroke-dashoffset 2.5s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.draw-on-view.is-visible .draw-path { stroke-dashoffset: 0; }

.fill-bloom {
  stroke: none;
  fill: #8b7fba;
  opacity: 0;
  transform: scale(0.82);
  transform-origin: center;
  transition: opacity 1.5s ease 1.85s, transform 1.5s cubic-bezier(0.16, 1, 0.3, 1) 1.85s;
}

.fill-bloom.roses,
.wreath-fills .petal:nth-child(even) { fill: #d4a0a0; }
.fill-bloom.moon { fill: rgba(240, 239, 244, 0.68); }
.fill-bloom.leaves { fill: rgba(139, 127, 186, 0.45); }
.draw-on-view.is-visible .fill-bloom { opacity: 0.82; transform: scale(1); }

.meadow {
  position: relative;
  min-height: 300vh;
}

.stanza-section { overflow: visible; }

.passage-frame {
  padding: clamp(2.2rem, 6vw, 4.6rem) clamp(1.4rem, 4vw, 3rem);
  color: currentColor;
}

.passage-frame::before,
.passage-frame::after {
  content: "";
  position: absolute;
  inset: 0.7rem;
  border: 1px solid rgba(74, 111, 165, 0.38);
  border-radius: 52% 48% 49% 51% / 2.5rem 2rem 2.8rem 2.2rem;
  pointer-events: none;
  box-shadow: 0 0 34px rgba(167, 199, 231, 0.08);
}

.passage-frame::after {
  inset: 1.15rem 0.25rem 0.2rem 1.2rem;
  border-color: rgba(139, 127, 186, 0.22);
  transform: rotate(-0.7deg);
}

.stanza-title,
.gate-verse h2 {
  margin: 0 0 1.25rem;
  font-family: "Caveat", cursive;
  font-size: clamp(2rem, 5vw, 4.2rem);
  font-weight: 600;
  letter-spacing: 0.03em;
  line-height: 1.05;
  color: currentColor;
  text-shadow: 0 0 22px rgba(167, 199, 231, 0.2);
}

.stanza-line {
  margin: 0.35rem 0;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(1.1rem, 2.2vw, 1.5rem);
  font-weight: 300;
  line-height: 1.85;
  letter-spacing: 0.02em;
  opacity: 0;
  transform: translateY(20px);
}

.reveal-section.is-visible .stanza-line {
  animation: line-settle 1.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.reveal-section.is-visible .stanza-line:nth-of-type(2) { animation-delay: 0.15s; }
.reveal-section.is-visible .stanza-line:nth-of-type(3) { animation-delay: 0.3s; }
.reveal-section.is-visible .stanza-line:nth-of-type(4) { animation-delay: 0.45s; }

@keyframes line-settle { to { opacity: 1; transform: translateY(0); } }

.fern-bracket,
.ivy-thread,
.moonflower-arc {
  position: absolute;
  width: clamp(9rem, 18vw, 16rem);
  height: auto;
  opacity: 0.85;
  z-index: 1;
}

.left { left: max(1rem, calc(50% - 31rem)); top: 22%; }
.right { right: max(1rem, calc(50% - 32rem)); top: 18%; }

.garland {
  width: min(680px, 86vw);
  height: 9rem;
  margin: -4rem auto;
  position: relative;
  z-index: 3;
}
.garland svg { width: 100%; height: 100%; overflow: visible; }
.garland.mirrored { transform: rotate(1deg); }

.garden-gate {
  min-height: 100vh;
  overflow: hidden;
}

.wreath-wrap { display: grid; place-items: center; }
.wreath { width: min(82vw, 34rem); height: auto; overflow: visible; grid-area: 1 / 1; stroke: #4a6fa5; }
.gate-verse { grid-area: 1 / 1; width: min(62vw, 23rem); text-align: center; z-index: 3; }

.wreath-spin { transform-origin: 260px 260px; animation: rotate 120s linear infinite; }
.wreath-circle { stroke: rgba(74, 111, 165, 0.58); }
.wreath-fills { opacity: 0; transition: opacity 1.5s ease 1.85s; }
.draw-on-view.is-visible .wreath-fills { opacity: 0.82; }
.petal { stroke: none; fill: #8b7fba; transform-origin: center; animation: breathe 9s ease-in-out infinite; }
.p2 { animation-duration: 11s; animation-delay: -2s; }
.p3 { animation-duration: 8s; animation-delay: -4s; }
.p4 { animation-duration: 12s; animation-delay: -6s; }
.p5 { animation-duration: 10s; animation-delay: -1s; }

.colophon {
  margin: 2rem 0 0;
  font-family: "Kalam", cursive;
  font-size: clamp(0.75rem, 1.4vw, 0.95rem);
  font-weight: 300;
  letter-spacing: 0.12em;
}

@keyframes rotate { to { transform: rotate(360deg); } }
@keyframes breathe { 50% { transform: scale(1.03); } }

@media (max-width: 768px) {
  .content-column { width: 85vw; }
  .corner-botanical { left: -2rem; opacity: 0.45; }
  .fern-bracket, .ivy-thread, .moonflower-arc { opacity: 0.28; width: 11rem; }
  .left { left: -3rem; }
  .right { right: -3rem; }
  .star:nth-child(2n) { display: none; }
  .passage-frame { padding-inline: 1rem; }
  .gate-verse { width: 70vw; }
}