:root{color-scheme:dark;--cream:#fff4df;--gold:#e9bb79;--night:#09191e}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--night)}body{color:var(--cream);font-family:"Hiragino Maru Gothic ProN","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;line-height:1.8}a{color:inherit;text-decoration:none}a:focus-visible{outline:3px solid var(--gold);outline-offset:7px;border-radius:4px}.entrance{position:relative;min-height:720px;height:100svh;isolation:isolate;overflow:hidden}.scene{position:absolute;inset:0;z-index:-1;background:var(--night)}.scene picture{display:contents}.poster,#door-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}.poster{opacity:1}#door-film{opacity:0;transition:opacity .15s}.shade{position:absolute;inset:0;background:linear-gradient(90deg,#07181dd9 0%,#07181d75 25%,transparent 45%,transparent 65%,#07181d55 100%),linear-gradient(180deg,#0513188c,transparent 25%,transparent 70%,#06171dcc);transition:opacity .7s}.warm-fade{position:absolute;inset:0;background:#fff6e7;opacity:0;transition:opacity .4s;pointer-events:none}.entry-header{position:absolute;left:4.5%;right:4.5%;top:32px;display:flex;align-items:flex-start;justify-content:space-between;gap:24px}.brand{font-size:13px;letter-spacing:.04em;line-height:1.8;text-shadow:0 2px 10px #000}.brand span{display:block;font-size:10px;letter-spacing:.18em;opacity:.7;margin-top:2px}.skip{font-size:12px;min-height:44px;padding:10px 0;color:#f6e9d2;text-shadow:0 1px 8px #000}.skip span{display:inline-block;margin-left:8px;transition:transform .2s}.skip:hover span{transform:translate(2px,-2px)}.invitation{position:absolute;left:7%;top:50%;transform:translateY(-42%);width:340px;transition:opacity .4s,transform .6s;max-width:30%}.eyebrow{font-size:13px;letter-spacing:.12em;color:#e4c99f;margin:0 0 26px}h1{font-family:"Yu Mincho","Hiragino Mincho ProN",serif;font-weight:400;font-size:clamp(34px,3.6vw,58px);line-height:1.65;letter-spacing:.06em;margin:0 0 22px;text-shadow:0 2px 18px #0008}h1 span{white-space:nowrap}.lead{font-size:14px;line-height:2.1;letter-spacing:.05em;margin:0 0 30px;color:#f2dfc2}.enter-link{display:flex;align-items:center;justify-content:center;gap:14px;width:270px;max-width:100%;min-height:58px;padding:14px 18px;border:1px solid #e9bb798c;border-radius:3px;background:#a76a3429;box-shadow:inset 0 0 22px #dca46209,0 3px 24px #0002;font-size:15px;letter-spacing:.09em;transition:background .25s,border-color .25s,box-shadow .25s}.enter-link:hover{border-color:var(--gold);background:#c8904e33;box-shadow:0 0 24px #ffb65b1c}.key{font-size:24px;color:var(--gold);line-height:1}.arrow{margin-left:auto;font-size:19px;transition:transform .2s}.enter-link:hover .arrow{transform:translateX(4px)}.hint{font-size:10px;letter-spacing:.08em;color:#d8c3a3b0;margin:10px 0 0 2px}.entry-footer{position:absolute;left:4.5%;right:4.5%;bottom:28px;display:flex;justify-content:space-between;gap:20px;font-size:10px;letter-spacing:.14em;color:#e5cfb299;transition:opacity .4s}.film-status{position:absolute;left:50%;bottom:10%;transform:translateX(-50%);width:min(320px,80%);text-align:center;font-size:13px;letter-spacing:.08em;opacity:0;pointer-events:none;transition:opacity .3s;text-shadow:0 1px 12px #000}.progress{display:block;height:1px;background:#fff5;margin:16px auto 0;width:100px;overflow:hidden}.progress span{display:block;width:100%;height:100%;background:var(--gold);transform:scaleX(0);transform-origin:left center}body[data-state="loading"] .invitation,body[data-state="playing"] .invitation,body[data-state="leaving"] .invitation{opacity:0;transform:translateY(-42%) translateX(-8px);pointer-events:none}body[data-state="loading"] .film-status,body[data-state="playing"] .film-status{opacity:1}body[data-state="playing"] #door-film,body[data-state="leaving"] #door-film{opacity:1}body[data-state="playing"] .shade{opacity:.15}body[data-state="playing"] .brand,body[data-state="playing"] .entry-footer{opacity:0;pointer-events:none}body[data-state="leaving"] .warm-fade{opacity:1}body[data-state="leaving"] .entry-header,body[data-state="leaving"] .entry-footer{opacity:0}body[data-state="failed"] .film-status{opacity:1;bottom:18px}body[data-state="failed"] .progress{display:none}body[data-state="failed"] .entry-footer{display:none}
@media(max-width:1000px) and (min-width:701px){.invitation{left:4%;max-width:32%}h1{font-size:34px}.lead{font-size:12px}.enter-link{font-size:13px;padding:12px;gap:8px}}
@media(max-width:700px){.entrance{height:100svh;min-height:640px}.entry-header{left:20px;right:20px;top:18px}.brand{font-size:10px;max-width:210px}.brand span{font-size:8px;letter-spacing:.1em}.skip{font-size:10px;max-width:114px;text-align:right;padding:0;line-height:1.7}.skip span{margin-left:2px}.shade{background:linear-gradient(180deg,#07171ef2 0%,#07171ea1 18%,#07171e0a 40%,transparent 60%,#07171ec7 83%,#07171e 100%)}.invitation{inset:92px 20px 72px;transform:none;width:auto;max-width:none;display:flex;flex-direction:column;align-items:center;text-align:center}.eyebrow{font-size:11px;margin:0 0 9px;letter-spacing:.15em}h1{font-size:32px;line-height:1.55;letter-spacing:.1em;margin:0;text-shadow:0 2px 18px #000}h1 br{display:none}h1 span{display:block}.lead{margin:auto 0 16px;font-size:12px;line-height:1.9;text-shadow:0 2px 10px #000}.lead br{display:none}.enter-link{width:270px;min-height:56px;font-size:14px;background:#7953335c;backdrop-filter:blur(6px)}.hint{font-size:9px;margin-top:10px}.entry-footer{left:20px;right:20px;bottom:22px;font-size:8px;letter-spacing:.06em}.film-status{bottom:12%;font-size:12px}body[data-state="loading"] .invitation,body[data-state="playing"] .invitation,body[data-state="leaving"] .invitation{transform:translateY(4px)}.scene .poster,.scene #door-film{object-fit:cover}.entry-header .skip{position:relative;z-index:2}}
@media(max-height:700px) and (max-width:700px){.invitation{top:78px;bottom:56px}h1{font-size:28px}.eyebrow{font-size:10px}.entry-footer{bottom:16px}.lead{margin-bottom:10px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}.hint{visibility:hidden}}

/* A small secret-room sign, then an empty beat before the toast. */
.secret-sign{position:absolute;left:50%;top:31%;transform:translateX(-50%) rotate(-3deg);width:180px;padding:13px 12px;background:#213c32;border:6px solid #7e5732;box-shadow:0 5px 12px #0007,inset 0 0 0 1px #f6e6c533;color:#fcebd0;text-align:center;font-family:"Hiragino Maru Gothic ProN",sans-serif;font-weight:700;letter-spacing:.08em;font-size:17px;transition:opacity .3s}.secret-sign small,.secret-sign span{display:block;font-size:9px;font-weight:400;letter-spacing:.09em}.secret-sign small{margin-bottom:5px}.secret-sign span{margin-top:5px}
body:not([data-state="idle"]) .secret-sign{opacity:0}

.cheers-scene{position:absolute;inset:0;pointer-events:none;visibility:hidden;z-index:1;opacity:0;transition:opacity .38s}
.chalk-board{position:absolute;inset:0;width:100%;height:100%;overflow:hidden}.chalk-stroke{stroke-dasharray:1.02;stroke-dashoffset:1.02;opacity:0}#chalk-tip{visibility:hidden;opacity:0;filter:drop-shadow(1px 2px 2px #0005)}
@keyframes chalk-write{from{opacity:1;stroke-dashoffset:1.02}to{opacity:1;stroke-dashoffset:0}}
body[data-state="writing"] .chalk-stroke{animation:chalk-write var(--duration) var(--delay) linear forwards}
body[data-state="cheers"] .chalk-stroke,body[data-state="leaving"] .chalk-stroke{stroke-dashoffset:0;opacity:1}
body[data-state="writing"] #chalk-tip{visibility:visible}
.flying-drinks{position:absolute;width:min(900px,85vw);height:min(430px,48vh);left:50%;top:43%;transform:translateX(-50%)}
.drink{position:absolute;display:block;width:29%;aspect-ratio:1;background-image:url('media/drinks-atlas.webp');background-size:300% 200%;background-repeat:no-repeat;opacity:0;transform:translate(var(--from-x),var(--from-y)) rotate(var(--from-r)) scale(.75);filter:drop-shadow(0 12px 15px #39220c55);will-change:transform,opacity}
.drink-1{left:35%;top:24%;background-position:0 0;--from-x:0px;--from-y:90vh;--from-r:-18deg;--land-r:-4deg;--wait:.12s;z-index:4}
.drink-2{left:2%;top:0;background-position:50% 0;--from-x:-100vw;--from-y:-75vh;--from-r:-36deg;--land-r:-10deg;--wait:0s;z-index:2}
.drink-3{right:0;top:3%;background-position:100% 0;--from-x:100vw;--from-y:-75vh;--from-r:32deg;--land-r:9deg;--wait:.15s;z-index:2}
.drink-4{left:13%;top:43%;background-position:0 100%;--from-x:-100vw;--from-y:60vh;--from-r:30deg;--land-r:-7deg;--wait:.26s;z-index:3}
.drink-5{left:36%;top:-17%;background-position:50% 100%;--from-x:0px;--from-y:-110vh;--from-r:24deg;--land-r:5deg;--wait:.08s;z-index:1}
.drink-6{right:9%;top:43%;background-position:100% 100%;--from-x:100vw;--from-y:65vh;--from-r:-25deg;--land-r:6deg;--wait:.3s;z-index:3}
.cheers-note{position:absolute;top:89%;left:0;width:100%;font-size:13px;letter-spacing:.08em;text-align:center;color:#fff2d9;margin:0;opacity:0;text-shadow:0 2px 7px #291a11}
body:is([data-state="quiet"],[data-state="writing"],[data-state="cheers"]) #door-film{opacity:1}
body:is([data-state="quiet"],[data-state="writing"],[data-state="cheers"]) .shade{opacity:.15}
body:is([data-state="quiet"],[data-state="writing"],[data-state="cheers"]) :is(.invitation,.brand,.entry-footer){opacity:0;pointer-events:none}
body:is([data-state="writing"],[data-state="cheers"],[data-state="leaving"]) .cheers-scene{visibility:visible;opacity:1}
body:is([data-state="cheers"],[data-state="leaving"]) .drink{opacity:1;transform:translate(0,0) rotate(var(--land-r)) scale(1);transition:transform 1.3s var(--wait) cubic-bezier(.16,1,.3,1),opacity .3s var(--wait)}
body:is([data-state="cheers"],[data-state="leaving"]) .cheers-note{opacity:1;transition:opacity .6s 1s}
body[data-state="leaving"] .cheers-scene{opacity:0}.entry-header{z-index:3}
@media(max-width:700px){.secret-sign{top:39%;width:140px;font-size:14px;padding:9px;border-width:4px}.secret-sign small,.secret-sign span{font-size:7px}.flying-drinks{width:94%;height:33%;top:48%}.drink{width:36%}.drink-1{left:32%;top:24%}.drink-2{left:-1%;top:0}.drink-3{right:-1%;top:0}.drink-4{left:4%;top:44%}.drink-5{left:33%;top:-12%}.drink-6{right:0;top:44%}.cheers-note{top:84%;font-size:11px}}
@media(prefers-reduced-motion:reduce){.cheers-scene{display:none}}

/* Keep the writing at the center, with six independent drinks around it. */
.flying-drinks{width:min(1000px,92vw);height:min(700px,80vh);left:50%;top:50%;transform:translate(-50%,-50%)}
.drink{width:22%}
.drink-1{left:18%;right:auto;top:72%}
.drink-2{left:18%;right:auto;top:0}
.drink-3{left:auto;right:18%;top:0}
.drink-4{left:0;right:auto;top:36%}
.drink-5{left:auto;right:0;top:36%}
.drink-6{left:auto;right:18%;top:72%}
.cheers-note{top:auto;bottom:3.5%}
@media(max-width:700px){.flying-drinks{width:100%;height:50vh;max-height:460px;top:50%}.drink{width:25%}.drink-1{left:18%;top:81%}.drink-2{left:18%;top:0}.drink-3{right:18%;top:0}.drink-4{left:0;top:42%}.drink-5{right:0;top:42%}.drink-6{right:18%;top:81%}.cheers-note{top:auto;bottom:8%}}

/* Adopted composition: ten varieties around the larger chalk message. */
.flying-drinks{width:min(1100px,96vw)}.drink{width:18%}
.drink-1{left:10%;right:auto;top:74%}
.drink-2{left:10%;right:auto;top:0}
.drink-3{left:auto;right:10%;top:0}
.drink-4{left:0;right:auto;top:36%}
.drink-5{left:auto;right:0;top:36%}
.drink-6{left:32%;right:auto;top:74%}
.drink-7,.drink-8,.drink-9,.drink-10{background-image:url('media/drinks-extra.webp');background-size:200% 200%}
.drink-7{left:32%;top:-3%;background-position:0 0;--from-x:-40vw;--from-y:-100vh;--from-r:-20deg;--land-r:-5deg;--wait:.12s}
.drink-8{left:54%;top:-2%;background-position:100% 0;--from-x:40vw;--from-y:-100vh;--from-r:28deg;--land-r:6deg;--wait:.25s}
.drink-9{left:54%;top:74%;background-position:0 100%;--from-x:40vw;--from-y:100vh;--from-r:-18deg;--land-r:3deg;--wait:.35s}
.drink-10{left:auto;right:10%;top:74%;background-position:100% 100%;--from-x:100vw;--from-y:50vh;--from-r:25deg;--land-r:8deg;--wait:.4s}
@media(max-width:700px){.flying-drinks{width:100%;height:53vh;max-height:480px}.drink{width:22%}.drink-1,.drink-2{left:5%}.drink-3,.drink-10{right:5%}.drink-6,.drink-7{left:28%}.drink-8,.drink-9{left:51%}.drink-1,.drink-6,.drink-9,.drink-10{top:82%}.drink-2,.drink-3{top:0}.drink-4,.drink-5{top:42%;width:16%}.drink-7,.drink-8{top:0}}