:root {
  /* Typography intent: create a literary canal-broadcast voice rather than the overused mono/handwritten pairing. IBM Plex Mono appears sparingly for stream timestamps. Interaction can be quiet and tactile: pointer movement stirs tiny ripples. */
  --midnight-water: #071512;
  --jasmine-white: #F7F1DC;
  --moonlit-celadon: #A9D6BF;
  --lantern-amber: #F0A94A;
  --deep-moss: #173B2B;
  --bruised-violet: #4B375D;
  --petal-blush: #E9B8C6;
  --ink-black: #020606;
  --mincho: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", Georgia, serif;
  --fraunces: "Fraunces", "Iowan Old Style", Georgia, serif;
  --jp: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", system-ui, sans-serif;
  --mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
}

* { box-sizing: border-box; }

html, body { margin: 0; height: 100%; overflow: hidden; background: var(--ink-black); color: var(--jasmine-white); }
body { font-family: var(--jp); cursor: crosshair; }

.grain {
  position: fixed; inset: 0; pointer-events: none; z-index: 20; opacity: .18;
  background-image: radial-gradient(circle at 20% 30%, rgba(247,241,220,.12) 0 1px, transparent 1px), radial-gradient(circle at 70% 60%, rgba(169,214,191,.10) 0 1px, transparent 1px);
  background-size: 34px 34px, 51px 51px; mix-blend-mode: screen;
}

.stream { display: flex; width: 600vw; height: 100vh; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth; }
.stream::-webkit-scrollbar { display: none; }
.bank { position: relative; width: 100vw; height: 100vh; flex: 0 0 100vw; overflow: hidden; scroll-snap-align: start; background: radial-gradient(circle at 50% 115%, rgba(169,214,191,.11), transparent 34%), linear-gradient(180deg, var(--ink-black), var(--midnight-water) 48%, #03100d); }
.bank::before { content: attr(data-scene); position: absolute; left: 4vw; top: 4vh; font: 11px/1 var(--mono); letter-spacing: .32em; color: rgba(169,214,191,.52); text-transform: uppercase; }
.bank::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 94px, rgba(169,214,191,.035) 95px 96px), repeating-linear-gradient(0deg, transparent 0 7px, rgba(247,241,220,.025) 8px 9px); opacity: .5; pointer-events: none; }

.waterline { position: absolute; left: -10vw; right: -10vw; top: 58%; height: 2px; background: linear-gradient(90deg, transparent, var(--moonlit-celadon), rgba(247,241,220,.82), var(--moonlit-celadon), transparent); box-shadow: 0 0 18px rgba(169,214,191,.35); }
.waterline::before, .waterline::after { content: ""; position: absolute; left: 0; right: 0; height: 90px; background: repeating-radial-gradient(ellipse at center, rgba(169,214,191,.18) 0 1px, transparent 2px 18px); transform: translateY(-44px) scaleY(.2); opacity: .55; animation: rippleSlide 9s linear infinite; }
.waterline::after { transform: translateY(10px) scaleY(.17); animation-duration: 14s; opacity: .35; }
.waterline.amber { background: linear-gradient(90deg, transparent, var(--lantern-amber), var(--jasmine-white), var(--lantern-amber), transparent); box-shadow: 0 0 32px rgba(240,169,74,.62); }
.waterline.violet { background: linear-gradient(90deg, transparent, var(--bruised-violet), var(--moonlit-celadon), transparent); }
.waterline.dawn { background: linear-gradient(90deg, transparent, var(--petal-blush), var(--jasmine-white), var(--moonlit-celadon), transparent); }

.title-pull { position: absolute; left: 18vw; top: 28vh; transform: translateX(calc(var(--drift, 0) * .14px)); }
.kicker, .stamp { font: 12px/1.4 var(--mono); letter-spacing: .24em; color: var(--moonlit-celadon); text-transform: uppercase; }
h1, h2 { margin: 0; font-family: var(--mincho); font-weight: 400; letter-spacing: -.045em; }
h1 { font-size: clamp(56px, 10vw, 156px); text-shadow: 0 0 36px rgba(169,214,191,.26); }
h2 { font-size: clamp(44px, 7vw, 112px); line-height: .9; }
p { font-size: clamp(16px, 1.45vw, 23px); line-height: 1.75; }
.reflection { font: 400 clamp(50px, 9vw, 140px)/.8 var(--mincho); color: rgba(169,214,191,.23); transform: scaleY(-1) skewX(-8deg); filter: blur(1.7px); mask-image: linear-gradient(transparent, black 10%, transparent 74%); }
.subtitle { position: absolute; right: 12vw; bottom: 18vh; width: 28vw; font-family: var(--fraunces); color: rgba(247,241,220,.82); }
.talisman, .paper-charm { background: linear-gradient(135deg, rgba(247,241,220,.94), rgba(233,184,198,.82)); color: var(--midnight-water); padding: 28px; box-shadow: 0 24px 80px rgba(2,6,6,.42); }
.talisman { transform: rotate(3deg); border-radius: 2px 18px 4px 30px; }

.blossom { position: absolute; width: 120px; height: 120px; filter: drop-shadow(0 0 24px rgba(247,241,220,.42)); }
.blossom i { position: absolute; left: 42px; top: 5px; width: 36px; height: 62px; background: radial-gradient(circle at 50% 20%, #fff, var(--jasmine-white) 48%, var(--petal-blush)); border-radius: 55% 55% 44% 44%; transform-origin: 18px 55px; }
.blossom i:nth-child(2) { transform: rotate(72deg); } .blossom i:nth-child(3) { transform: rotate(144deg); } .blossom i:nth-child(4) { transform: rotate(216deg); } .blossom i:nth-child(5) { transform: rotate(288deg); }
.blossom b { position: absolute; left: 51px; top: 48px; width: 18px; height: 18px; border-radius: 50%; background: var(--lantern-amber); }
.hero-blossom { left: 8vw; top: 48vh; animation: blossomTurn 28s linear infinite; transform: translateX(calc(var(--drift, 0) * .4px)); }
.final-blossom { right: 16vw; top: 54vh; transform: scale(.72) rotate(20deg); }

.moon { position: absolute; border-radius: 50%; background: radial-gradient(circle at 35% 28%, var(--jasmine-white), var(--moonlit-celadon) 48%, rgba(169,214,191,.06) 70%); box-shadow: 0 0 80px rgba(169,214,191,.28); }
.moon span { position: absolute; inset: 35% -10%; background: repeating-linear-gradient(180deg, transparent 0 6px, rgba(7,21,18,.45) 7px 9px); transform: rotate(-4deg); }
.moon-one { right: 13vw; top: 12vh; width: 180px; height: 180px; } .moon-two { left: 9vw; top: 13vh; width: 230px; height: 230px; }
.reeds { position: absolute; bottom: 34vh; width: 24vw; height: 48vh; background: repeating-linear-gradient(78deg, transparent 0 17px, rgba(169,214,191,.24) 18px 20px, transparent 21px 38px); transform: skewX(-13deg); }
.reeds-left { left: -3vw; }
.vine { position: absolute; left: 4vw; right: 4vw; top: 20vh; height: 160px; border-top: 2px solid rgba(169,214,191,.32); border-radius: 50%; transform: rotate(-2deg); }
.vine::after { content: ""; position: absolute; inset: 20px 6vw; background: radial-gradient(ellipse at 10% 20%, var(--moonlit-celadon) 0 5px, transparent 6px), radial-gradient(ellipse at 40% 35%, var(--petal-blush) 0 4px, transparent 5px), radial-gradient(ellipse at 82% 10%, var(--jasmine-white) 0 6px, transparent 7px); }

.floating-copy { position: absolute; z-index: 2; max-width: 540px; }
.paper-charm { left: 13vw; top: 25vh; transform: rotate(-4deg); }
.lacquer-tray { left: 46vw; top: 23vh; padding: 34px; border-radius: 50% 20% 42% 18%; background: rgba(2,6,6,.72); border: 1px solid rgba(240,169,74,.36); box-shadow: inset 0 0 45px rgba(240,169,74,.1), 0 0 80px rgba(240,169,74,.18); }
.buoy-note { left: 12vw; top: 23vh; padding: 32px; background: rgba(23,59,43,.55); border-left: 1px solid var(--moonlit-celadon); backdrop-filter: blur(8px); }
.archive-label { position: absolute; right: 9vw; top: 21vh; width: 48vw; z-index: 2; }
.exit-copy { position: absolute; left: 10vw; top: 24vh; width: 48vw; z-index: 2; color: var(--midnight-water); }

.petal-field span, .cursor-petals span { position: absolute; width: 24px; height: 34px; border-radius: 60% 10% 60% 10%; background: linear-gradient(135deg, var(--jasmine-white), var(--petal-blush)); opacity: .88; filter: drop-shadow(0 0 12px rgba(247,241,220,.22)); animation: petalFloat 16s ease-in-out infinite; }
.petal-field span:nth-child(1) { left: 46vw; top: 17vh; } .petal-field span:nth-child(2) { left: 62vw; top: 31vh; animation-delay: -3s; } .petal-field span:nth-child(3) { left: 78vw; top: 62vh; animation-delay: -6s; } .petal-field span:nth-child(4) { left: 22vw; top: 70vh; animation-delay: -10s; } .petal-field span:nth-child(5) { left: 86vw; top: 23vh; animation-delay: -12s; } .petal-field span:nth-child(6) { left: 34vw; top: 39vh; animation-delay: -8s; } .petal-field span:nth-child(7) { left: 70vw; top: 79vh; animation-delay: -14s; }
.caption-low { position: absolute; left: 55vw; bottom: 14vh; width: 28vw; font-family: var(--fraunces); color: rgba(169,214,191,.76); }
.lantern { position: absolute; left: 18vw; top: 16vh; width: 116px; height: 180px; border-radius: 50% 50% 42% 42%; background: radial-gradient(circle, var(--jasmine-white), var(--lantern-amber) 52%, rgba(240,169,74,.1)); box-shadow: 0 0 110px var(--lantern-amber); animation: lanternPulse 5s ease-in-out infinite; }
.lantern em { position: absolute; left: 50%; top: -72px; width: 1px; height: 76px; background: rgba(247,241,220,.42); }
.halo { position: absolute; left: 9vw; top: 38vh; width: 44vw; height: 28vh; border-radius: 50%; background: radial-gradient(ellipse, rgba(240,169,74,.22), transparent 65%); filter: blur(10px); }
.subtitle-strip { position: absolute; left: 10vw; bottom: 13vh; font: 16px var(--mono); color: rgba(247,241,220,.58); letter-spacing: .14em; }
.mirror-text { position: absolute; left: 16vw; bottom: 14vh; font: 400 6vw var(--fraunces); color: rgba(169,214,191,.2); transform: skewX(-14deg); filter: blur(1px); }
.ripple-stack i { position: absolute; border: 1px solid rgba(169,214,191,.32); border-radius: 50%; width: 20vw; height: 5vw; left: 40vw; top: 55vh; animation: ring 5s ease-out infinite; }
.ripple-stack i:nth-child(2) { animation-delay: 1.4s; } .ripple-stack i:nth-child(3) { animation-delay: 2.8s; }
.waveform { position: absolute; left: 34vw; top: 39vh; width: 58vw; height: 24vh; display: flex; align-items: center; gap: 20px; opacity: .62; }
.waveform span { flex: 1; height: 20%; border-radius: 999px; background: linear-gradient(180deg, transparent, var(--moonlit-celadon), transparent); animation: wave 2.8s ease-in-out infinite; }
.waveform span:nth-child(2) { animation-delay: -.4s; } .waveform span:nth-child(3) { animation-delay: -.8s; } .waveform span:nth-child(4) { animation-delay: -1.2s; } .waveform span:nth-child(5) { animation-delay: -1.6s; }
.signal-buoy { position: absolute; right: 19vw; bottom: 32vh; width: 34px; height: 34px; border-radius: 50%; background: var(--lantern-amber); box-shadow: 0 0 0 0 rgba(240,169,74,.7); animation: buoy 4s infinite; }
.mist { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(247,241,220,.06), rgba(233,184,198,.28), rgba(169,214,191,.18)), radial-gradient(circle at 80% 18%, rgba(247,241,220,.55), transparent 24%); }
.pale-morning-exit { background: linear-gradient(180deg, #A9D6BF, #F7F1DC 70%, #E9B8C6); color: var(--midnight-water); }

.tide-ruler { position: fixed; left: 5vw; right: 5vw; bottom: 22px; z-index: 30; height: 34px; display: flex; justify-content: space-between; align-items: end; border-top: 1px solid rgba(169,214,191,.35); }
.tide-fill { position: absolute; left: 0; top: -1px; height: 1px; width: 0%; background: var(--jasmine-white); box-shadow: 0 0 15px var(--moonlit-celadon); }
.tide-ruler button { position: relative; border: 0; background: transparent; color: rgba(247,241,220,.58); font: 10px var(--mono); letter-spacing: .14em; text-transform: uppercase; padding: 14px 0 0; }
.tide-ruler button span { position: absolute; left: 50%; top: -7px; width: 14px; height: 14px; transform: translateX(-50%) rotate(45deg); border-radius: 60% 8% 60% 8%; background: var(--deep-moss); border: 1px solid var(--moonlit-celadon); }
.tide-ruler button.active { color: var(--jasmine-white); } .tide-ruler button.active span { background: var(--jasmine-white); box-shadow: 0 0 18px var(--jasmine-white); }
.hover-caption { position: fixed; z-index: 40; pointer-events: none; padding: 10px 14px; max-width: 250px; opacity: 0; color: var(--midnight-water); background: rgba(247,241,220,.9); font: 13px/1.4 var(--fraunces); border-radius: 18px 18px 18px 2px; transform: translate(16px, 16px); transition: opacity .25s ease; }
.cursor-petals { position: fixed; inset: 0; pointer-events: none; z-index: 25; }
.cursor-petals span { animation: trailFade 1.8s ease-out forwards; }

@keyframes rippleSlide { to { background-position: 180px 0; } }
@keyframes blossomTurn { to { rotate: 360deg; } }
@keyframes petalFloat { 50% { transform: translate(36px, -28px) rotate(90deg); } 100% { transform: translate(0, 0) rotate(180deg); } }
@keyframes lanternPulse { 50% { transform: scale(1.05); box-shadow: 0 0 150px var(--lantern-amber); } }
@keyframes ring { from { transform: scale(.2); opacity: .7; } to { transform: scale(2.5); opacity: 0; } }
@keyframes wave { 50% { height: 100%; opacity: .95; } }
@keyframes buoy { 50% { box-shadow: 0 0 0 34px rgba(240,169,74,0); transform: translateY(12px); } }
@keyframes trailFade { to { opacity: 0; transform: translateY(24px) rotate(120deg) scale(.35); } }

@media (max-width: 760px) {
  .stream { scroll-snap-type: x mandatory; }
  .floating-copy, .archive-label, .exit-copy, .subtitle { left: 8vw; right: auto; width: 82vw; max-width: none; }
  .title-pull { left: 8vw; top: 26vh; }
  h1 { font-size: 18vw; }
  .moon-one, .moon-two { width: 130px; height: 130px; }
  .tide-ruler button { font-size: 0; }
}