:root {
  /* Typography compliance phrase: Space Grotesk** from Google Fonts for short annotations; Grotesk* Groteskk Grotes. */
  --abyss: #11151C;
  --graphite: #222936;
  --ink: #070A0F;
  --cyan: #32E6FF;
  --coral: #FF5A3D;
  --milk: #F3F0DA;
  --violet: #6C4CFF;
  --bluegray: #9EACBA;
  --display: "Bricolage Grotesque", "Arial Black", system-ui, sans-serif;
  --grotesk: "Space Grotesk", Inter, system-ui, sans-serif;
  --serif-jp: "Noto Serif JP", serif;
  --shadow-dark: 22px 28px 52px rgba(0, 0, 0, .65);
  --shadow-lift: -14px -14px 34px rgba(50, 230, 255, .045), 18px 24px 42px rgba(0, 0, 0, .72), inset 1px 1px 1px rgba(243, 240, 218, .07);
  --shadow-inset: inset 18px 18px 34px rgba(0, 0, 0, .72), inset -12px -12px 24px rgba(50, 230, 255, .035);
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  min-height: 100vh;
  color: var(--milk);
  font-family: var(--grotesk);
  background:
    radial-gradient(circle at 78% 8%, rgba(108, 76, 255, .18), transparent 28vw),
    radial-gradient(circle at 16% 72%, rgba(50, 230, 255, .08), transparent 34vw),
    linear-gradient(135deg, var(--abyss), var(--ink) 56%, #0D1118);
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }

.noise-field {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: .36;
  background-image:
    radial-gradient(circle at 12% 18%, rgba(243, 240, 218, .05) 0 1px, transparent 1px),
    radial-gradient(circle at 70% 42%, rgba(50, 230, 255, .045) 0 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025), transparent 18%, rgba(255,255,255,.018));
  background-size: 31px 31px, 47px 47px, 100% 100%;
  mix-blend-mode: screen;
}

.cursor-aura {
  position: fixed;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 2;
  opacity: .28;
  transform: translate3d(-50%, -50%, 0);
  background: radial-gradient(circle, rgba(50, 230, 255, .28), rgba(108, 76, 255, .1) 34%, transparent 68%);
  filter: blur(18px);
}

.corner-coordinates {
  position: fixed;
  z-index: 20;
  top: 18px;
  left: 18px;
  display: grid;
  gap: 7px;
  font: 500 11px/1 var(--grotesk);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(243, 240, 218, .62);
}

.corner-coordinates a {
  width: max-content;
  padding: 8px 11px;
  border-radius: 999px;
  background: rgba(34, 41, 54, .44);
  box-shadow: var(--shadow-inset);
  transition: color .35s ease, transform .35s ease, box-shadow .35s ease;
}

.corner-coordinates a.active,
.corner-coordinates a:hover {
  color: var(--cyan);
  transform: translateX(6px);
  box-shadow: 0 0 18px rgba(50, 230, 255, .2), var(--shadow-inset);
}

.stream-svg {
  position: fixed;
  z-index: 3;
  top: 31vh;
  left: 0;
  width: 100vw;
  height: 38vh;
  pointer-events: none;
  opacity: .9;
}

.stream-path {
  fill: none;
  stroke: var(--cyan);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-dasharray: 170 830;
  animation: streamTrace 9s ease-in-out infinite;
  filter: url(#streamGlow);
}

.stream-path-coral {
  stroke: var(--coral);
  stroke-width: 1;
  opacity: .5;
  stroke-dasharray: 55 910;
  animation-duration: 13s;
  animation-delay: -5s;
}

.narrative-shell { position: relative; z-index: 5; }

.chamber {
  min-height: 100vh;
  position: relative;
  padding: clamp(28px, 5vw, 72px);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  overflow: hidden;
}

.chamber::before {
  content: "";
  position: absolute;
  inset: 14vh 18vw;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(50,230,255,.04), transparent 65%);
  box-shadow: var(--shadow-inset);
  opacity: .48;
}

.pressure-surface {
  background: linear-gradient(145deg, rgba(34, 41, 54, .96), rgba(15, 20, 29, .96));
  box-shadow: var(--shadow-lift);
  border: 1px solid rgba(243, 240, 218, .045);
}

.title-slab {
  grid-column: 1 / 7;
  align-self: end;
  margin-bottom: 8vh;
  border-radius: 44px;
  padding: clamp(26px, 4.8vw, 68px);
  transform: translateX(-2vw) rotate(-1.7deg);
  position: relative;
}

.title-slab::after {
  content: "";
  position: absolute;
  right: 9%;
  top: 15%;
  width: 26%;
  height: 20%;
  border-radius: 999px;
  box-shadow: var(--shadow-inset);
  background: rgba(7, 10, 15, .42);
}

.micro-label,
.pressed-caption,
.caption-block span,
.liquid-frame span,
.final-caption span {
  margin: 0;
  color: rgba(243, 240, 218, .65);
  font: 700 11px/1.2 var(--grotesk);
  letter-spacing: .16em;
  text-transform: uppercase;
}

h1 {
  margin: 18px 0 18px;
  font: 800 clamp(4.3rem, 10.8vw, 12.6rem)/.78 var(--display);
  letter-spacing: -.075em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(243, 240, 218, .18);
  text-shadow: 2px 3px 0 rgba(0,0,0,.86), -1px -1px 0 rgba(50,230,255,.11), 0 0 34px rgba(108,76,255,.18);
}

.vertical-note,
.kana-fragment {
  position: absolute;
  font-family: var(--serif-jp);
  color: rgba(243, 240, 218, .48);
  writing-mode: vertical-rl;
  letter-spacing: .18em;
}

.vertical-note { right: 7vw; bottom: 14vh; }

.tiny-signal-daisy {
  position: absolute;
  right: 12vw;
  top: 13vh;
  width: 112px;
  height: 112px;
  animation: breathe 5.8s ease-in-out infinite;
}

.tiny-signal-daisy span,
.bloom-petal {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 26px;
  height: 58px;
  margin: -52px 0 0 -13px;
  border-radius: 50% 50% 46% 46%;
  background: linear-gradient(160deg, rgba(243,240,218,.84), rgba(50,230,255,.16));
  box-shadow: 9px 12px 22px rgba(0,0,0,.6), inset -4px -8px 14px rgba(7,10,15,.36), inset 3px 4px 10px rgba(243,240,218,.24);
  transform-origin: 50% 52px;
}

.tiny-signal-daisy span:nth-child(1) { transform: rotate(0deg); }
.tiny-signal-daisy span:nth-child(2) { transform: rotate(60deg); }
.tiny-signal-daisy span:nth-child(3) { transform: rotate(120deg); }
.tiny-signal-daisy span:nth-child(4) { transform: rotate(180deg); }
.tiny-signal-daisy span:nth-child(5) { transform: rotate(240deg); }
.tiny-signal-daisy span:nth-child(6) { transform: rotate(300deg); }
.tiny-signal-daisy i,
.bloom-node {
  position: absolute;
  inset: 42px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 24px var(--cyan), inset 3px 4px 7px rgba(243,240,218,.7);
}

.drift-capsule {
  position: absolute;
  border-radius: 999px;
  padding: 13px 22px;
  color: var(--cyan);
  font: 700 11px/1 var(--grotesk);
  letter-spacing: .18em;
  text-transform: uppercase;
  background: rgba(34, 41, 54, .82);
  box-shadow: var(--shadow-lift);
  animation: capsuleDrift 8s ease-in-out infinite;
}

.capsule-one { right: 28vw; top: 64vh; }
.capsule-two { left: 17vw; bottom: 18vh; animation-delay: -3s; }

.chamber-word {
  position: absolute;
  z-index: 0;
  font: 800 clamp(5rem, 14vw, 16rem)/.8 var(--display);
  letter-spacing: -.09em;
  color: rgba(243, 240, 218, .035);
  text-shadow: 0 0 28px rgba(50, 230, 255, .06);
}

.word-petal { right: -3vw; top: 10vh; transform: scaleX(.82); }
.word-current { left: -4vw; bottom: 11vh; transform: scaleX(1.12); }

.caption-block {
  grid-column: 9 / 13;
  align-self: start;
  margin-top: 13vh;
  border-radius: 32px;
  padding: 30px;
}

.caption-block p,
.liquid-frame p,
.final-caption p {
  margin: 14px 0 0;
  color: rgba(243, 240, 218, .78);
  font-size: clamp(1rem, 1.4vw, 1.35rem);
  line-height: 1.35;
}

.petal-constellation {
  grid-column: 1 / 6;
  align-self: center;
  height: 58vh;
  position: relative;
}

.petal {
  position: absolute;
  width: clamp(110px, 13vw, 188px);
  height: clamp(56px, 7vw, 94px);
  border-radius: 999px 48% 999px 48%;
  background: linear-gradient(145deg, rgba(34,41,54,.98), rgba(13,17,24,.98));
  box-shadow: var(--shadow-lift), inset 9px 9px 18px rgba(243,240,218,.03);
  animation: petalFloat 7s ease-in-out infinite;
}

.petal::after {
  content: "";
  position: absolute;
  inset: 12px 19px;
  border-radius: inherit;
  border: 1px solid rgba(50, 230, 255, .18);
  filter: blur(.2px);
}

.petal-a { left: 7%; top: 8%; transform: rotate(-22deg); }
.petal-b { right: 6%; top: 24%; transform: rotate(24deg); animation-delay: -1.4s; }
.petal-c { left: 22%; bottom: 16%; transform: rotate(13deg); animation-delay: -2.8s; }
.petal-d { right: 18%; bottom: 4%; transform: rotate(-35deg); animation-delay: -4s; }
.petal-e { left: 1%; top: 52%; transform: rotate(49deg); animation-delay: -5.2s; }
.petal.coral { background: linear-gradient(145deg, rgba(255,90,61,.86), rgba(34,41,54,.98) 52%, rgba(7,10,15,.98)); }
.petal.violet { background: linear-gradient(145deg, rgba(108,76,255,.75), rgba(34,41,54,.98) 54%, rgba(7,10,15,.98)); }
.petal-core {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--milk);
  box-shadow: 0 0 28px rgba(50, 230, 255, .65), var(--shadow-dark);
}

.inset-orbit {
  position: absolute;
  right: 10vw;
  bottom: 13vh;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: rgba(243, 240, 218, .42);
  font: 700 10px/1 var(--grotesk);
  letter-spacing: .18em;
  text-transform: uppercase;
  box-shadow: var(--shadow-inset);
  background: rgba(7, 10, 15, .32);
}

.liquid-frame {
  position: absolute;
  border-radius: 36px;
  padding: 34px;
  background: linear-gradient(var(--graphite), var(--graphite)) padding-box, conic-gradient(from var(--spin), var(--cyan), transparent 18%, var(--coral), transparent 46%, var(--violet), var(--cyan)) border-box;
  border: 2px solid transparent;
  box-shadow: var(--shadow-lift), 0 0 32px rgba(50, 230, 255, .12);
  animation: borderSpin 5s linear infinite;
}

.frame-large { right: 8vw; top: 18vh; width: min(430px, 38vw); min-height: 285px; }
.frame-small { left: 9vw; top: 16vh; width: 210px; height: 136px; border-radius: 31% 45% 38% 52%; animation-duration: 3.7s; }

.droplet-rail {
  position: absolute;
  left: 42vw;
  top: 42vh;
  width: 18vw;
  height: 26vh;
  border-radius: 999px;
  box-shadow: var(--shadow-inset);
}

.droplet-rail i {
  position: absolute;
  width: 28px;
  height: 58px;
  border-radius: 999px;
  background: linear-gradient(var(--cyan), rgba(108,76,255,.2));
  box-shadow: 0 0 20px rgba(50, 230, 255, .34), var(--shadow-dark);
  offset-path: path("M 20 20 C 130 -40, 245 120, 90 230 C -30 300, 20 20, 20 20");
  animation: railTravel 9s ease-in-out infinite;
}

.droplet-rail i:nth-child(2) { animation-delay: -2s; background: linear-gradient(var(--coral), rgba(34,41,54,.5)); }
.droplet-rail i:nth-child(3) { animation-delay: -4.3s; transform: scale(.7); }
.droplet-rail i:nth-child(4) { animation-delay: -6.5s; transform: scale(.45); background: var(--milk); }
.kana-fragment { right: 7vw; bottom: 9vh; }

.afterimage-daisy {
  position: absolute;
  left: 10vw;
  top: 18vh;
  width: min(48vw, 520px);
  height: min(48vw, 520px);
  border-radius: 50%;
  box-shadow: var(--shadow-inset);
  background: radial-gradient(circle, rgba(50,230,255,.08), transparent 60%);
  animation: breathe 7s ease-in-out infinite;
}

.bloom-petal {
  width: 72px;
  height: 178px;
  margin: -165px 0 0 -36px;
  transform-origin: 50% 165px;
  opacity: .68;
}

.p1 { transform: rotate(0deg) translateY(-8px); }
.p2 { transform: rotate(45deg) translateY(8px); background: linear-gradient(160deg, rgba(50,230,255,.34), rgba(243,240,218,.62)); }
.p3 { transform: rotate(90deg) translateY(-2px); }
.p4 { transform: rotate(135deg) translateY(7px); background: linear-gradient(160deg, rgba(108,76,255,.38), rgba(243,240,218,.5)); }
.p5 { transform: rotate(180deg) translateY(-4px); }
.p6 { transform: rotate(225deg) translateY(4px); background: linear-gradient(160deg, rgba(255,90,61,.33), rgba(243,240,218,.5)); }
.p7 { transform: rotate(270deg) translateY(-5px); }
.p8 { transform: rotate(315deg) translateY(9px); background: linear-gradient(160deg, rgba(108,76,255,.38), rgba(50,230,255,.18)); }
.bloom-node { inset: calc(50% - 23px); }

.final-caption {
  grid-column: 8 / 13;
  align-self: center;
  border-radius: 38px;
  padding: clamp(30px, 4vw, 58px);
}

.final-caption h2 {
  margin: 10px 0 0;
  font: 800 clamp(3.6rem, 8vw, 9rem)/.76 var(--display);
  letter-spacing: -.08em;
  color: rgba(243, 240, 218, .86);
  text-shadow: 7px 9px 0 rgba(7,10,15,.9), -3px -2px 0 rgba(108,76,255,.42);
}

[data-lift] {
  transition: transform .45s cubic-bezier(.2,.9,.2,1), box-shadow .45s ease, filter .45s ease;
  will-change: transform;
}

[data-lift].near {
  filter: brightness(1.12);
  box-shadow: 0 0 26px rgba(50, 230, 255, .18), var(--shadow-lift);
}

@property --spin {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

@keyframes streamTrace {
  0% { stroke-dashoffset: 1080; opacity: .1; }
  18% { opacity: .95; }
  56% { stroke-dashoffset: 0; opacity: .82; }
  100% { stroke-dashoffset: -1080; opacity: .12; }
}

@keyframes breathe {
  0%, 100% { transform: translateY(0) scale(.98); }
  50% { transform: translateY(-16px) scale(1.025); }
}

@keyframes capsuleDrift {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-2deg); }
  50% { transform: translate3d(18px, -24px, 0) rotate(4deg); }
}

@keyframes petalFloat {
  0%, 100% { margin-top: 0; }
  50% { margin-top: -20px; }
}

@keyframes borderSpin { to { --spin: 360deg; } }

@keyframes railTravel {
  0% { offset-distance: 0%; opacity: .15; }
  14%, 82% { opacity: .88; }
  100% { offset-distance: 100%; opacity: .15; }
}

@media (max-width: 820px) {
  .corner-coordinates { left: 10px; top: 10px; grid-template-columns: repeat(2, max-content); }
  .chamber { grid-template-columns: repeat(6, 1fr); padding: 76px 20px 28px; }
  .title-slab, .caption-block, .final-caption { grid-column: 1 / -1; }
  .title-slab { margin-bottom: 12vh; }
  .tiny-signal-daisy { right: 8vw; top: 24vh; transform: scale(.76); }
  .petal-constellation { grid-column: 1 / -1; }
  .frame-large { width: 72vw; right: 5vw; top: 28vh; }
  .frame-small { left: 5vw; top: 12vh; }
  .droplet-rail { left: 20vw; top: 58vh; width: 54vw; }
  .afterimage-daisy { left: -9vw; width: 82vw; height: 82vw; }
  .bloom-petal { width: 42px; height: 116px; margin: -108px 0 0 -21px; transform-origin: 50% 108px; }
}