/* Beyond2Day — time capsule ceremonies: sealing and opening the jar (js/capsula.js). Shared with the site's /capsula/ page. */
.capfx { position: absolute; inset: 0; z-index: 40; overflow: hidden; contain: layout paint; opacity: 0; background: radial-gradient(120% 80% at 50% 58%, rgba(96, 76, 178, .94), rgba(30, 22, 80, .97) 72%); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.capfx-sparks { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 7; }
.capfx-rays { position: absolute; left: 50%; top: 58%; width: 100%; aspect-ratio: 1; transform: translate(-50%, -50%); opacity: 0; pointer-events: none; background: repeating-conic-gradient(rgba(255, 226, 150, .2) 0 6deg, transparent 6deg 20deg); -webkit-mask: radial-gradient(closest-side, #000 18%, transparent 70%); mask: radial-gradient(closest-side, #000 18%, transparent 70%); }
.capfx-jarpos { position: absolute; left: 50%; top: 58%; width: min(60%, 260px); transform: translate(-50%, -50%); z-index: 2; }
.capfx-jar { position: relative; aspect-ratio: .957; }
.capfx-jar img { position: absolute; left: 0; top: 0; width: 100%; height: auto; transition: opacity .22s; }
.capfx img { pointer-events: none; -webkit-user-drag: none; -webkit-touch-callout: none; }
.capfx-jar .j-cork { left: 30.7%; top: .5%; width: 40.7%; transition: none; z-index: 1; }
.capfx-glow { position: absolute; left: 8%; right: 8%; top: 26%; bottom: 2%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 214, 120, .8), rgba(255, 190, 90, 0)); filter: blur(16px); opacity: .5; }
.capfx-scroll { position: absolute; left: 0; top: 0; width: 40%; max-width: none; opacity: 0; z-index: 4; pointer-events: none; transform-origin: 50% 50%; }
.capfx-top, .capfx-bottom { position: absolute; left: 0; right: 0; display: grid; justify-items: center; gap: 6px; padding: 0 24px; text-align: center; z-index: 5; color: #FFF4DA; }
.capfx-top { top: calc(70px + var(--sat, env(safe-area-inset-top, 0px))); }
.capfx.open .capfx-top { opacity: 0; }
.capfx-bottom { bottom: calc(44px + var(--sab, env(safe-area-inset-bottom, 0px))); }
.capfx-note { width: min(84%, 320px); padding: 18px 20px; border-radius: 6px 6px 18px 6px; background: linear-gradient(170deg, #FFF8E8, #F4E2BC); box-shadow: 0 10px 30px rgba(10, 5, 40, .35); color: var(--ink-2, #5E5698); font-family: var(--hand, 'Caveat', 'Segoe Print', cursive); font-size: 21px; line-height: 1.15; text-align: left; max-height: 30vh; overflow: hidden; }
.capfx-note p { margin: 0; white-space: pre-wrap; }
.capfx-title { font-weight: 800; font-size: 20px; text-shadow: 0 2px 14px rgba(255, 200, 100, .55); text-wrap: balance; }
.capfx-when { font-family: var(--hand, 'Caveat', 'Segoe Print', cursive); font-size: 26px; line-height: 1; color: #FFE3A0; }
.capfx-line, .capfx-hint { font-size: 14.5px; line-height: 1.35; opacity: .88; max-width: 300px; }
.capfx-hint { font-weight: 700; animation: capHint 1.6s ease-in-out infinite; }
@keyframes capHint { 50% { opacity: .45; } }
.capfx-letter { position: absolute; left: 50%; width: min(86%, 360px); transform: translate(-50%, -50%); z-index: 6; opacity: 0; }
.capfx-sheet { position: relative; }
.capfx-paper { min-height: 150px; max-height: 54vh; overflow-y: auto; padding: 24px 22px 22px; background: linear-gradient(175deg, #FFF9EC, #F3E0B8); border-radius: 3px; box-shadow: 0 16px 40px rgba(10, 5, 40, .4); color: var(--ink-2, #5E5698); -webkit-user-select: text; user-select: text; }
.capfx-paper .from { margin: 0 0 10px; font-size: 12.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #A68D58; }
.capfx-paper .txt { margin: 0; white-space: pre-wrap; font-family: var(--hand, 'Caveat', 'Segoe Print', cursive); font-size: calc(23px * var(--ts, 1)); line-height: 1.18; }
.capfx-roll { position: absolute; left: -12px; right: -12px; height: 20px; border-radius: 10px; background: linear-gradient(180deg, #EBD29C, #FFF6DC 45%, #D3B06E); box-shadow: 0 3px 8px rgba(60, 40, 10, .3); z-index: 2; }
.capfx-roll.top { top: -10px; }
.capfx-roll.bot { bottom: -10px; }
.capfx-letter .btn { width: 100%; margin-top: 22px; }