:root {
  /* Interactions should feel like contemplation: hovering a bubble can reveal a whispered line. */
  --sunset-pearl: #FFE1B8;
  --apricot-signal: #FF9D66;
  --aqua-glass: #9FE8E1;
  --bluebell-shadow: #6B7FD7;
  --rose-current: #E85D8A;
  --deep-canal: #123044;
  --mist-white: #F8FFF8;
  --serif: "Cormorant Garamond", "Lora", Georgia, serif;
  --jp: "Noto Serif JP", serif;
  --sans: "Nunito Sans", "Inter", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; }

body {
  font-family: var(--sans);
  color: var(--deep-canal);
  background: var(--sunset-pearl);
  cursor: default;
}

.aero-sky {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at 16% 22%, rgba(248,255,248,.95) 0 6%, transparent 18%),
    radial-gradient(circle at 75% 18%, rgba(159,232,225,.8) 0 8%, transparent 25%),
    radial-gradient(circle at 42% 70%, rgba(232,93,138,.28) 0 8%, transparent 28%),
    linear-gradient(115deg, #FFE1B8 0%, #F8FFF8 28%, #9FE8E1 56%, #6B7FD7 100%);
  transition: filter .8s ease, transform .8s ease;
  z-index: -5;
}

.aero-sky::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(248,255,248,.15) 1px, transparent 1px), linear-gradient(90deg, rgba(18,48,68,.08) 1px, transparent 1px);
  background-size: 34px 34px;
  mix-blend-mode: soft-light;
  mask-image: radial-gradient(ellipse at center, black, transparent 80%);
}

.panorama {
  height: 100vh;
  display: flex;
  width: max-content;
  transform: translate3d(0,0,0);
  will-change: transform;
}

.scene {
  position: relative;
  width: 92vw;
  height: 100vh;
  flex: 0 0 92vw;
  padding: 7vh 7vw;
  overflow: hidden;
}

.scene + .scene { margin-left: -6vw; }

.scene::before {
  content: "";
  position: absolute;
  left: -8%; right: -8%; bottom: -14%; height: 38%;
  background:
    radial-gradient(ellipse at 26% 10%, rgba(248,255,248,.7), transparent 28%),
    repeating-radial-gradient(ellipse at 50% 100%, rgba(159,232,225,.28) 0 3px, transparent 4px 22px),
    linear-gradient(180deg, rgba(159,232,225,.48), rgba(107,127,215,.35));
  border-radius: 50% 50% 0 0;
  filter: blur(.1px);
}

.scene::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 70% 62%, rgba(255,157,102,.18), transparent 22%), radial-gradient(circle at 30% 20%, rgba(248,255,248,.2), transparent 18%);
  pointer-events: none;
}

.paper-edge {
  position: absolute;
  inset: 3vh 2vw;
  border-radius: 46px 24px 58px 34px;
  border: 1px solid rgba(248,255,248,.28);
  background: linear-gradient(135deg, rgba(248,255,248,.08), rgba(255,225,184,.04));
  box-shadow: inset 0 0 50px rgba(248,255,248,.18);
}

.horizon-line {
  position: absolute;
  left: 3vw; right: 3vw; top: 58vh; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(248,255,248,.9), rgba(18,48,68,.18), transparent);
  box-shadow: 0 14px 32px rgba(159,232,225,.52);
}

.thread-layer { position: fixed; left: 0; top: 39vh; width: 4200px; height: 52vh; pointer-events: none; z-index: 6; transform: translateX(0); }
.rose-thread { width: 100%; height: 100%; overflow: visible; }
#rosePath, .aqua-path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
#rosePath { stroke: var(--rose-current); stroke-width: 5; filter: drop-shadow(0 0 14px rgba(232,93,138,.62)); stroke-dasharray: 4200; stroke-dashoffset: 4200; transition: stroke-dashoffset .6s ease; }
.aqua-path { stroke: rgba(159,232,225,.72); stroke-width: 13; opacity: .54; filter: blur(.2px); }

.quest-nav { position: fixed; left: 50%; top: 22px; transform: translateX(-50%); z-index: 20; display: flex; gap: 12px; padding: 9px 14px; border-radius: 999px; background: rgba(248,255,248,.28); border: 1px solid rgba(248,255,248,.64); backdrop-filter: blur(16px); box-shadow: inset 0 1px 10px rgba(248,255,248,.8), 0 14px 45px rgba(18,48,68,.12); }
.nav-bead { width: 18px; height: 18px; border: 0; border-radius: 50%; background: radial-gradient(circle at 35% 28%, #F8FFF8, #9FE8E1 45%, #6B7FD7); box-shadow: inset -2px -3px 8px rgba(18,48,68,.16), 0 0 16px rgba(159,232,225,.5); position: relative; transition: transform .35s ease, background .35s ease; }
.nav-bead span { position: absolute; top: 27px; left: 50%; transform: translateX(-50%); font: 600 10px var(--sans); color: var(--deep-canal); opacity: 0; transition: opacity .25s ease; }
.nav-bead:hover span, .nav-bead.is-active span { opacity: .8; }
.nav-bead.is-active { transform: scale(1.38); background: radial-gradient(circle at 32% 25%, #F8FFF8, #FF9D66 46%, #E85D8A); }

.pearl-wordmark, .caption-shell, .diary-tab, .glass-label, .window-panel, .return-bubble {
  position: absolute;
  z-index: 8;
  border: 1px solid rgba(248,255,248,.68);
  background: linear-gradient(145deg, rgba(248,255,248,.52), rgba(159,232,225,.2) 48%, rgba(255,225,184,.22));
  backdrop-filter: blur(18px) saturate(145%);
  box-shadow: inset 0 2px 16px rgba(248,255,248,.82), inset 0 -18px 38px rgba(107,127,215,.12), 0 26px 70px rgba(18,48,68,.16);
}

.pearl-wordmark { left: 8vw; top: 17vh; width: min(520px, 42vw); min-height: 250px; padding: 44px 48px; border-radius: 56% 44% 48% 52% / 45% 38% 62% 55%; }
.pearl-wordmark h1 { margin: 0; font-family: var(--serif); font-size: clamp(54px, 8vw, 118px); font-weight: 600; font-style: italic; line-height: .8; color: var(--deep-canal); text-shadow: 0 1px 0 #F8FFF8, 0 0 24px rgba(248,255,248,.7); }
.pearl-wordmark p { margin: 22px 0 0; max-width: 310px; color: rgba(18,48,68,.72); font-size: 15px; letter-spacing: .08em; text-transform: lowercase; }
.jp-note, .vertical-note { font-family: var(--jp); color: var(--rose-current); letter-spacing: .18em; font-size: 13px; }

.caption-shell { right: 14vw; bottom: 17vh; width: 330px; padding: 28px; border-radius: 34px 70px 38px 40px; }
.diary-tab { left: 23vw; top: 17vh; width: 380px; padding: 30px; border-radius: 24px 24px 70px 30px; transform: rotate(-2deg); }
.glass-label { left: 17vw; top: 16vh; width: 430px; padding: 34px; border-radius: 46px; }
.window-panel { left: 20vw; top: 15vh; width: 500px; padding: 42px 36px 34px; border-radius: 26px; }
.return-bubble { left: 23vw; top: 22vh; width: 460px; padding: 40px; border-radius: 64px 38px 72px 42px; text-align: center; }

article span:not(.jp-note), .return-bubble span { display: block; margin-bottom: 12px; color: var(--rose-current); font: 700 12px var(--sans); text-transform: uppercase; letter-spacing: .18em; }
h2 { margin: 0; font-family: var(--serif); font-size: clamp(34px, 4vw, 62px); line-height: .9; font-weight: 600; color: var(--deep-canal); }
article p { font-size: 16px; line-height: 1.75; color: rgba(18,48,68,.72); }

.love-compass { position: absolute; z-index: 9; right: 16vw; top: 20vh; width: 135px; height: 135px; border-radius: 50%; background: radial-gradient(circle at 36% 28%, #F8FFF8 0 12%, rgba(159,232,225,.66) 28%, rgba(255,225,184,.38) 62%, rgba(107,127,215,.28)); border: 1px solid rgba(248,255,248,.75); backdrop-filter: blur(14px); box-shadow: inset 0 0 26px rgba(248,255,248,.78), 0 18px 46px rgba(18,48,68,.16); transition: transform .7s cubic-bezier(.2,.8,.2,1); }
.love-compass span { position: absolute; left: 50%; bottom: -27px; transform: translateX(-50%); white-space: nowrap; color: rgba(18,48,68,.6); font: 700 10px var(--sans); letter-spacing: .2em; text-transform: uppercase; }
.compass-rings, .compass-rings::before, .compass-rings::after { position: absolute; border-radius: 50%; border: 1px solid rgba(18,48,68,.22); }
.compass-rings { inset: 15px; }.compass-rings::before { content: ""; inset: 18px; }.compass-rings::after { content: ""; inset: 34px; border-color: rgba(232,93,138,.3); }
.compass-needle { position: absolute; left: 50%; top: 18px; width: 16px; height: 78px; transform-origin: 50% 50px; transform: translateX(-50%) rotate(30deg); border-radius: 100% 100% 30% 30%; background: linear-gradient(#E85D8A, #FF9D66 55%, transparent 56%); filter: drop-shadow(0 0 8px rgba(232,93,138,.5)); }
.small { left: 62vw; top: 46vh; transform: scale(.72); }.tilted { right: 26vw; top: 55vh; transform: rotate(-14deg) scale(.86); }.bright { right: 19vw; top: 22vh; }.settled { right: 22vw; top: 53vh; transform: scale(.82); }

.droplet { position: absolute; border-radius: 50%; background: radial-gradient(circle at 35% 25%, #F8FFF8, rgba(159,232,225,.74) 48%, rgba(107,127,215,.2)); border: 1px solid rgba(248,255,248,.74); box-shadow: inset 0 0 20px rgba(248,255,248,.8), 0 12px 34px rgba(18,48,68,.12); z-index: 7; animation: drift 7s ease-in-out infinite; }
.d1 { left: 52vw; top: 22vh; width: 82px; height: 82px; }.d2 { left: 72vw; top: 39vh; width: 45px; height: 45px; animation-delay: -2s; }
.portal { position: absolute; top: 8vh; width: 17vw; height: 84vh; z-index: 5; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(248,255,248,.32), rgba(159,232,225,.16) 48%, transparent 72%); border: 1px solid rgba(248,255,248,.24); filter: blur(.2px); }
.portal-right { right: -8vw; }.portal-left { left: -8vw; }
.vertical-note { position: absolute; z-index: 10; writing-mode: vertical-rl; top: 18vh; left: 8vw; padding: 14px 10px; border-radius: 999px; background: rgba(248,255,248,.24); backdrop-filter: blur(10px); }
.vertical-note.right { left: auto; right: 11vw; top: 25vh; }
.photo-fragment { position: absolute; right: 18vw; top: 24vh; width: 240px; height: 160px; z-index: 7; border-radius: 8px 34px 12px 26px; background: linear-gradient(135deg, rgba(255,157,102,.55), rgba(159,232,225,.55)), repeating-linear-gradient(0deg, rgba(248,255,248,.2) 0 2px, transparent 3px 6px); box-shadow: 0 20px 50px rgba(18,48,68,.16); transform: rotate(4deg); }
.photo-fragment span { position: absolute; left: 15px; bottom: 12px; color: var(--mist-white); font: 700 10px var(--sans); letter-spacing: .15em; }
.ripple-orbit { position: absolute; border-radius: 50%; border: 2px solid rgba(159,232,225,.42); box-shadow: 0 0 30px rgba(159,232,225,.35); animation: pulseRing 4s ease-in-out infinite; }
.orbit-one { left: 9vw; bottom: 18vh; width: 300px; height: 80px; }.orbit-two { left: 44vw; bottom: 12vh; width: 400px; height: 90px; animation-delay: -1.5s; }
.chrome-rail { position: absolute; left: 10vw; right: 12vw; bottom: 30vh; height: 170px; border-top: 13px solid rgba(248,255,248,.72); border-radius: 50% 50% 0 0; box-shadow: inset 0 8px 0 rgba(159,232,225,.34), 0 -8px 22px rgba(107,127,215,.14); z-index: 6; }
.quest-token { position: absolute; z-index: 10; display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; background: radial-gradient(circle at 33% 24%, #F8FFF8, #FFE1B8 42%, #FF9D66); border: 1px solid rgba(248,255,248,.75); color: var(--deep-canal); font: italic 600 22px var(--serif); box-shadow: 0 18px 44px rgba(18,48,68,.15); }
.token-a { left: 58vw; top: 32vh; }.token-b { left: 70vw; top: 54vh; background: radial-gradient(circle at 33% 24%, #F8FFF8, #9FE8E1 42%, #6B7FD7); }
.window-buttons { position: absolute; left: 22px; top: 18px; display: flex; gap: 8px; }.window-buttons i { width: 12px; height: 12px; border-radius: 50%; background: var(--rose-current); box-shadow: 0 0 12px rgba(232,93,138,.4); }.window-buttons i:nth-child(2){ background: var(--apricot-signal); }.window-buttons i:nth-child(3){ background: var(--aqua-glass); }
.lens-heart { position: absolute; right: 22vw; bottom: 22vh; width: 170px; height: 150px; z-index: 7; background: radial-gradient(circle at 30% 30%, #F8FFF8, rgba(232,93,138,.45) 35%, rgba(255,157,102,.26) 70%); clip-path: path("M85 145 C20 94 0 56 21 26 C41 -3 75 9 85 33 C95 9 130 -3 149 26 C170 57 150 95 85 145 Z"); filter: blur(.2px) drop-shadow(0 14px 35px rgba(232,93,138,.22)); opacity: .72; }
.diary-scrap { position: absolute; z-index: 10; padding: 16px 20px; color: rgba(18,48,68,.72); background: rgba(255,225,184,.54); border: 1px solid rgba(248,255,248,.7); box-shadow: 0 16px 34px rgba(18,48,68,.12); font: italic 500 22px var(--serif); }
.scrap-a { right: 13vw; top: 51vh; transform: rotate(5deg); }.scrap-b { left: 10vw; bottom: 22vh; font-family: var(--jp); transform: rotate(-6deg); }
.return-bubble strong { display: block; margin-top: 24px; font: italic 600 56px var(--serif); color: var(--rose-current); }
.loop-thread { position: absolute; right: 12vw; bottom: 17vh; width: 300px; height: 180px; border: 5px solid var(--rose-current); border-left-color: transparent; border-radius: 50%; filter: drop-shadow(0 0 14px rgba(232,93,138,.5)); }
.whisper { position: fixed; z-index: 30; left: 50%; bottom: 34px; transform: translate(-50%, 18px); max-width: 430px; padding: 13px 20px; border-radius: 999px; opacity: 0; pointer-events: none; color: var(--deep-canal); background: rgba(248,255,248,.54); border: 1px solid rgba(248,255,248,.75); backdrop-filter: blur(14px); box-shadow: 0 12px 34px rgba(18,48,68,.12); font: italic 500 18px var(--serif); transition: opacity .3s ease, transform .3s ease; text-align: center; }
.whisper.show { opacity: 1; transform: translate(-50%, 0); }
.progress-shell { position: fixed; z-index: 24; left: 22px; right: 22px; bottom: 16px; height: 3px; border-radius: 999px; background: rgba(248,255,248,.34); overflow: hidden; }
.progress-fill { height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #9FE8E1, #FF9D66, #E85D8A); box-shadow: 0 0 18px rgba(232,93,138,.4); }
.cursor-comet { position: fixed; z-index: 40; width: 22px; height: 22px; border-radius: 50%; pointer-events: none; opacity: 0; background: radial-gradient(circle, #F8FFF8 0 18%, #9FE8E1 38%, rgba(232,93,138,.42) 62%, transparent 72%); transform: translate(-50%, -50%); transition: opacity .3s ease; }
.stagger-a { opacity: 0; transform: translateY(28px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1); }
.scene.is-visible .stagger-a { opacity: 1; transform: translateY(0); }
.scene.is-visible .diary-tab { transform: translateY(0) rotate(-2deg); }
.bubble-hover { transition: transform .35s ease, filter .35s ease; }
.bubble-hover:hover { transform: translateY(-8px) scale(1.015); filter: brightness(1.05); }

@keyframes drift { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-18px); } }
@keyframes pulseRing { 0%,100% { transform: scale(.94); opacity: .45; } 50% { transform: scale(1.06); opacity: .82; } }

@media (max-width: 760px) {
  .scene { width: 100vw; flex-basis: 100vw; padding: 10vh 7vw; }
  .scene + .scene { margin-left: 0; }
  .pearl-wordmark, .caption-shell, .diary-tab, .glass-label, .window-panel, .return-bubble { left: 7vw; right: auto; width: 86vw; }
  .caption-shell { top: 53vh; bottom: auto; }
  .love-compass { right: 8vw; top: 62vh; transform: scale(.7); }
  .quest-nav { max-width: calc(100vw - 26px); }
  .photo-fragment, .chrome-rail, .lens-heart, .diary-scrap { display: none; }
}