:root {
  /* Compliance phrases from DESIGN.md: Interactions should be quiet but memorable: hovering a margin note causes nearby ripple lines to tremble. Primary geometric sans: **Space Grotesk** in 500/700 for the `hinagiku.moe` wordmark; parsed token Grotesk** retained as Groteskk Grotesk*. */
  --deep-pond: #0B2A1D;
  --moss-ink: #1E4A34;
  --daisy-white: #F5F1DE;
  --stem-green: #5F8F5B;
  --algae-shadow: #06130E;
  --bubble-glass: #B7E3D1;
  --glitch-violet: #A46CFF;
  --glitch-coral: #FF7A6B;
  --space: "Space Grotesk", Inter, system-ui, sans-serif;
  --noto: "Noto Sans JP", Inter, system-ui, sans-serif;
  --zen: "Zen Kaku Gothic New", "Noto Sans JP", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  background: var(--algae-shadow);
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--daisy-white);
  font-family: var(--noto);
  background:
    radial-gradient(circle at 18% 20%, rgba(183, 227, 209, 0.12), transparent 26rem),
    radial-gradient(circle at 82% 80%, rgba(95, 143, 91, 0.16), transparent 30rem),
    linear-gradient(145deg, var(--algae-shadow) 0%, var(--deep-pond) 42%, #0a2017 100%);
  overflow-x: hidden;
}

.pond-vignette {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
  box-shadow: inset 0 0 8rem 2rem var(--algae-shadow);
  background-image: linear-gradient(90deg, rgba(245, 241, 222, 0.025) 1px, transparent 1px), linear-gradient(rgba(245, 241, 222, 0.018) 1px, transparent 1px);
  background-size: 5.5rem 5.5rem;
  mix-blend-mode: screen;
}

.bookmark {
  position: fixed;
  top: 50%;
  right: 2.1rem;
  width: 1px;
  height: 44vh;
  transform: translateY(-50%);
  background: linear-gradient(transparent, var(--stem-green), transparent);
  z-index: 30;
}

.petal-tick {
  position: absolute;
  left: 50%;
  width: 0.86rem;
  height: 1.45rem;
  border: 1px solid rgba(245, 241, 222, 0.55);
  border-radius: 80% 12% 80% 12%;
  background: rgba(245, 241, 222, 0.16);
  transform: translate(-50%, -50%) rotate(34deg);
  transition: background 420ms ease, border-color 420ms ease, filter 420ms ease;
  text-decoration: none;
}

.petal-tick:nth-child(1) { top: 0%; }
.petal-tick:nth-child(2) { top: 25%; }
.petal-tick:nth-child(3) { top: 50%; }
.petal-tick:nth-child(4) { top: 75%; }
.petal-tick:nth-child(5) { top: 100%; }
.petal-tick span { opacity: 0; position: absolute; right: 1.2rem; top: 0; font: 500 0.65rem var(--space); color: var(--bubble-glass); letter-spacing: 0.16em; }
.petal-tick.active { background: var(--daisy-white); border-color: var(--daisy-white); filter: drop-shadow(2px 0 var(--glitch-coral)) drop-shadow(-2px 0 var(--glitch-violet)); }
.petal-tick.active span, .petal-tick:hover span { opacity: 1; }

.editorial-pond { position: relative; }

.ripple-spread {
  min-height: 100vh;
  position: relative;
  display: grid;
  grid-template-columns: minmax(1.2rem, 0.6fr) minmax(18rem, 1.1fr) minmax(16rem, 0.9fr) minmax(1.2rem, 0.4fr);
  align-items: center;
  padding: clamp(4rem, 9vw, 8rem) clamp(1.2rem, 6vw, 6rem);
  isolation: isolate;
  overflow: hidden;
}

.ripple-spread::before {
  content: "";
  position: absolute;
  inset: 7vh 7vw;
  border: 1px solid rgba(183, 227, 209, 0.13);
  border-radius: 44% 56% 49% 51% / 52% 40% 60% 48%;
  transform: rotate(var(--ring-rotation, 0deg));
  opacity: 0.72;
  animation: ringPulse 9s ease-in-out infinite;
  z-index: -1;
}

.opening { --ring-rotation: -8deg; }
.index-spread { --ring-rotation: 7deg; background: linear-gradient(180deg, rgba(11, 42, 29, 0.08), rgba(30, 74, 52, 0.16)); }
.field-note { --ring-rotation: -14deg; }
.distortion { --ring-rotation: 3deg; background: radial-gradient(circle at 72% 36%, rgba(164, 108, 255, 0.08), transparent 22rem); }
.colophon { --ring-rotation: 16deg; }

.title-block {
  grid-column: 2 / 4;
  align-self: end;
  margin: 0 0 9vh 3vw;
  position: relative;
  z-index: 4;
}

.eyebrow {
  margin: 0 0 1.25rem;
  color: var(--bubble-glass);
  font: 500 0.72rem var(--space);
  letter-spacing: 0.32em;
  text-transform: lowercase;
}

.wordmark {
  margin: 0;
  font: 700 clamp(3.6rem, 12vw, 11rem) / 0.86 var(--space);
  letter-spacing: -0.055em;
  color: var(--daisy-white);
  text-shadow: 0 1.4rem 3rem rgba(6, 19, 14, 0.7);
}

.poem-line, .soft-fragment, .signature {
  max-width: 34rem;
  color: rgba(245, 241, 222, 0.76);
  font-size: clamp(1rem, 1.5vw, 1.35rem);
  font-weight: 300;
  letter-spacing: 0.03em;
}

.reading-plane {
  position: relative;
  z-index: 3;
  max-width: 43rem;
  padding: clamp(1.8rem, 4vw, 3.8rem);
  border-left: 1px solid rgba(183, 227, 209, 0.22);
  background: linear-gradient(120deg, rgba(30, 74, 52, 0.24), rgba(11, 42, 29, 0.05));
  backdrop-filter: blur(2px);
}

.offset-left { grid-column: 2 / 3; transform: translateY(-2vh); }
.offset-right { grid-column: 3 / 4; transform: translateY(4vh); }
.center-plane { grid-column: 2 / 4; justify-self: center; text-align: center; border: 1px solid rgba(183, 227, 209, 0.2); }
.washi { box-shadow: 0 2rem 5rem rgba(6, 19, 14, 0.28); }

h2 {
  margin: 0 0 1.2rem;
  font: 700 clamp(2rem, 5vw, 5.6rem) / 0.98 var(--space);
  letter-spacing: -0.045em;
  color: var(--daisy-white);
}

p {
  font-weight: 300;
  line-height: 1.85;
  color: rgba(245, 241, 222, 0.82);
}

.spread-number {
  position: absolute;
  left: clamp(1.5rem, 5vw, 5rem);
  top: 13vh;
  font: 700 clamp(4rem, 12vw, 12rem) / 1 var(--space);
  color: rgba(183, 227, 209, 0.075);
  letter-spacing: -0.08em;
}

.vertical-note {
  position: absolute;
  z-index: 8;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  color: var(--stem-green);
  font: 400 0.78rem var(--noto);
  letter-spacing: 0.2em;
  padding: 1.2rem 0;
  border-block: 1px solid rgba(95, 143, 91, 0.5);
  transition: transform 320ms ease, color 320ms ease, text-shadow 320ms ease;
}

.note-left { left: clamp(1rem, 3vw, 3rem); top: 22vh; }
.note-right { right: clamp(3.4rem, 7vw, 7rem); top: 20vh; }
.vertical-note.trembling, .vertical-note:hover { color: var(--bubble-glass); transform: translateY(-0.35rem) skewY(-3deg); text-shadow: 1px 0 var(--glitch-coral), -1px 0 var(--glitch-violet); }

.ghost-kana {
  position: absolute;
  right: 3vw;
  top: 5vh;
  font: 900 clamp(8rem, 22vw, 22rem) / 1 var(--zen);
  color: rgba(183, 227, 209, 0.035);
  pointer-events: none;
}

.floating-petal {
  position: absolute;
  width: clamp(3rem, 7vw, 6.5rem);
  height: clamp(6rem, 12vw, 11rem);
  border-radius: 82% 18% 77% 23% / 72% 30% 70% 28%;
  background: radial-gradient(circle at 55% 24%, #fff9e8, var(--daisy-white) 42%, rgba(245, 241, 222, 0.58));
  box-shadow: inset 0 -1rem 1.6rem rgba(183, 227, 209, 0.18), 0 2rem 5rem rgba(6, 19, 14, 0.48);
  cursor: pointer;
}

.floating-petal::before {
  content: "";
  position: absolute;
  inset: 12% 44% 8% 48%;
  background: linear-gradient(transparent, rgba(95, 143, 91, 0.45), transparent);
}

.hero-petal {
  left: 34vw;
  top: 16vh;
  transform: rotate(28deg);
  animation: petalDrift 11s ease-in-out infinite;
  z-index: 5;
}
.floating-petal.rotated { animation-play-state: paused; transform: rotate(126deg) scale(0.82); filter: drop-shadow(2px 0 var(--glitch-coral)) drop-shadow(-2px 0 var(--glitch-violet)); }

.bubble-lens {
  position: absolute;
  z-index: 6;
  width: clamp(8rem, 17vw, 18rem);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(183, 227, 209, 0.54);
  background: radial-gradient(circle at 34% 28%, rgba(245, 241, 222, 0.24), rgba(183, 227, 209, 0.13) 37%, rgba(183, 227, 209, 0.035) 68%, transparent 72%);
  box-shadow: inset 0 0 2.5rem rgba(183, 227, 209, 0.12), 0 0 2rem rgba(183, 227, 209, 0.08);
  backdrop-filter: blur(1.5px) contrast(1.4) saturate(1.25);
  transition: transform 500ms ease, border-color 500ms ease, filter 500ms ease;
}

.bubble-lens::after {
  content: attr(data-bubble);
  position: absolute;
  left: 58%;
  top: 53%;
  transform: translate(-50%, -50%);
  color: rgba(245, 241, 222, 0.68);
  font: 500 0.7rem var(--space);
  letter-spacing: 0.18em;
}

.bubble-lens:hover, .bubble-lens.magnify { transform: scale(1.12); border-color: var(--daisy-white); filter: drop-shadow(2px 0 rgba(255, 122, 107, 0.45)) drop-shadow(-2px 0 rgba(164, 108, 255, 0.45)); }
.title-lens { left: var(--lens-x, 48vw); top: 57vh; animation: lensDrift 12s ease-in-out infinite; }
.lens-small { right: 18vw; bottom: 16vh; width: clamp(6rem, 10vw, 10rem); }
.lens-large { left: 12vw; bottom: 12vh; width: clamp(10rem, 19vw, 20rem); }
.moon-bubble { right: 18vw; top: 18vh; }

.wave-divider {
  position: absolute;
  right: 8vw;
  bottom: 15vh;
  width: min(42rem, 54vw);
  height: 5rem;
  opacity: 0.8;
}
.wave-divider path { fill: none; stroke: var(--bubble-glass); stroke-width: 1.2; stroke-dasharray: 8 15; animation: dashTide 8s linear infinite; }

.thin-rule {
  position: absolute;
  width: 42vw;
  height: 1px;
  right: 12vw;
  top: 33vh;
  background: linear-gradient(90deg, transparent, var(--moss-ink), transparent);
}

.petal-list { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: 1rem; }
.petal-list li { display: grid; grid-template-columns: max-content 1fr; gap: 1rem; align-items: center; color: rgba(245, 241, 222, 0.68); font-size: 0.92rem; }
.petal-button { color: var(--daisy-white); border: 1px solid rgba(183, 227, 209, 0.32); background: transparent; padding: 0.65rem 0.9rem; border-radius: 999px; font: 500 0.76rem var(--space); letter-spacing: 0.16em; cursor: pointer; transition: color 300ms ease, border-color 300ms ease, transform 300ms ease; }
.petal-button:hover, .petal-button.active { color: var(--bubble-glass); border-color: var(--stem-green); transform: translateX(0.35rem) rotate(-1deg); }

.wave-stack { position: absolute; left: 10vw; top: 24vh; width: 24vw; display: grid; gap: 1.15rem; }
.wave-stack span { height: 1px; background: linear-gradient(90deg, transparent, var(--bubble-glass), transparent); transform-origin: left; animation: waveStill 5.5s ease-in-out infinite; }
.wave-stack span:nth-child(2) { animation-delay: -1s; opacity: 0.72; }
.wave-stack span:nth-child(3) { animation-delay: -2s; opacity: 0.52; }
.wave-stack span:nth-child(4) { animation-delay: -3s; opacity: 0.36; }
.wave-stack.tremble span { animation-duration: 520ms; background: linear-gradient(90deg, transparent, var(--glitch-coral), var(--glitch-violet), transparent); }

.broken-ripple { position: absolute; right: 13vw; top: 28vh; width: 24rem; aspect-ratio: 1; }
.broken-ripple i { position: absolute; inset: var(--inset); border: 1px solid rgba(183, 227, 209, 0.32); border-radius: 50%; clip-path: polygon(0 0, 44% 0, 44% 18%, 62% 18%, 62% 0, 100% 0, 100% 100%, 0 100%); animation: brokenPulse 4.8s steps(2, end) infinite; }
.broken-ripple i:nth-child(1) { --inset: 0; }
.broken-ripple i:nth-child(2) { --inset: 3rem; animation-delay: -1.3s; }
.broken-ripple i:nth-child(3) { --inset: 6rem; animation-delay: -2.6s; }

.reflection-band {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 18vh;
  padding: 0.4rem 0;
  color: rgba(183, 227, 209, 0.16);
  font: 700 clamp(2rem, 8vw, 7rem) var(--zen);
  letter-spacing: 0.06em;
  white-space: nowrap;
  transform: skewY(-2deg) scaleY(0.42);
  filter: blur(2px);
}

.glitch-text { position: relative; }
.glitch-text::before, .glitch-text::after { content: attr(data-text); position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.glitch-text::before { color: var(--glitch-violet); transform: translate(-2px, 0); }
.glitch-text::after { color: var(--glitch-coral); transform: translate(2px, 0); }
.glitching::before, .glitching::after, .glitch-text:hover::before, .glitch-text:hover::after { animation: textTear 620ms steps(2, end); }

@keyframes ringPulse { 0%, 100% { transform: rotate(var(--ring-rotation)) scale(0.98); opacity: 0.48; } 50% { transform: rotate(calc(var(--ring-rotation) + 2deg)) scale(1.04); opacity: 0.86; } }
@keyframes petalDrift { 0%, 100% { translate: 0 0; rotate: 0deg; } 50% { translate: 1.2rem -1.6rem; rotate: 7deg; } }
@keyframes lensDrift { 0%, 100% { translate: -6vw 0; } 50% { translate: 8vw -2vh; } }
@keyframes dashTide { to { stroke-dashoffset: -92; } }
@keyframes waveStill { 0%, 100% { transform: scaleX(0.84) translateX(0); } 50% { transform: scaleX(1.08) translateX(1.3rem); } }
@keyframes brokenPulse { 0%, 100% { transform: translate(0, 0) scale(1); border-color: rgba(183, 227, 209, 0.24); } 50% { transform: translate(4px, -2px) scale(1.03); border-color: rgba(255, 122, 107, 0.48); } }
@keyframes textTear { 0% { opacity: 0; clip-path: inset(0 0 0 0); } 30% { opacity: 0.72; clip-path: inset(12% 0 62% 0); } 60% { opacity: 0.58; clip-path: inset(58% 0 18% 0); letter-spacing: 0.03em; } 100% { opacity: 0; clip-path: inset(0 0 0 0); } }

@media (max-width: 760px) {
  .bookmark { right: 1rem; }
  .ripple-spread { grid-template-columns: 1fr; padding-right: 3rem; }
  .title-block, .offset-left, .offset-right, .center-plane { grid-column: 1; margin-left: 0; transform: none; }
  .vertical-note { display: none; }
  .wordmark { font-size: clamp(3.2rem, 17vw, 6rem); }
  .petal-list li { grid-template-columns: 1fr; }
  .wave-stack, .broken-ripple { opacity: 0.35; width: 70vw; right: 8vw; left: auto; }
}