:root {
  /* Interface and explanatory text: **Noto Sans** Sansss because it has a global sensibility. */
  --ink: #17233B;
  --citrus: #F7D35C;
  --fern: #8FBF9F;
  --basin: #BEE7F4;
  --rice: #F7F1E6;
  --mulberry: #6E315E;
  --rose: #F6A7B8;
  --display: 'Fraunces', serif;
  --sans: 'Noto Sans', sans-serif;
  --jp: 'Noto Serif JP', serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 20% 30%, rgba(190, 231, 244, .8) 0%, transparent 35%),
    radial-gradient(circle at 85% 18%, rgba(246, 167, 184, .55) 0%, transparent 30%),
    radial-gradient(circle at 50% 80%, rgba(143, 191, 159, .45) 0%, transparent 42%),
    var(--rice);
  font-family: var(--sans);
  overflow-x: hidden;
}

.atmosphere {
  position: fixed;
  inset: -12%;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(247, 211, 92, .25), transparent 18%),
    radial-gradient(ellipse at 65% 45%, rgba(110, 49, 94, .12), transparent 38%);
  filter: blur(2px);
  transition: background-position .25s ease;
}

.tone-nav {
  position: fixed;
  right: 26px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.nav-bead {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 25%, #fff, var(--basin) 38%, rgba(23, 35, 59, .18));
  box-shadow: inset -5px -7px 12px rgba(23,35,59,.12), 0 8px 22px rgba(23,35,59,.16);
  text-decoration: none;
  position: relative;
}
.nav-bead::after {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: inherit;
  background: var(--citrus);
  transform: scale(0);
  transition: transform .45s ease;
}
.nav-bead.active::after { transform: scale(1); }
.nav-bead span {
  position: absolute;
  right: 28px;
  top: -3px;
  opacity: 0;
  color: var(--mulberry);
  font: 600 11px var(--jp);
  letter-spacing: .08em;
  white-space: nowrap;
  transition: opacity .3s ease;
}
.nav-bead:hover span, .nav-bead.active span { opacity: 1; }

.scene {
  position: relative;
  min-height: 100vh;
  padding: 7vw 8vw;
  z-index: 1;
  overflow: hidden;
  isolation: isolate;
}
.eyebrow {
  margin: 0 0 16px;
  color: var(--mulberry);
  font: 700 12px var(--jp);
  letter-spacing: .16em;
  text-transform: uppercase;
}
h1, h2 { font-family: var(--display); font-weight: 700; line-height: .94; margin: 0; }
h1 { font-size: clamp(48px, 9vw, 142px); letter-spacing: -.07em; color: rgba(23, 35, 59, .86); text-shadow: 0 1px rgba(255,255,255,.8), 0 20px 45px rgba(110,49,94,.12); }
h2 { font-size: clamp(42px, 7vw, 108px); max-width: 900px; letter-spacing: -.055em; }
p { font-size: clamp(16px, 1.3vw, 21px); line-height: 1.7; }

.arrival { display: grid; place-items: center start; }
.embossed-card {
  width: min(900px, 78vw);
  padding: 42px;
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 42px;
  background: linear-gradient(135deg, rgba(247,241,230,.62), rgba(190,231,244,.25));
  backdrop-filter: blur(14px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 34px 90px rgba(23,35,59,.12);
}
.intro { max-width: 670px; color: rgba(23,35,59,.78); }
.sentence-ribbon {
  position: absolute;
  white-space: nowrap;
  font-family: var(--display);
  font-size: clamp(38px, 7vw, 114px);
  font-weight: 750;
  padding: .16em .38em .24em;
  border-radius: 30px;
  background: linear-gradient(90deg, rgba(255,255,255,.55), rgba(246,167,184,.28), rgba(190,231,244,.5));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.7), 0 28px 80px rgba(23,35,59,.16);
  color: var(--mulberry);
}
.raw-ribbon { left: -16vw; top: 63vh; transform: rotate(-13deg); filter: url(#none); }
.tension, .hesitation { position: absolute; width: 50px; height: 5px; border-radius: 10px; transform: rotate(18deg); }
.tension { background: #F7D35C; box-shadow: 0 0 0 5px rgba(247,211,92,.2); }
.hesitation { background: #BEE7F4; box-shadow: 0 0 0 5px rgba(190,231,244,.35); }
.t1 { left: 24%; top: -10px; } .t2 { left: 58%; bottom: -12px; } .h1 { left: 43%; top: -18px; } .h2 { right: 12%; bottom: -8px; }
.fragment-cloud span, .glyph-field b {
  position: absolute;
  font-family: var(--jp);
  color: rgba(23,35,59,.34);
  padding: 6px 12px;
  border-radius: 99px;
  background: rgba(255,255,255,.26);
}
.arrival-fragments span:nth-child(1){left:12%;top:20%;}.arrival-fragments span:nth-child(2){right:18%;top:18%;}.arrival-fragments span:nth-child(3){right:10%;bottom:22%;}.arrival-fragments span:nth-child(4){left:42%;top:10%;}.arrival-fragments span:nth-child(5){left:8%;bottom:18%;}
.tune-invite {
  position: absolute;
  left: 8vw;
  bottom: 8vh;
  border: 0;
  border-radius: 999px;
  padding: 16px 28px;
  background: var(--ink);
  color: var(--rice);
  font: 700 14px var(--jp);
  letter-spacing: .12em;
  box-shadow: 0 16px 38px rgba(23,35,59,.24);
  cursor: pointer;
}

.basin { display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: 5vw; background: radial-gradient(circle at 35% 48%, rgba(190,231,244,.55), transparent 34%); }
.basin-instrument { position: relative; height: 68vh; min-height: 520px; }
.ring { position: absolute; inset: 50%; translate: -50% -50%; border: 2px solid rgba(190,231,244,.8); border-radius: 50%; background: radial-gradient(ellipse, rgba(255,255,255,.22), rgba(190,231,244,.1) 62%, transparent); box-shadow: inset 0 0 35px rgba(255,255,255,.5), 0 0 40px rgba(190,231,244,.4); animation: breathe 5s ease-in-out infinite; }
.r1{width:260px;height:120px}.r2{width:430px;height:220px;animation-delay:.3s}.r3{width:610px;height:330px;animation-delay:.6s}.r4{width:780px;height:450px;animation-delay:.9s}
.phrase-listened { position: absolute; inset: 48% auto auto 50%; transform: translate(-50%,-50%); font: 700 clamp(25px,3.8vw,58px) var(--display); color: var(--ink); white-space: nowrap; }
.phrase-listened em { color: var(--mulberry); font-style: normal; }
.moth { position: absolute; width: 150px; padding: 15px; border-radius: 24px 24px 24px 4px; background: rgba(255,255,255,.52); box-shadow: 0 18px 50px rgba(23,35,59,.12); font-family: var(--jp); animation: flutter 4s ease-in-out infinite; }
.moth::before, .moth::after { content: ''; position: absolute; top: -16px; width: 36px; height: 28px; background: rgba(246,167,184,.5); border-radius: 70% 20% 70% 30%; }
.moth::before{left:34px;transform:rotate(-24deg)}.moth::after{left:70px;transform:scaleX(-1) rotate(-24deg)}
.moth b { display:block; color: var(--mulberry); font-size: 13px; }.moth span{font-size:12px}.moth-one{left:11%;top:18%}.moth-two{right:9%;bottom:22%;animation-delay:1s}
.context-orbit span { position: absolute; font: 700 12px var(--jp); color: var(--mulberry); background: rgba(247,211,92,.3); border-radius: 99px; padding: 8px 12px; }
.context-orbit span:nth-child(1){left:8%;top:15%}.context-orbit span:nth-child(2){left:48%;top:8%}.context-orbit span:nth-child(3){right:11%;top:24%}.context-orbit span:nth-child(4){left:7%;bottom:24%}.context-orbit span:nth-child(5){right:20%;bottom:12%}.context-orbit span:nth-child(6){left:44%;bottom:6%}

.scene-copy { position: relative; z-index: 3; }
.scene-copy p:not(.eyebrow):not(.jp-line) { max-width: 560px; }
.weather { background: linear-gradient(180deg, rgba(247,241,230,0), rgba(110,49,94,.08)); }
.weather-copy { position: absolute; left: 8vw; top: 11vh; max-width: 850px; }
.jp-line { font-family: var(--jp); color: var(--mulberry); letter-spacing: .06em; }
.weather-column { position: absolute; bottom: 8vh; width: 18vw; height: 55vh; border-left: 1px solid rgba(23,35,59,.18); border-right: 1px solid rgba(255,255,255,.5); border-radius: 50% 50% 18px 18px; background: linear-gradient(180deg, rgba(190,231,244,.18), rgba(255,255,255,.05)); }
.weather-column span { position: absolute; bottom: 102%; left: 10px; font: 700 12px var(--jp); color: var(--mulberry); }
.weather-column i { position: absolute; width: 20px; height: 20px; border-radius: 50%; background: var(--basin); box-shadow: 0 0 0 8px rgba(190,231,244,.25); animation: dew 6s linear infinite; }
.weather-column i:nth-of-type(2){left:55%;animation-delay:1.3s;background:var(--rose)}.weather-column i:nth-of-type(3){left:28%;animation-delay:2.4s;background:var(--fern)}
.wc1{left:8%;}.wc2{left:30%;height:44vh}.wc3{left:52%;height:61vh}.wc4{left:74%;height:49vh}
.glyph-field b:nth-child(1){left:60%;top:18%}.glyph-field b:nth-child(2){left:76%;top:31%}.glyph-field b:nth-child(3){left:40%;top:38%}.glyph-field b:nth-child(4){left:18%;top:44%}.glyph-field b:nth-child(5){right:12%;bottom:24%}.glyph-field b:nth-child(6){left:31%;bottom:15%}

.loom { display: grid; place-items: center; }
.loom-frame { position: relative; width: min(1120px, 86vw); height: 62vh; border-radius: 58px; background: linear-gradient(135deg, rgba(255,255,255,.36), rgba(143,191,159,.18)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.6), 0 28px 90px rgba(23,35,59,.12); }
.thread-svg { position:absolute; inset:0; overflow:visible; }
#threadPath { fill:none; stroke: rgba(110,49,94,.28); stroke-width: 3; stroke-dasharray: 10 10; }
.thread-text { font: 700 30px var(--display); fill: var(--mulberry); letter-spacing: -.02em; }
.loom-lines { position:absolute; inset:40px; background: repeating-linear-gradient(90deg, transparent 0 42px, rgba(143,191,159,.28) 43px, transparent 45px), repeating-linear-gradient(0deg, transparent 0 54px, rgba(190,231,244,.28) 55px, transparent 57px); border-radius: 38px; }
.tone-beads { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); display:flex; flex-wrap:wrap; justify-content:center; gap: 12px; width:min(760px,80vw); }
.tone-beads button { border:0; border-radius:999px; padding: 11px 16px; color: var(--ink); background: radial-gradient(circle at 30% 20%, #fff, var(--basin) 40%, rgba(143,191,159,.72)); box-shadow: inset -5px -6px 13px rgba(23,35,59,.12), 0 10px 26px rgba(23,35,59,.14); font:700 12px var(--jp); cursor:pointer; }
.tone-beads button.active { background: radial-gradient(circle at 30% 20%, #fff, var(--citrus) 42%, var(--rose)); transform: translateY(-6px); }
.petals i { position:absolute; width:58px; height:28px; background: rgba(246,167,184,.68); clip-path: ellipse(48% 48% at 50% 50%); border-radius: 80% 20%; transform-origin: 0 50%; opacity:.76; animation: petal 5s ease-in-out infinite; }
.petals i:nth-child(1){left:22%;top:35%;transform:rotate(25deg)}.petals i:nth-child(2){left:31%;top:47%;transform:rotate(-18deg);animation-delay:.7s}.petals i:nth-child(3){left:52%;top:39%;transform:rotate(42deg);animation-delay:1.1s}.petals i:nth-child(4){left:66%;top:28%;transform:rotate(-36deg);animation-delay:1.6s}.petals i:nth-child(5){left:75%;top:50%;transform:rotate(12deg);animation-delay:2s}.petals i:nth-child(6){left:43%;top:25%;transform:rotate(60deg);animation-delay:2.4s}
.loom-copy { position:absolute; left:8vw; top:7vh; }

.release { display:grid; place-items:center; background: radial-gradient(circle at 50% 100%, rgba(143,191,159,.55), transparent 45%); }
.release-garden { position: relative; width: min(1120px, 86vw); height: 70vh; }
.lantern { position:absolute; width: min(330px, 28vw); min-height: 190px; padding: 24px; border-radius: 36px 36px 48px 48px; background: linear-gradient(180deg, rgba(255,255,255,.64), rgba(190,231,244,.22)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.7), 0 26px 70px rgba(23,35,59,.14); animation: floatLantern 6s ease-in-out infinite; }
.lantern::after { content:''; position:absolute; left:50%; bottom:-24px; width:2px; height:36px; background: rgba(110,49,94,.22); }
.lantern span { font: 700 13px var(--jp); color: var(--mulberry); letter-spacing:.12em; text-transform:uppercase; }
.lantern p { margin: 12px 0 0; font: 650 clamp(17px,1.5vw,23px)/1.35 var(--display); }
.l1{left:4%;top:23%;}.l2{left:31%;top:6%;animation-delay:.8s}.l3{right:5%;top:22%;animation-delay:1.3s}.l4{left:20%;bottom:4%;animation-delay:1.9s}.l5{right:20%;bottom:2%;animation-delay:2.5s}
.release-copy { position:absolute; left:8vw; top:7vh; }

body.tone-warmth { --basin: #F6A7B8; }
body.tone-clarity { --basin: #BEE7F4; }
body.tone-apology { --mulberry: #6E315E; --basin: #F6A7B8; }
body.tone-confidence { --basin: #F7D35C; }
body.tone-distance { --basin: #BEE7F4; --mulberry: #17233B; }
body.tone-formality { --basin: #8FBF9F; }
body.tone-delight { --basin: #F7D35C; --mulberry: #6E315E; }

@keyframes breathe { 0%,100%{transform:scale(.96);opacity:.58} 50%{transform:scale(1.05);opacity:1} }
@keyframes flutter { 0%,100%{transform:translateY(0) rotate(-2deg)} 50%{transform:translateY(-16px) rotate(3deg)} }
@keyframes dew { 0%{top:12%;opacity:0} 15%{opacity:1} 100%{top:86%;opacity:.25} }
@keyframes petal { 0%,100%{scale:.92;opacity:.55} 50%{scale:1.16;opacity:.95} }
@keyframes floatLantern { 0%,100%{transform:translateY(0) rotate(-1deg)} 50%{transform:translateY(-22px) rotate(1deg)} }

@media (max-width: 900px) {
  .scene { padding: 88px 24px; }
  .tone-nav { right: 12px; }
  .basin { grid-template-columns: 1fr; }
  .basin-instrument { min-height: 390px; height: 45vh; }
  .r4 { width: 90vw; height: 280px; }
  .r3 { width: 74vw; height: 220px; }
  .weather-column { width: 21vw; }
  .loom-frame, .release-garden { width: 92vw; }
  .lantern { width: 42vw; }
  .thread-text { font-size: 24px; }
}