:root {
  /* Typography compliance notes: IBM Plex Mono** Mono from Google Fonts for circuit coordinates. */
  --paper: #F7EEDB;
  --celadon: #9FD8C2;
  --cyan: #00F0FF;
  --magenta: #FF2BD6;
  --violet: #5B35FF;
  --plum: #241329;
  --barley: #B9F25D;
  --peach: #FFB38A;
  --wash: #F7EEDB;
  --glow: #00F0FF;
  --spark: #FF2BD6;
  --offset: 0px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  overflow-x: hidden;
  color: var(--plum);
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 179, 138, .55), transparent 28rem),
    radial-gradient(circle at 82% 18%, rgba(0, 240, 255, .18), transparent 24rem),
    linear-gradient(135deg, var(--wash), var(--celadon));
  font-family: Inter, "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  transition: background 900ms ease, color 900ms ease;
}

.paper-grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  opacity: .34;
  mix-blend-mode: multiply;
  background-image:
    radial-gradient(circle at 12% 22%, rgba(36, 19, 41, .08) 0 1px, transparent 1.5px),
    radial-gradient(circle at 62% 72%, rgba(36, 19, 41, .06) 0 1px, transparent 1.8px),
    linear-gradient(90deg, rgba(255,255,255,.18), rgba(36,19,41,.03));
  background-size: 17px 19px, 23px 29px, 100% 100%;
}

.ambient-bloom {
  position: fixed;
  width: 42vw;
  height: 42vw;
  border-radius: 47% 53% 61% 39% / 42% 61% 39% 58%;
  filter: blur(34px);
  opacity: .36;
  pointer-events: none;
  z-index: 0;
  animation: floatBloom 18s ease-in-out infinite alternate;
}

.bloom-one { left: -10vw; top: 8vh; background: var(--peach); }
.bloom-two { right: -12vw; bottom: 4vh; background: var(--cyan); animation-delay: -7s; }

.era-stamps {
  position: fixed;
  right: 1.35rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  display: grid;
  gap: .62rem;
}

.era-stamps a {
  display: grid;
  place-items: center;
  width: 2.8rem;
  height: 2.8rem;
  color: var(--plum);
  text-decoration: none;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .9rem;
  border: 1px solid rgba(36, 19, 41, .45);
  border-radius: 37% 63% 51% 49% / 54% 39% 61% 46%;
  background: rgba(247, 238, 219, .62);
  box-shadow: 0 0 18px rgba(0, 240, 255, .18), inset 0 0 16px rgba(255, 43, 214, .08);
  backdrop-filter: blur(7px);
  transition: transform 300ms ease, background 300ms ease, box-shadow 300ms ease;
}

.era-stamps a.active, .era-stamps a:hover {
  transform: translateX(-5px) rotate(-7deg);
  background: rgba(185, 242, 93, .72);
  box-shadow: 0 0 22px var(--glow), inset 0 0 14px rgba(255, 43, 214, .26);
}

.phase {
  position: relative;
  min-height: 100vh;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(4rem, 7vw, 7rem) clamp(1.2rem, 6vw, 7rem);
}

.panorama {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(90deg, rgba(36, 19, 41, .08) 1px, transparent 1px),
    linear-gradient(0deg, rgba(36, 19, 41, .06) 1px, transparent 1px),
    radial-gradient(circle at 24% 74%, rgba(185, 242, 93, .42), transparent 18rem),
    radial-gradient(circle at 74% 30%, rgba(255, 43, 214, .2), transparent 20rem);
  background-size: 86px 86px, 86px 86px, auto, auto;
  opacity: .85;
}

.dawn-panorama { background-color: #F7EEDB; }
.noon-panorama { background-color: #9FD8C2; filter: saturate(1.2); }
.evening-panorama { background-color: #FFB38A; background-blend-mode: soft-light; }
.midnight-panorama { background-color: #241329; opacity: 1; }
.phase-midnight { color: #F7EEDB; }

.module {
  position: absolute;
  border: 1px solid rgba(36, 19, 41, .34);
  background:
    radial-gradient(circle at 18% 24%, rgba(255, 255, 255, .7), transparent 12rem),
    radial-gradient(circle at 82% 72%, rgba(159, 216, 194, .28), transparent 14rem),
    rgba(247, 238, 219, .72);
  box-shadow: 0 24px 60px rgba(36, 19, 41, .15), inset 0 0 48px rgba(255, 255, 255, .24);
  backdrop-filter: blur(10px);
  transform: translate3d(calc(var(--mx, 0px) + var(--offset)), var(--my, 0px), 0) rotate(var(--tilt, -1deg));
  transition: transform 700ms cubic-bezier(.2, 1.4, .25, 1), border-radius 700ms ease, background 700ms ease;
}

.module::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(0, 240, 255, .38), transparent 27%, rgba(255, 43, 214, .28), transparent 64%);
  opacity: .48;
  mix-blend-mode: screen;
}

.field-block {
  width: min(62rem, 68vw);
  min-height: 23rem;
  padding: clamp(2rem, 4vw, 4.3rem);
  border-radius: 28% 72% 68% 32% / 18% 22% 78% 82%;
  left: 7vw;
  top: 12vh;
}

.title-card { --tilt: -1.6deg; }
.noon-wash { left: 9vw; top: 17vh; --tilt: 1.2deg; }
.evening-panel { left: 25vw; top: 16vh; --tilt: -2.5deg; }
.midnight-board { left: 8vw; top: 12vh; background: radial-gradient(circle at 30% 20%, rgba(91,53,255,.42), transparent 18rem), rgba(36, 19, 41, .74); border-color: rgba(0,240,255,.45); }

h1, h2 {
  margin: 0;
  font-family: "Cormorant Garamond", Cormorant, Georgia, serif;
  font-weight: 700;
  line-height: .92;
  letter-spacing: -.045em;
}

h1 { font-size: clamp(5rem, 15vw, 15rem); }
h2 { font-size: clamp(3.6rem, 8vw, 8.4rem); max-width: 11ch; }
h3 {
  margin: 0 0 1rem;
  font-family: Fraunces, Georgia, serif;
  font-size: clamp(1.5rem, 2.3vw, 2.4rem);
  color: var(--violet);
}

.lead {
  max-width: 38rem;
  margin: 1.2rem 0 0;
  font-family: Fraunces, Georgia, serif;
  font-size: clamp(1.25rem, 2vw, 2.05rem);
  line-height: 1.25;
}

.micro, .caption {
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.micro { color: var(--violet); margin: 0 0 1.2rem; }
.caption { position: relative; margin: 1rem 0 0; color: inherit; opacity: .78; }

.poem-block {
  width: clamp(14rem, 23vw, 22rem);
  padding: 1.7rem;
  right: 12vw;
  top: 20vh;
  border-radius: 55% 45% 62% 38% / 16% 42% 58% 84%;
  --tilt: 2.4deg;
  font-family: Fraunces, Georgia, serif;
  font-size: clamp(1.1rem, 1.6vw, 1.55rem);
  line-height: 1.45;
}

.vertical-poem {
  width: 8rem;
  min-height: 25rem;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  letter-spacing: .08em;
}

.specimen-block {
  width: clamp(14rem, 22vw, 21rem);
  height: clamp(16rem, 26vw, 25rem);
  right: 20vw;
  bottom: 8vh;
  padding: 1.5rem;
  border-radius: 31% 69% 36% 64% / 66% 26% 74% 34%;
  --tilt: -4deg;
}

.circuit-map {
  width: clamp(18rem, 35vw, 33rem);
  height: clamp(18rem, 35vw, 33rem);
  right: 11vw;
  bottom: 9vh;
  padding: 1.5rem;
  border-radius: 16% 84% 32% 68% / 68% 24% 76% 32%;
  background: rgba(247, 238, 219, .45);
  --tilt: -1deg;
}

.date-seal {
  display: grid;
  place-items: center;
  width: 5.6rem;
  height: 5.6rem;
  right: 7vw;
  top: 11vh;
  border-radius: 36% 64% 58% 42% / 50% 35% 65% 50%;
  background: rgba(255, 43, 214, .14);
  color: var(--plum);
  font-family: "IBM Plex Mono", monospace;
  line-height: 1.15;
  text-align: center;
  box-shadow: 0 0 26px rgba(255, 43, 214, .28);
}

.noon-seal { left: 4vw; top: 62vh; }
.evening-seal { right: 8vw; top: 14vh; }
.midnight-seal { color: #F7EEDB; border-color: rgba(185,242,93,.48); background: rgba(91,53,255,.28); }

.phase-noon .poem-block { left: 11vw; top: 58vh; right: auto; }
.phase-evening .specimen-block { left: 8vw; bottom: 11vh; right: auto; }
.phase-evening .vertical-poem { right: 11vw; top: 48vh; }
.phase-midnight .circuit-map { right: 8vw; top: 18vh; bottom: auto; }
.phase-midnight .poem-block { left: 15vw; top: 67vh; right: auto; background: rgba(36, 19, 41, .62); border-color: rgba(0, 240, 255, .38); }

.circuit {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.trace {
  fill: none;
  stroke: var(--cyan);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 6px var(--cyan));
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: drawTrace 7s ease-in-out infinite alternate;
}

.secondary { stroke: var(--violet); animation-delay: -2s; }
.magenta { stroke: var(--magenta); animation-delay: -1.2s; }
.green-line { stroke: var(--barley); animation-delay: -3s; }
.node { fill: var(--cyan); filter: drop-shadow(0 0 9px var(--cyan)); animation: blinkNode 2.8s ease-in-out infinite; }
.node.green { fill: var(--barley); filter: drop-shadow(0 0 9px var(--barley)); animation-delay: -1.4s; }

.plant-stem, .iris-leaf {
  position: absolute;
  left: 50%;
  bottom: 3rem;
  width: 4px;
  height: 70%;
  border-radius: 999px;
  background: linear-gradient(var(--barley), var(--cyan));
  box-shadow: 0 0 12px rgba(0, 240, 255, .72);
  transform-origin: bottom;
}

.plant-stem { transform: translateX(-50%) rotate(-8deg); }
.petal {
  position: absolute;
  width: 5rem;
  height: 6.4rem;
  border-radius: 66% 34% 58% 42% / 66% 46% 54% 34%;
  background: radial-gradient(circle at 42% 38%, rgba(255,255,255,.72), rgba(255,179,138,.72) 45%, rgba(255,43,214,.35));
  filter: drop-shadow(0 0 8px rgba(255, 43, 214, .34));
}
.p1 { left: 42%; top: 18%; transform: rotate(-24deg); }
.p2 { left: 54%; top: 20%; transform: rotate(28deg); }
.p3 { left: 49%; top: 10%; transform: rotate(4deg); }

.iris-leaf.left { transform: translateX(-50%) rotate(-18deg); background: linear-gradient(var(--celadon), var(--cyan)); }
.iris-leaf.right { transform: translateX(-50%) rotate(19deg); height: 62%; background: linear-gradient(var(--barley), var(--violet)); }
.iris-flower {
  position: absolute;
  left: 50%;
  top: 15%;
  width: 6rem;
  height: 6rem;
  transform: translateX(-50%) rotate(18deg);
  border-radius: 72% 28% 64% 36% / 36% 64% 36% 64%;
  background: radial-gradient(circle, #F7EEDB 8%, #5B35FF 52%, #FF2BD6 82%);
  box-shadow: 0 0 18px rgba(91, 53, 255, .64);
}

.mini-vein { position: absolute; inset: 0; width: 100%; height: 100%; }
.moon-dots { display: flex; gap: .7rem; margin-top: 1.4rem; }
.moon-dots i { width: .8rem; height: .8rem; border-radius: 50%; background: var(--barley); box-shadow: 0 0 14px var(--barley); animation: blinkNode 3s infinite ease-in-out; }
.moon-dots i:nth-child(2) { animation-delay: -.5s; background: var(--cyan); }
.moon-dots i:nth-child(3) { animation-delay: -1s; }
.moon-dots i:nth-child(4) { animation-delay: -1.5s; background: var(--magenta); }
.moon-dots i:nth-child(5) { animation-delay: -2s; }

.petal-field span {
  position: fixed;
  z-index: 4;
  top: -8vh;
  width: 1.2rem;
  height: 1.7rem;
  border-radius: 70% 30% 55% 45%;
  background: rgba(255, 179, 138, .48);
  box-shadow: 0 0 12px rgba(255, 43, 214, .18);
  animation: petalDrift 18s linear infinite;
  pointer-events: none;
}
.petal-field span:nth-child(1) { left: 12%; animation-delay: -2s; }
.petal-field span:nth-child(2) { left: 28%; animation-delay: -8s; background: rgba(159,216,194,.52); }
.petal-field span:nth-child(3) { left: 44%; animation-delay: -4s; }
.petal-field span:nth-child(4) { left: 61%; animation-delay: -11s; background: rgba(185,242,93,.38); }
.petal-field span:nth-child(5) { left: 78%; animation-delay: -6s; }
.petal-field span:nth-child(6) { left: 88%; animation-delay: -13s; background: rgba(0,240,255,.32); }

.breathe { animation: breathePaper 7s cubic-bezier(.45,0,.2,1) infinite alternate; }
.breathe.slow { animation-duration: 10s; }

@keyframes breathePaper {
  0% { border-radius: 28% 72% 68% 32% / 18% 22% 78% 82%; }
  100% { border-radius: 38% 62% 56% 44% / 28% 34% 66% 72%; }
}

@keyframes drawTrace { to { stroke-dashoffset: 0; } }
@keyframes blinkNode { 0%, 100% { opacity: .45; transform: scale(.86); } 50% { opacity: 1; transform: scale(1.1); } }
@keyframes floatBloom { to { transform: translate(8vw, 5vh) rotate(18deg) scale(1.08); } }
@keyframes petalDrift { to { transform: translate(8vw, 118vh) rotate(380deg); } }

@media (max-width: 820px) {
  .phase { min-height: 125vh; padding: 4.5rem 1rem; }
  .field-block, .poem-block, .specimen-block, .circuit-map, .date-seal {
    position: relative;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: 100%;
    margin: 1rem 0;
  }
  .field-block { min-height: auto; }
  .specimen-block, .circuit-map { height: 20rem; }
  .vertical-poem { writing-mode: horizontal-tb; min-height: auto; width: 100%; }
  .era-stamps { right: .7rem; }
  h1 { font-size: clamp(4rem, 22vw, 7rem); }
}