:root {
  --pearl-shell: #FFF4FA;
  --frosted-lavender: #DCC8FF;
  --bubble-aqua: #9FE9F5;
  --lip-gloss-pink: #FF9ACD;
  --moon-chrome: #D8DDEB;
  --soft-lemon-charm: #FFF1A8;
  --deep-tide-ink: #28304F;
  --blush-coral-accent: #FF6F91;
  --display: "Fraunces", Georgia, serif;
  --voice: "Bricolage Grotesque", Inter, system-ui, sans-serif;
  --jp: "Noto Sans JP", system-ui, sans-serif;
}

* { box-sizing: border-box; }

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

body {
  font-family: var(--voice);
  color: var(--deep-tide-ink);
  background:
    radial-gradient(circle at 14% 18%, rgba(255, 154, 205, .36), transparent 28%),
    radial-gradient(circle at 73% 20%, rgba(159, 233, 245, .44), transparent 31%),
    linear-gradient(115deg, var(--pearl-shell), var(--frosted-lavender) 46%, var(--bubble-aqua));
}

.mist-field { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.orb { position: absolute; border-radius: 999px; filter: blur(.3px); background: radial-gradient(circle at 28% 24%, #fff, rgba(255,244,250,.7) 28%, rgba(159,233,245,.18) 70%); box-shadow: inset -12px -16px 28px rgba(216,200,255,.35), 0 0 40px rgba(255,154,205,.28); animation: floatOrb 9s ease-in-out infinite; }
.orb-one { width: 26vmin; height: 26vmin; left: 7vw; top: 9vh; }
.orb-two { width: 17vmin; height: 17vmin; right: 12vw; top: 28vh; animation-delay: -3s; }
.orb-three { width: 22vmin; height: 22vmin; left: 48vw; bottom: 7vh; animation-delay: -5s; }
.chrome-sheen { position: absolute; width: 42vw; height: 2px; background: linear-gradient(90deg, transparent, #fff, var(--moon-chrome), transparent); transform: rotate(-18deg); opacity: .7; }
.sheen-one { left: -5vw; top: 34vh; animation: slideSheen 8s ease-in-out infinite; }
.sheen-two { right: -9vw; bottom: 28vh; animation: slideSheen 11s ease-in-out infinite reverse; }

.shoreline { position: relative; z-index: 1; display: flex; height: 100vh; width: 100vw; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth; cursor: grab; }
.shoreline.dragging { cursor: grabbing; scroll-snap-type: none; }
.shoreline::-webkit-scrollbar { display: none; }

.tide-room { position: relative; flex: 0 0 94vw; min-width: 94vw; height: 100vh; scroll-snap-align: center; overflow: hidden; padding: 9vh 7vw 16vh; border-right: 1px solid rgba(255,255,255,.52); }
.tide-room::before { content: ""; position: absolute; inset: 9vh 4vw 12vh; border: 1px solid rgba(255,255,255,.48); border-radius: 48px; background: linear-gradient(135deg, rgba(255,255,255,.34), rgba(255,255,255,.06)); box-shadow: inset 0 1px 0 rgba(255,255,255,.88), 0 24px 60px rgba(40,48,79,.08); pointer-events: none; }
.horizon { position: absolute; left: -6vw; right: -6vw; top: 54vh; height: 18vh; background: linear-gradient(180deg, rgba(255,255,255,.25), rgba(159,233,245,.28)); clip-path: polygon(0 38%, 7% 31%, 16% 42%, 25% 28%, 36% 44%, 48% 30%, 60% 43%, 73% 27%, 84% 39%, 94% 30%, 100% 37%, 100% 100%, 0 100%); opacity: .72; }

.room-copy { position: relative; z-index: 2; max-width: 720px; }
.label, .sticker { display: inline-block; margin: 0 0 1rem; padding: .45rem .8rem; border-radius: 999px; color: var(--deep-tide-ink); background: rgba(255,244,250,.54); border: 1px solid rgba(255,255,255,.72); box-shadow: 0 12px 28px rgba(255,111,145,.16), inset 0 1px 0 #fff; font: 700 .78rem/1 var(--voice); letter-spacing: .11em; text-transform: uppercase; }
.jp { font-family: var(--jp); letter-spacing: .16em; }
h1, h2 { margin: 0; font-family: var(--display); font-variation-settings: "SOFT" 15, "WONK" 1; line-height: .86; color: var(--deep-tide-ink); text-shadow: 0 2px 0 rgba(255,255,255,.7), 0 18px 44px rgba(255,154,205,.26); }
.wordmark { max-width: 820px; font-size: clamp(4.4rem, 13vw, 12rem); font-weight: 860; letter-spacing: -.08em; }
h2 { font-size: clamp(3.4rem, 8vw, 8.6rem); font-weight: 760; letter-spacing: -.055em; }
p { font-size: clamp(1rem, 1.55vw, 1.35rem); line-height: 1.45; max-width: 44rem; }
.retort, .transform-phrase, .final-line { font-family: var(--display); font-size: clamp(2.1rem, 5vw, 5.7rem); font-weight: 800; letter-spacing: -.045em; color: var(--blush-coral-accent); margin: 1.2rem 0 .4rem; transition: font-variation-settings .5s ease, transform .5s ease, color .5s ease; font-variation-settings: "SOFT" 0, "WONK" 1; }
.shoreline.warm .transform-phrase { color: var(--lip-gloss-pink); font-variation-settings: "SOFT" 75, "WONK" 0; transform: translateY(3px); }

.ribbon { position: absolute; left: 11vw; top: clamp(7rem, 20vh, 13rem); z-index: 3; min-width: 21rem; padding: .92rem 2.3rem; transform: rotate(-7deg); border-radius: 999px; background: linear-gradient(90deg, var(--blush-coral-accent), var(--lip-gloss-pink)); color: #fff; font-weight: 800; letter-spacing: .12em; text-align: center; text-transform: uppercase; box-shadow: 0 18px 38px rgba(255,111,145,.34), inset 0 2px 0 rgba(255,255,255,.54); transition: transform .5s cubic-bezier(.17,.84,.31,1.24), opacity .5s ease; }
.ribbon.loosened { transform: translateX(16vw) rotate(4deg); opacity: .58; }
.underwater-note { margin-top: 7rem; max-width: 32rem; }

.bead-curtain { position: absolute; top: 0; right: 7vw; display: flex; gap: 18px; z-index: 2; }
.bead-curtain i { display: block; width: 9px; height: 44vh; background: repeating-linear-gradient(to bottom, rgba(255,255,255,.7) 0 9px, rgba(216,221,235,.55) 9px 18px, transparent 18px 25px); border-radius: 999px; animation: beadSway 4.8s ease-in-out infinite; transform-origin: top; }
.bead-curtain i:nth-child(even) { animation-delay: -1.8s; height: 51vh; }

.shell-lock { position: absolute; right: 13vw; top: 18vh; width: 230px; height: 190px; z-index: 2; filter: drop-shadow(0 30px 38px rgba(40,48,79,.16)); }
.shell { position: absolute; width: 128px; height: 164px; background: radial-gradient(circle at 35% 20%, #fff, var(--pearl-shell) 38%, var(--frosted-lavender)); border: 2px solid rgba(255,255,255,.7); }
.shell-left { left: 10px; border-radius: 90% 25% 60% 35%; transform: rotate(-16deg); animation: shellRefuseLeft 3.8s ease-in-out infinite; }
.shell-right { right: 10px; border-radius: 25% 90% 35% 60%; transform: rotate(16deg); animation: shellRefuseRight 3.8s ease-in-out infinite; }
.lock-pearl { position: absolute; left: 95px; top: 72px; width: 42px; height: 42px; border-radius: 50%; background: radial-gradient(circle at 32% 28%, #fff, var(--soft-lemon-charm), var(--lip-gloss-pink)); box-shadow: 0 0 28px rgba(255,241,168,.8); }
.speech { position: absolute; right: 26vw; bottom: 24vh; z-index: 3; padding: 1rem 1.3rem; border-radius: 28px 28px 8px 28px; background: rgba(255,244,250,.68); border: 1px dotted var(--blush-coral-accent); font-weight: 800; box-shadow: 0 18px 34px rgba(216,200,255,.3); }

.static { background: radial-gradient(circle at 73% 31%, rgba(255,241,168,.36), transparent 22%); }
.narrow-copy { margin-left: 5vw; margin-top: 7vh; }
.compact-mirror { position: absolute; right: 9vw; top: 18vh; width: 330px; height: 330px; border-radius: 50%; background: conic-gradient(from 130deg, #fff, var(--moon-chrome), var(--frosted-lavender), #fff, var(--bubble-aqua), #fff); border: 14px solid rgba(255,244,250,.7); box-shadow: inset 0 0 35px rgba(40,48,79,.12), 0 30px 60px rgba(40,48,79,.16); display: grid; place-items: center; transform: rotate(-9deg); }
.compact-mirror span { font-family: var(--jp); color: rgba(40,48,79,.45); font-size: 1.7rem; }
.wave-sticker { position: absolute; right: 29vw; bottom: 26vh; transform: rotate(12deg); background: var(--soft-lemon-charm); }
.pearl-cluster { position: absolute; left: 13vw; bottom: 17vh; width: 210px; height: 120px; }
.pearl-cluster span { position: absolute; border-radius: 50%; background: radial-gradient(circle at 30% 25%, #fff, var(--pearl-shell), var(--frosted-lavender)); box-shadow: 0 12px 26px rgba(40,48,79,.12); }
.pearl-cluster span:nth-child(1) { width: 88px; height: 88px; left: 0; top: 22px; }
.pearl-cluster span:nth-child(2) { width: 58px; height: 58px; left: 70px; top: 4px; }
.pearl-cluster span:nth-child(3) { width: 74px; height: 74px; left: 116px; top: 36px; }
.pearl-cluster span:nth-child(4) { width: 36px; height: 36px; left: 164px; top: 7px; }

.corridor-copy { margin: 5vh auto 0; text-align: center; }
.bubble-field { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.bubble { position: absolute; pointer-events: auto; border: 1px solid rgba(255,255,255,.82); border-radius: 50%; background: radial-gradient(circle at 28% 22%, #fff, rgba(255,244,250,.55) 28%, rgba(159,233,245,.3) 65%, rgba(255,154,205,.18)); box-shadow: inset -12px -18px 30px rgba(216,200,255,.24), 0 18px 38px rgba(40,48,79,.12); color: var(--deep-tide-ink); font: 800 1rem var(--voice); cursor: pointer; animation: bubbleDrift 6s ease-in-out infinite; }
.bubble span { display: inline-block; padding: 1rem; transform: rotate(-8deg); }
.bubble.popped { animation: popBubble .55s ease forwards; }
.bubble-one { width: 138px; height: 138px; left: 13vw; top: 18vh; }
.bubble-two { width: 198px; height: 198px; left: 31vw; bottom: 15vh; animation-delay: -1s; }
.bubble-three { width: 110px; height: 110px; right: 33vw; top: 17vh; animation-delay: -2s; }
.bubble-four { width: 160px; height: 160px; right: 15vw; bottom: 21vh; animation-delay: -3s; }
.bubble-five { width: 88px; height: 88px; right: 47vw; bottom: 10vh; animation-delay: -4s; }
.flip-charm { position: absolute; left: 8vw; bottom: 18vh; width: 72px; height: 100px; border-radius: 18px; display: grid; place-items: center; color: var(--blush-coral-accent); background: linear-gradient(145deg, var(--pearl-shell), var(--moon-chrome)); box-shadow: 0 18px 38px rgba(40,48,79,.14); animation: charmSway 3.2s ease-in-out infinite; }

.diagonal-ribbon { position: absolute; left: -5vw; right: -5vw; top: 19vh; padding: .8rem; transform: rotate(-5deg); background: rgba(255,241,168,.72); border-top: 1px solid #fff; border-bottom: 1px solid #fff; text-align: center; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--deep-tide-ink); box-shadow: 0 16px 34px rgba(255,241,168,.24); }
.invitation-copy { margin-top: 26vh; margin-left: 7vw; }
.invitation-card { position: absolute; right: 14vw; top: 34vh; width: 290px; min-height: 190px; padding: 3.2rem 2rem 2rem; border-radius: 34px; background: rgba(255,244,250,.74); border: 1px solid rgba(255,255,255,.88); box-shadow: 0 28px 60px rgba(40,48,79,.15), inset 0 1px 0 #fff; transform: rotate(8deg); font-family: var(--display); font-size: 2rem; }
.invitation-card em { display: block; margin-top: .8rem; font: 700 .95rem var(--voice); color: var(--blush-coral-accent); }
.pin { position: absolute; top: 18px; left: 24px; width: 62px; height: 18px; border: 3px solid var(--moon-chrome); border-radius: 999px; transform: rotate(-16deg); }
.jelly { position: absolute; border-radius: 50% 50% 45% 45%; background: radial-gradient(circle at 35% 25%, #fff, var(--bubble-aqua)); box-shadow: 0 0 34px rgba(159,233,245,.7); animation: jellyGlow 4s ease-in-out infinite; }
.jelly::after { content: ""; position: absolute; left: 20%; right: 20%; top: 70%; height: 42px; border-left: 2px solid rgba(255,255,255,.8); border-right: 2px solid rgba(255,255,255,.8); border-radius: 0 0 40px 40px; }
.lantern-one { width: 86px; height: 72px; right: 34vw; bottom: 19vh; }
.lantern-two { width: 58px; height: 50px; right: 8vw; bottom: 35vh; animation-delay: -2s; }

.afterparty { flex-basis: 100vw; min-width: 100vw; background: radial-gradient(circle at 65% 20%, rgba(255,241,168,.52), transparent 24%), radial-gradient(circle at 27% 70%, rgba(255,111,145,.24), transparent 28%); }
.final-copy { margin: 9vh 0 0 5vw; }
.final-line { color: var(--lip-gloss-pink); }
.moon-wave { position: absolute; right: 7vw; bottom: 19vh; width: 48vw; height: 28vh; }
.moon-wave svg { width: 100%; height: 100%; overflow: visible; }
.moon-wave path { fill: none; stroke: url(#none); stroke: var(--pearl-shell); stroke-width: 7; stroke-linecap: round; filter: drop-shadow(0 0 14px rgba(255,154,205,.7)); stroke-dasharray: 650; animation: drawWave 5.8s ease-in-out infinite; }
.moon-wave path:nth-child(2) { stroke: var(--soft-lemon-charm); animation-delay: -1.8s; }
.cushion { position: absolute; bottom: 15vh; border-radius: 40% 60% 55% 45%; background: linear-gradient(135deg, var(--lip-gloss-pink), var(--frosted-lavender)); box-shadow: inset 0 2px 0 rgba(255,255,255,.7), 0 24px 48px rgba(40,48,79,.12); }
.cushion-one { width: 180px; height: 92px; right: 32vw; }
.cushion-two { width: 132px; height: 72px; right: 20vw; background: linear-gradient(135deg, var(--soft-lemon-charm), var(--bubble-aqua)); }
.garland { position: absolute; top: 12vh; right: 8vw; display: flex; gap: 18px; transform: rotate(7deg); }
.garland span { width: 36px; height: 36px; border-radius: 50%; background: radial-gradient(circle at 28% 22%, #fff, var(--pearl-shell), var(--bubble-aqua)); box-shadow: 0 0 20px rgba(255,255,255,.82); animation: bubbleDrift 4s ease-in-out infinite; }

.charm-bracelet { position: fixed; z-index: 10; left: 50%; bottom: 24px; transform: translateX(-50%); width: min(660px, calc(100vw - 34px)); height: 74px; display: flex; justify-content: space-between; align-items: center; padding: 0 24px; border-radius: 999px; background: rgba(255,244,250,.56); border: 1px solid rgba(255,255,255,.8); box-shadow: 0 18px 48px rgba(40,48,79,.14), inset 0 1px 0 #fff; backdrop-filter: blur(16px); }
.bracelet-line { position: absolute; left: 52px; right: 52px; top: 36px; height: 4px; border-radius: 999px; background: rgba(216,221,235,.8); overflow: hidden; z-index: 0; }
.bracelet-line i { display: block; width: 0%; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--blush-coral-accent), var(--lip-gloss-pink), var(--bubble-aqua)); transition: width .28s ease; }
.charm { position: relative; z-index: 1; width: 54px; height: 54px; border: 0; border-radius: 50%; background: linear-gradient(145deg, #fff, var(--moon-chrome)); box-shadow: inset 0 2px 0 #fff, 0 10px 22px rgba(40,48,79,.13); cursor: pointer; transition: transform .28s cubic-bezier(.17,.84,.31,1.24), background .28s ease; font-size: 0; }
.charm::before { content: ""; position: absolute; inset: 14px; border-radius: inherit; background: var(--pearl-shell); box-shadow: inset 0 0 0 2px rgba(255,255,255,.72); }
.charm:nth-child(3)::before { background: var(--bubble-aqua); }
.charm:nth-child(4)::before { border-radius: 14px; background: var(--lip-gloss-pink); }
.charm:nth-child(5)::before { background: var(--soft-lemon-charm); clip-path: polygon(50% 0, 62% 34%, 100% 34%, 70% 56%, 82% 100%, 50% 72%, 18% 100%, 30% 56%, 0 34%, 38% 34%); }
.charm.active { transform: translateY(-10px) scale(1.08) rotate(-6deg); background: linear-gradient(145deg, #fff, var(--lip-gloss-pink)); }
.charm span { position: absolute; left: 50%; bottom: -18px; transform: translateX(-50%); font: 700 .62rem var(--voice); color: var(--deep-tide-ink); opacity: 0; }
.charm.active span { opacity: .8; }
.mood-meter { position: fixed; z-index: 9; right: 24px; top: 22px; padding: .72rem 1rem; border-radius: 999px; background: rgba(255,244,250,.58); border: 1px solid rgba(255,255,255,.74); font: 800 .78rem var(--voice); letter-spacing: .13em; text-transform: uppercase; backdrop-filter: blur(12px); }

@keyframes floatOrb { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(16px,-22px,0) scale(1.04); } }
@keyframes slideSheen { 0%,100% { transform: translateX(-5vw) rotate(-18deg); opacity: .25; } 50% { transform: translateX(12vw) rotate(-18deg); opacity: .85; } }
@keyframes beadSway { 0%,100% { transform: rotate(-2deg); } 50% { transform: rotate(3deg); } }
@keyframes shellRefuseLeft { 0%,100% { transform: rotate(-16deg) translateX(0); } 42% { transform: rotate(-20deg) translateX(-5px); } 60% { transform: rotate(-12deg) translateX(3px); } }
@keyframes shellRefuseRight { 0%,100% { transform: rotate(16deg) translateX(0); } 42% { transform: rotate(20deg) translateX(5px); } 60% { transform: rotate(12deg) translateX(-3px); } }
@keyframes bubbleDrift { 0%,100% { transform: translate3d(0,0,0); } 50% { transform: translate3d(0,-24px,0); } }
@keyframes popBubble { 0% { opacity: 1; transform: scale(1); } 55% { opacity: .88; transform: scale(1.16); filter: saturate(1.6); } 100% { opacity: .18; transform: scale(.22); } }
@keyframes charmSway { 0%,100% { transform: rotate(-6deg); } 50% { transform: rotate(8deg) translateY(-8px); } }
@keyframes jellyGlow { 0%,100% { transform: translateY(0); opacity: .7; } 50% { transform: translateY(-18px); opacity: 1; } }
@keyframes drawWave { 0% { stroke-dashoffset: 650; } 50% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -650; } }

@media (max-width: 760px) {
  .tide-room { flex-basis: 100vw; min-width: 100vw; padding: 8vh 6vw 17vh; }
  .wordmark { font-size: clamp(3.8rem, 22vw, 7rem); }
  h2 { font-size: clamp(3rem, 15vw, 5.2rem); }
  .ribbon { left: 6vw; min-width: 17rem; }
  .shell-lock, .compact-mirror, .invitation-card { transform: scale(.72) rotate(6deg); right: -4vw; }
  .moon-wave { width: 86vw; right: 6vw; }
}