/* 月光来信 · motion layer (watercolor veil, moon dust, stickers, envelope, ink reveals) */

/* ambient watercolor wash */
.wash{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.wash i{position:absolute;width:62vmax;height:62vmax;border-radius:50%;filter:blur(50px);opacity:.55;will-change:transform;animation:wash-drift 34s ease-in-out infinite alternate}
.wash i:nth-child(1){left:-18vmax;top:-22vmax;background:radial-gradient(circle,#c3d5e6,transparent 68%)}
.wash i:nth-child(2){right:-20vmax;top:8vmax;background:radial-gradient(circle,#ddd6ea,transparent 66%);animation-duration:41s;animation-delay:-12s}
.wash i:nth-child(3){left:22vmax;bottom:-32vmax;background:radial-gradient(circle,#d4e3dc,transparent 66%);animation-duration:47s;animation-delay:-25s}
@keyframes wash-drift{0%{transform:translate(0,0) scale(1)}50%{transform:translate(6vmax,4vmax) scale(1.12)}100%{transform:translate(-4vmax,7vmax) scale(.94)}}
.moon-dust{position:fixed;inset:0;width:100%;height:100%;z-index:2;pointer-events:none}

/* page-change veil: a watercolor blot that blooms from the click point */
.veil{position:fixed;inset:0;z-index:90;pointer-events:none;visibility:hidden}
.veil-edge,.veil-ink{position:absolute;inset:0;mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;mask-size:0 0;-webkit-mask-size:0 0}
.veil-edge{background:#c3d1dd}
.veil-ink{background:radial-gradient(ellipse at 50% 42%,#f8f6ef 0,#edf0ef 62%,#e1e8ec 100%)}
.veil-word{position:absolute;left:0;right:0;top:45%;margin:0;text-align:center;font:36px var(--script);color:#4a5d74;opacity:0}

/* entrances */
@keyframes rise{from{opacity:0;translate:0 16px}to{opacity:1;translate:0 0}}
@keyframes drop{0%{opacity:0;translate:0 -46px;scale:1.25}60%{opacity:1;translate:0 4px;scale:.97}100%{opacity:1;translate:0 0;scale:1}}
@keyframes write{from{clip-path:inset(-40% 100% -40% -12%)}to{clip-path:inset(-40% -12% -40% -12%)}}
@keyframes kanji-in{from{opacity:0;filter:blur(10px);scale:1.25}to{opacity:.9;filter:blur(0);scale:1}}
.home.enter .hero-type h1{animation:write 1.5s cubic-bezier(.55,0,.2,1) both .45s}
.home.enter .hero-type .cn-title,.home.enter .hero-type .eyebrow{animation:rise .9s cubic-bezier(.2,.8,.2,1) both 1.1s}
.home.enter .home-caption{animation:rise .8s cubic-bezier(.2,.8,.2,1) both .9s}
.home.enter .home-actions{animation:rise .8s cubic-bezier(.2,.8,.2,1) both 1.05s}
.home.enter .sticker{animation:drop .9s cubic-bezier(.3,.7,.3,1) both;animation-delay:calc(.5s + var(--i) * .12s)}
.desk.enter .section-name{animation:rise .8s cubic-bezier(.2,.8,.2,1) both .05s}
.desk.enter .portal-wrap{animation:rise 1s cubic-bezier(.2,.8,.2,1) both .12s}
.desk.enter .pinned-note{animation:rise .8s cubic-bezier(.2,.8,.2,1) both .3s}
.desk.enter .left-caption,.desk.enter .search-box{animation:rise .8s cubic-bezier(.2,.8,.2,1) both .4s}
.desk.enter .journal-paper{animation:rise .9s cubic-bezier(.2,.8,.2,1) both .1s}
.desk.enter .date-block{animation:rise .8s cubic-bezier(.2,.8,.2,1) both .18s}
.desk.enter .large-kanji{animation:kanji-in 1.1s cubic-bezier(.2,.7,.2,1) both .3s}
.desk.enter .index-card{animation:rise .8s cubic-bezier(.2,.8,.2,1) both .26s}
.desk.enter .entry-item{animation:rise .55s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(.4s + var(--i,0) * 55ms)}
.desk.enter .index-bottom,.desk.enter .small-quote,.desk.enter .write-button{animation:rise .8s cubic-bezier(.2,.8,.2,1) both .6s}
.dial .orbit{animation:orbit-drift 60s linear infinite}
@keyframes orbit-drift{to{rotate:360deg}}
/* astrolabe ring on the journal dial */
.dial.astro-on{margin:30px auto 38px;user-select:none;-webkit-user-select:none}
.astro{position:absolute;inset:-24px;border-radius:50%;cursor:grab;touch-action:none}
.dial.turning .astro{cursor:grabbing}
.astro:before{content:'';position:absolute;inset:0;border-radius:50%;border:1px solid #8195aa59;background:radial-gradient(circle,transparent calc(50% - 25px),#e9eff22e calc(50% - 25px),#dfe8ee7a 50%,transparent 50%);box-shadow:inset 0 0 0 4px #ffffff40}
.astro-tick{position:absolute;left:50%;top:50%;width:36px;height:28px;margin:-14px 0 0 -18px;display:flex;flex-direction:column;align-items:center;gap:2px;color:#748799;transform:rotate(var(--t)) translateY(-122px);pointer-events:auto}
.astro-tick i{width:5px;height:5px;border-radius:50%;background:#91a3b4;transition:background .3s,box-shadow .3s,scale .3s}
.astro-tick b{font:7px/1 var(--mono);font-weight:400;letter-spacing:.4px;transition:color .3s}
.astro-tick.at-top i{background:#34445b;box-shadow:0 0 0 3px #c8d6e1;scale:1.25}
.astro-tick.at-top b{color:#22354b}
.astro-needle{position:absolute;left:50%;top:-38px;width:0;height:0;margin-left:-6px;border:6px solid transparent;border-top:10px solid #34445b;z-index:2;pointer-events:none;filter:drop-shadow(0 1px 0 #fff)}
.astro-hint{position:absolute;right:-34px;bottom:-26px;font:7px var(--mono);letter-spacing:2px;color:#8796a4;pointer-events:none}
.entry-item.just-picked{background:linear-gradient(90deg,#c7d7e4 0,#d7e3ed8c 60%) no-repeat;background-size:100% 100%;animation:pick .55s cubic-bezier(.2,.8,.2,1)}
@keyframes pick{from{background-size:0 100%}}

/* stickers */
.sticker{position:absolute;left:var(--x);top:var(--y);width:var(--w);z-index:3;transform:rotate(var(--r));cursor:grab;touch-action:none;user-select:none}
.sticker img{display:block;width:100%;pointer-events:none;filter:drop-shadow(0 3px 4px #3f516624) drop-shadow(0 10px 14px #3f51661a);transform:perspective(520px) rotateX(var(--ty,0deg)) rotateY(var(--tx,0deg));transition:transform .3s,filter .3s}
.sticker:hover img{filter:drop-shadow(0 5px 6px #3f51662e) drop-shadow(0 16px 22px #3f516626) brightness(1.03)}
.sticker.lifted{cursor:grabbing;z-index:20;scale:1.12}
.sticker.lifted img{transition:none;filter:drop-shadow(0 10px 10px #3f516633) drop-shadow(0 28px 34px #3f51662b)}
.desk-center{position:relative}
.desk-stickers{position:absolute;inset:0;pointer-events:none;z-index:3}
.desk-sticker{pointer-events:none;animation:drop .9s cubic-bezier(.3,.7,.3,1) both;animation-delay:calc(.55s + var(--i) * .16s)}
.flying-bird{position:fixed;left:0;top:0;width:70px;z-index:120;pointer-events:none;filter:drop-shadow(0 8px 10px #3f516633)}

/* ink ring on press */
.text-button,.tabs button,.write-button,.read-link,.save-button,.note-submit,.icon-button{position:relative}
.ink-ring{position:absolute;left:var(--rx);top:var(--ry);width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;border:1px solid currentColor;pointer-events:none;animation:ink-ring .7s ease-out forwards}
@keyframes ink-ring{from{opacity:.55;transform:scale(1)}to{opacity:0;transform:scale(14)}}
.nav-button.got-letter{animation:got-letter 1s ease-out}
@keyframes got-letter{0%{box-shadow:0 0 0 0 #7f98b0aa}100%{box-shadow:0 0 0 20px #7f98b000}}

/* dialogs */
dialog[open]{animation:dlg-in .55s cubic-bezier(.2,.8,.2,1)}
dialog[open]::backdrop{animation:fade-in .45s ease-out}
@keyframes dlg-in{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}
@keyframes fade-in{from{opacity:0}}

/* envelope for 偶遇一封信 */
.letter-stage{position:fixed;inset:0;z-index:95;display:grid;place-items:center;background:radial-gradient(circle at 50% 46%,#f3f5f2d9,#d9e2e8cc);backdrop-filter:blur(4px);cursor:pointer;opacity:0}
.envelope{position:relative;width:340px;height:220px;perspective:900px}
.env-back{position:absolute;inset:0;background:linear-gradient(#e6dfcc,#ddd4bd);border-radius:3px;box-shadow:0 22px 50px #2a3d5233,0 4px 10px #2a3d521f}
.env-letter{position:absolute;left:18px;right:18px;top:12px;height:186px;z-index:1;background:linear-gradient(#fcfbf6,#f0efe7);border:1px solid #fff;box-shadow:0 2px 8px #4a5d7026;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:var(--ink)}
.env-letter span{font-size:18px;color:#7f93a6}
.env-letter em{font:30px var(--script);font-style:normal}
.env-letter small{font:8px var(--mono);letter-spacing:2.5px;color:#7d8b97}
.env-pocket{position:absolute;inset:0;z-index:2;border-radius:3px;background:linear-gradient(165deg,#f2ecde,#e2d9c3);clip-path:polygon(0 0,50% 54%,100% 0,100% 100%,0 100%)}
.env-flap{position:absolute;left:0;right:0;top:0;height:62%;z-index:3;transform-origin:top;background:linear-gradient(#ede6d4,#ddd3bb);clip-path:polygon(0 0,100% 0,50% 100%)}
.env-flap.behind{z-index:0}
.env-seal{position:absolute;left:50%;top:61%;z-index:4;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;transform:translate(-50%,-50%);background:radial-gradient(circle at 35% 30%,#9db0c3,#53697f 70%);box-shadow:inset 0 0 0 3px #6f86a0,0 3px 6px #22334455;color:#eef3f6;font-size:18px}
.env-sprig{position:absolute;right:-18px;bottom:-14px;z-index:5;width:66px;rotate:18deg;filter:drop-shadow(0 4px 5px #3f516630)}

@media(max-width:930px){.home .sticker{display:none}}
@media(max-width:650px){.desk-stickers{display:none}.envelope{scale:.82}}
@media(prefers-reduced-motion:reduce){.wash,.moon-dust,.veil{display:none}}