.bottle-discovery[hidden]{display:none}
.bottle-discovery{position:absolute;top:var(--bottle-top);left:0;width:100%;padding:20px 24px max(90px,env(safe-area-inset-bottom));text-align:center;opacity:0;transition:opacity 1.5s ease}
.bottle-discovery.is-discovered{opacity:1}
.bottle-stage{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:clamp(470px,76svh,700px)}
.bottle-drift{width:clamp(210px,62vw,290px);animation:bottle-drift 13s ease-in-out infinite alternate;animation-play-state:paused}
.bottle-discovery.in-view .bottle-drift{animation-play-state:running}
.found-bottle{display:block;width:100%;border:0;padding:0;background:transparent;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .9s cubic-bezier(.2,.65,.3,1),opacity 1.8s ease;touch-action:manipulation}
.found-bottle:focus-visible{outline:1px solid #c8e7ee;outline-offset:8px;border-radius:45%}
.bottle-art{position:relative;display:block;width:100%;aspect-ratio:2/3;filter:drop-shadow(0 0 20px #5bbbd015);transition:filter .8s ease}
.bottle-art img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}
.bottle-glass{z-index:1}
.bottle-art .bottle-cork{inset:auto;left:40.4%;top:-1.7%;width:22%;height:auto;z-index:0;transform:none;transition:transform .75s ease,opacity .75s ease}
.bottle-hint{font:italic 1.25rem/1.5 OceanSerif,Georgia,serif;letter-spacing:.015em;color:#c2dbe3;margin:24px 0 0;transition:opacity .5s ease}
.bottle-discovery.is-opening .found-bottle{transform:scale(1.12) translateY(-8px)}
.bottle-discovery.is-opening .bottle-art{filter:drop-shadow(0 0 28px #84d8e827)}
.bottle-discovery.is-opening .bottle-cork{transform:translate(3px,-16px) rotate(-7deg);opacity:0}
.bottle-discovery.is-opening .bottle-hint,.bottle-discovery.is-releasing .bottle-hint{opacity:0}
.bottle-discovery.is-releasing .found-bottle{transform:translate3d(35px,-70px,0) scale(.7) rotate(7deg);opacity:0;pointer-events:none;transition:transform 2.4s ease,opacity 2.4s ease}
.bottle-next{position:absolute;top:50%;left:calc(50% - 12px);width:24px;height:44px;opacity:0;color:#acd3df;transition:opacity 1.5s ease;outline:none;pointer-events:none}
.bottle-discovery.is-released .bottle-next{opacity:.7}
.bottle-next svg{width:100%;height:100%;stroke:currentColor;stroke-width:1;stroke-linecap:round;stroke-linejoin:round}
@keyframes bottle-drift{from{transform:translate3d(-4px,5px,0) rotate(-2deg)}to{transform:translate3d(5px,-7px,0) rotate(2deg)}}
.bottle-note{padding:0;border:0;max-width:35rem;width:calc(100% - 32px);max-height:calc(100dvh - 40px - env(safe-area-inset-top) - env(safe-area-inset-bottom));background:transparent;overflow:visible;color:#34352f;overscroll-behavior:contain}
.bottle-note::backdrop{background:#011b2bcc;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.note-sheet{position:relative;display:flex;flex-direction:column;max-height:calc(100dvh - 40px - env(safe-area-inset-top) - env(safe-area-inset-bottom));background:linear-gradient(100deg,#e7dfcd 0%,#f4eddf 6%,#f6f0e4 52%,#f0e7d7 100%);box-shadow:0 24px 80px #00132077,0 1px 1px #fcf8ed88 inset;border-radius:2px;overflow:hidden}
.bottle-note[open] .note-sheet{animation:note-unfurl .64s cubic-bezier(.16,.65,.3,1) both;transform-origin:50% 50%}
.note-close{position:absolute;right:8px;top:8px;z-index:1;display:grid;place-items:center;width:44px;height:44px;border:0;background:transparent;color:#676557;cursor:pointer;border-radius:50%}
.note-close svg{width:20px;height:20px;stroke:currentColor;stroke-width:1.2}
.note-reading{min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:58px clamp(24px,7vw,44px) 12px;scrollbar-width:thin;scrollbar-color:#b4ac9a transparent;-webkit-overflow-scrolling:touch}
.note-reading h2{font:400 clamp(1.95rem,8vw,2.6rem)/1.15 OceanSerif,Georgia,serif;letter-spacing:-.025em;max-width:15ch;margin:0 auto 32px;text-align:center;outline:none;color:#353c36}
.note-reading p{font:400 clamp(1.2rem,5vw,1.4rem)/1.6 OceanSerif,Georgia,serif;margin:0 0 26px;text-align:left;color:#3f4239}
.note-footer{flex:none;text-align:center;padding:12px 20px 18px;background:linear-gradient(#f4ecdf00,#ece3d1aa)}
.note-release{min-height:44px;font:italic 1.15rem/1.5 OceanSerif,Georgia,serif;letter-spacing:.025em;color:#555f54;background:transparent;border:0;cursor:pointer;padding:6px 14px}
.note-release span{display:inline-block;margin-left:9px;font-style:normal}
.note-close:focus-visible,.note-release:focus-visible{outline:1px solid #5d796a;outline-offset:2px}
.bottle-note.is-closing .note-sheet{animation:note-fold .65s cubic-bezier(.4,0,.35,1) both}
.bottle-note[open]::backdrop{animation:note-backdrop-in .64s ease both}
.bottle-note.is-closing::backdrop{animation:note-backdrop-out .65s ease both}
.emerging-note{position:absolute;z-index:2;left:46.5%;top:5%;width:10%;height:15%;opacity:0;pointer-events:none;border-radius:45% / 5%;background:linear-gradient(90deg,#d9ccb3,#f4eddf 30%,#eee4d0 72%,#cbbd9f);box-shadow:inset -2px 0 3px #87724a33,0 2px 8px #001b3022;transform:translateY(40%) scaleX(.8)}
.bottle-discovery.is-opening .emerging-note{animation:paper-emerge .48s .28s cubic-bezier(.22,.65,.3,1) both}
.bottle-discovery.paper-transferred .emerging-note{visibility:hidden}
@keyframes paper-emerge{0%{opacity:0;transform:translateY(40%) scaleX(.8)}22%{opacity:.95}100%{opacity:1;transform:translateY(-90%) scaleX(1)}}
@keyframes note-unfurl{from{opacity:.85;transform:translate(var(--paper-x,0px),var(--paper-y,0px)) scale(var(--paper-scale-x,.08),var(--paper-scale-y,.15));border-radius:45% / 5%}to{opacity:1;transform:translate(0,0) scale(1);border-radius:2px}}
@keyframes note-fold{0%{opacity:1;transform:translate(0,0) scale(1)}80%{opacity:.85}100%{opacity:0;transform:translate(var(--paper-x,0px),var(--paper-y,0px)) scale(var(--paper-scale-x,.08),var(--paper-scale-y,.15));border-radius:45% / 5%}}
@keyframes note-backdrop-in{from{opacity:0}to{opacity:1}}
@keyframes note-backdrop-out{from{opacity:1}to{opacity:0}}
@media(prefers-reduced-motion:reduce){.emerging-note{display:none}.bottle-note[open]::backdrop,.bottle-note.is-closing::backdrop{animation:none!important}}
@media(prefers-reduced-motion:reduce){.bottle-drift{animation:none!important}.bottle-discovery,.found-bottle,.bottle-cork,.bottle-hint,.bottle-next{transition:opacity .2s ease!important}.bottle-discovery.is-opening .found-bottle,.bottle-discovery.is-releasing .found-bottle,.bottle-cork{transform:none!important}.bottle-note[open] .note-sheet{animation:none!important}.bottle-note.is-closing .note-sheet{opacity:0;transition:opacity .15s ease!important}}
