/* ================= 尾声 时光胶囊 ================= */
#ch-capsule { padding: calc(var(--vh) * 10) 0 calc(var(--vh) * 12); }
.cp-wrap { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.cp-bottle { width: min(52vw, 210px); cursor: pointer; -webkit-user-select: none; user-select: none; }
.cp-svg { display: block; width: 100%; height: auto; overflow: visible; }
.cp-svg g { transform-box: fill-box; transform-origin: 50% 50%; }
.cp-bottle.wobble .cp-svg { animation: cp-wobble .7s ease-in-out; transform-origin: 50% 95%; }
@keyframes cp-wobble { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-6deg); } 60% { transform: rotate(4deg); } 85% { transform: rotate(-1.5deg); } }
.cp-dust circle { animation: cp-dust 3.2s ease-in-out infinite; animation-delay: calc(var(--d) * -1); transform-box: fill-box; transform-origin: center; }
@keyframes cp-dust { 0%, 100% { opacity: .25; transform: translateY(0) scale(.8); } 50% { opacity: 1; transform: translateY(-8px) scale(1.2); } }
.cp-glow { opacity: 0; transition: opacity 1.2s; }
.cp-scroll { opacity: 0; transform: translateY(-90px) scale(.6); transition: opacity .6s, transform .8s var(--ease-pop); }
.cp-cork { transform: translate(18px, -34px) rotate(24deg); transition: transform .7s var(--ease-pop); }
.cp-wax { opacity: 0; transform: scale(2.2); transition: opacity .3s, transform .35s cubic-bezier(.5, 0, .7, 1); }
.cp-tag { opacity: 0; transform-origin: 0% 0%; transition: opacity .6s; }
#ch-capsule[data-st='sealed'] .cp-scroll, #ch-capsule[data-st='open'] .cp-scroll { opacity: 1; transform: none; }
#ch-capsule[data-st='sealed'] .cp-cork { transform: none; }
#ch-capsule[data-st='sealed'] .cp-wax { opacity: 1; transform: none; }
#ch-capsule[data-st='sealed'] .cp-tag { opacity: 1; animation: cp-swing 3.6s ease-in-out infinite; }
#ch-capsule[data-st='sealed'] .cp-glow, #ch-capsule[data-st='open'] .cp-glow { opacity: 1; }
#ch-capsule[data-st='open'] .cp-cork { transform: translate(40px, -60px) rotate(40deg); }
@keyframes cp-swing { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(5deg); } }
.cp-bottle.sealing .cp-scroll { transition-delay: 0s; }
.cp-bottle.sealing .cp-cork { transition-delay: .45s; }
.cp-bottle.sealing .cp-wax { transition-delay: 1s; }
.cp-bottle.sealing .cp-tag { transition-delay: 1.3s; }
.cp-write { width: min(100%, 460px); padding: 16px 16px 14px; transform-origin: 50% 0; }
.cp-write.rolling { animation: cp-roll .9s cubic-bezier(.5, 0, .7, .4) forwards; }
@keyframes cp-roll { 0% { transform: none; opacity: 1; } 55% { transform: scaleY(.12) translateY(-40px); opacity: 1; border-radius: 40px; } 100% { transform: scaleY(.05) scaleX(.3) translateY(-1200px); opacity: 0; } }
.cp-in { width: 100%; min-height: 128px; resize: none; border: 0; outline: none; background: repeating-linear-gradient(transparent 0 calc(1.9em - 1px), rgba(255, 140, 180, .35) calc(1.9em - 1px) 1.9em); font: 17px/1.9 var(--f-hand); color: #3a2418; padding: 0 2px; }
.cp-in::placeholder { color: rgba(58, 36, 24, .42); }
.cp-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }
.cp-cnt { font-size: 12px; color: var(--ink2); font-weight: 500; }
.cp-sealed, .cp-opened { display: none; }
.cp-sealed { flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.cp-st { font-size: 20px; color: #fff2c4; }
.cp-when { font-size: 16px; color: var(--txt); }
.cp-when b { color: var(--gold); font-size: 18px; }
.cp-note { font-size: 13.5px; color: var(--txt2); max-width: 22em; word-break: keep-all; overflow-wrap: anywhere; }
.cp-btns { display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.cp-rewrite { font-size: 13px; color: var(--txt2); text-decoration: underline; text-underline-offset: 3px; padding: 6px; }
#ch-capsule[data-st='sealed'] .cp-write, #ch-capsule[data-st='open'] .cp-write { display: none; }
#ch-capsule[data-st='sealed'] .cp-sealed { display: flex; }
#ch-capsule[data-st='open'] .cp-opened { display: block; }
.cp-opened { width: min(100%, 460px); padding: 18px 18px 16px; }
.cp-oh { font-size: 15px; color: var(--rose); margin-bottom: 6px; }
.cp-her { font-size: 17px; line-height: 1.9; white-space: pre-wrap; color: #3a2418; }
.cp-his { width: min(100%, 460px); padding: 14px 16px; }
.cp-lock { display: flex; align-items: center; gap: 12px; }
.cp-lock b { font-weight: normal; font-size: 17px; }
.cp-lock span { display: block; font-size: 13.5px; color: var(--ink2); }
.cp-lock span b { font-size: 14px; color: var(--rose); }
.cp-lockic { position: relative; flex: none; width: 34px; height: 30px; margin-top: 10px; border-radius: 7px; border: 3px solid var(--ink); background: var(--gold); }
.cp-lockic::before { content: ''; position: absolute; left: 5px; right: 5px; top: -15px; height: 18px; border: 3px solid var(--ink); border-bottom: 0; border-radius: 12px 12px 0 0; }
.cp-lockic::after { content: ''; position: absolute; left: 50%; top: 8px; width: 6px; height: 8px; margin-left: -3px; border-radius: 3px; background: var(--ink); }
.cp-histxt { display: none; font-size: 16.5px; line-height: 1.9; color: #3a2418; }
.cp-histxt p { text-indent: 2em; }
.cp-histxt p:first-child { text-indent: 0; color: var(--rose); font-family: var(--f-cute); }
#ch-capsule[data-st='open'] .cp-lock { display: none; }
#ch-capsule[data-st='open'] .cp-histxt { display: block; }