/* ===== Wishly recipient player ===== */
.wl, .wl *, .wl *::before, .wl *::after { box-sizing: border-box; }
.wl-page { margin: 0; background: #1a0b14; overflow: hidden; -webkit-tap-highlight-color: transparent; }
.wl {
  --f: 'Caveat', 'Atma', 'Hind Siliguri', cursive; --fs: 1.7rem; --lh: 1.55;
  --disp: 'Playfair Display', 'Noto Serif Bengali', Georgia, serif;
  position: fixed; inset: 0; overflow: hidden; color: #fff;
  background: radial-gradient(120% 90% at 50% 0%, var(--bg2), var(--bg1) 70%);
  font-family: 'Inter', 'Hind Siliguri', system-ui, sans-serif;
  user-select: none; -webkit-user-select: none;
}
.wl[data-font="script"] { --f: 'Dancing Script', 'Galada', cursive; --fs: 1.5rem; --lh: 1.6; }
.wl[data-font="serif"]  { --f: 'Playfair Display', 'Noto Serif Bengali', Georgia, serif; --fs: 1.2rem; --lh: 1.75; }
.wl[data-font="clean"]  { --f: 'Inter', 'Hind Siliguri', system-ui, sans-serif; --fs: 1.1rem; --lh: 1.75; }
:lang(bn) .wl[data-font="hand"], .wl:lang(bn)[data-font="hand"] { --f: 'Atma', 'Hind Siliguri', cursive; --fs: 1.3rem; --lh: 1.75; }
:lang(bn) .wl[data-font="script"] { --f: 'Galada', 'Atma', cursive; --fs: 1.3rem; --lh: 1.8; }
:lang(bn) .wl[data-font="serif"], :lang(bn) .wl[data-font="clean"] { --lh: 1.9; }
#wl-fx { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
#wl-stage { position: absolute; inset: 0; z-index: 2; }
.wl-top { position: fixed; top: max(12px, env(safe-area-inset-top)); right: 12px; z-index: 30; display: flex; gap: 8px; align-items: center; }
.wl-icon-btn { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); background: rgba(0,0,0,.28); color: #fff; font-size: 17px; backdrop-filter: blur(6px); cursor: pointer; }
.wl-icon-btn:hover, .wl-icon-btn:focus-visible { background: rgba(255,255,255,.2); }
.wl-preview-tag { background: #fff; color: #be123c; font: 700 11px/1 Inter, sans-serif; letter-spacing: .12em; text-transform: uppercase; padding: 7px 10px; border-radius: 999px; }
.wl-noscript { position: absolute; inset: 0; overflow: auto; padding: 24px; background: #fff8f1; color: #4a2a2f; z-index: 50; }
.wl-paper-static { max-width: 640px; margin: 0 auto; font-size: 1.15rem; line-height: 1.7; }

/* scenes */
.wl-scene { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; opacity: 0; transition: opacity .8s ease; }
.wl-scene.is-in { opacity: 1; }
.wl-scene.is-out { opacity: 0; }
.wl-hidden { opacity: 0 !important; pointer-events: none; transform: translateY(8px); }

/* buttons */
.wl-btn { font: 600 1rem/1 'Inter', 'Hind Siliguri', sans-serif; padding: 13px 22px; border-radius: 999px; border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.12); color: #fff; cursor: pointer; text-decoration: none; display: inline-block; backdrop-filter: blur(4px); transition: transform .2s, background .2s, opacity .5s; }
.wl-btn:hover { background: rgba(255,255,255,.22); transform: translateY(-1px); }
.wl-btn:focus-visible, .react-btn:focus-visible, .gift:focus-visible, .cake:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.wl-btn-main { background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 60%, #000)); border-color: transparent; box-shadow: 0 8px 24px rgba(0,0,0,.35); transition: opacity .6s, transform .25s; }
.wl-btn-main:hover { background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 60%, #000)); filter: brightness(1.1); }
.wl-btn:disabled { opacity: .5; }
.wl-hint { margin-top: 34px; font-size: .95rem; letter-spacing: .06em; opacity: 0; transition: opacity .8s; text-align: center; animation: hintPulse 2s ease-in-out infinite; }
.wl-hint.is-in { opacity: .9; }
@keyframes hintPulse { 50% { transform: translateY(-4px); } }

/* text units */
.wl-u { display: inline; opacity: 0; transition: opacity .6s ease, transform .6s ease, filter .6s ease; transform: translateY(8px); filter: blur(3px); }
.wl-u.is-in { opacity: 1; transform: none; filter: none; }
.is-typing .wl-u { transition: opacity .05s; transform: none; filter: none; }
.wl-line { opacity: 0; transition: opacity .35s; min-height: 1em; word-wrap: break-word; overflow-wrap: anywhere; }
.wl-line.is-in { opacity: 1; }
.wl-line.is-gap { min-height: .9em; }
.wl-line.is-h2 { font-size: 1.3em; font-weight: 700; margin: .3em 0; }
.wl-line.is-h3 { font-size: 1.12em; font-weight: 700; }
.wl-line.is-quote { border-left: 3px solid var(--accent); padding-left: 12px; opacity: .92; }
.wl-line.is-sig { text-align: right; margin-top: .3em; font-size: 1.1em; }
.is-typing .wl-line:not(.is-gap):last-of-type::after { content: ''; }

/* intro / texts */
.intro-text, .moon-text, .spot-text, .end-text { font-family: var(--f); text-align: center; text-shadow: 0 4px 30px rgba(0,0,0,.35); max-width: 20ch; margin: 0 auto; line-height: 1.25; }
.intro-text { font-size: clamp(2rem, 8vw, 3.6rem); max-width: 16ch; }
:lang(bn) .intro-text, :lang(bn) .end-text, :lang(bn) .spot-text, :lang(bn) .moon-text { line-height: 1.5; font-size: clamp(1.6rem, 6vw, 2.8rem); }
.wl-scene .wl-u { will-change: opacity, transform; }

/* rose */
.rose-box { width: min(74vw, 340px); filter: drop-shadow(0 12px 40px rgba(0,0,0,.35)); }
.rose-box svg { width: 100%; height: auto; display: block; overflow: visible; }
.wish-rose .rose-petal { transform-origin: 0 0; }
.wish-rose .rose-glow { opacity: 0; transition: opacity 2s ease 1.6s; }
.wish-rose.is-open .rose-glow { opacity: 1; }
.rose-cap { margin-top: 6px; font-family: var(--f); font-size: 1.8rem; opacity: 0; transform: translateY(8px); transition: all 1s; }
.rose-cap.is-in { opacity: .95; transform: none; }

/* gift */
.gift { position: relative; width: 190px; height: 200px; cursor: pointer; margin-top: 40px; }
.gift-glow { position: absolute; left: 50%; top: 40%; width: 90px; height: 90px; margin: -45px; border-radius: 50%; background: radial-gradient(circle, #fff6c8, transparent 70%); transform: scale(0); transition: transform 1s ease; }
.gift.is-open .gift-glow { transform: scale(5); }
.gift-body { position: absolute; left: 12px; right: 12px; bottom: 0; height: 120px; background: linear-gradient(#ff6b8b, #c2255c); border-radius: 6px 6px 10px 10px; box-shadow: 0 20px 40px rgba(0,0,0,.35); }
.gift-body .rib { position: absolute; left: 50%; top: 0; bottom: 0; width: 28px; margin-left: -14px; background: linear-gradient(#ffe08a, #f5b700); }
.gift-lid { position: absolute; left: 0; right: 0; bottom: 116px; height: 52px; background: linear-gradient(#ff8fab, #d6336c); border-radius: 8px; transform-origin: left bottom; transition: transform 1s cubic-bezier(.3,1.5,.5,1), opacity 1s; box-shadow: 0 8px 16px rgba(0,0,0,.25); }
.gift-lid::after { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 28px; margin-left: -14px; background: linear-gradient(#ffe08a, #f5b700); }
.gift-lid .bow { position: absolute; top: -26px; width: 46px; height: 34px; border: 8px solid #ffd54a; border-radius: 50% 50% 50% 8%; z-index: 2; }
.gift-lid .bow.l { left: 50%; margin-left: -46px; transform: rotate(-15deg); }
.gift-lid .bow.r { left: 50%; transform: scaleX(-1) rotate(-15deg); }
.gift:not(.is-open) { animation: giftWobble 2.4s ease-in-out infinite; }
@keyframes giftWobble { 0%, 100% { transform: rotate(0); } 10% { transform: rotate(-3deg); } 20% { transform: rotate(3deg); } 30% { transform: rotate(0); } }
.gift.is-open .gift-lid { transform: translate(-30px, -90px) rotate(-32deg); opacity: 0; }

/* cake */
.cake { position: relative; width: 240px; height: 250px; cursor: pointer; margin-top: 20px; }
.cake .tier { position: absolute; left: 50%; transform: translateX(-50%); border-radius: 14px 14px 8px 8px; box-shadow: inset 0 -8px 0 rgba(0,0,0,.12); }
.cake .t1 { bottom: 20px; width: 230px; height: 62px; background: linear-gradient(#ffd0e0, #ff8fb8); }
.cake .t2 { bottom: 78px; width: 176px; height: 58px; background: linear-gradient(#fff0f5, #ffb3d1); }
.cake .t3 { bottom: 132px; width: 120px; height: 52px; background: linear-gradient(#ffe8a3, #ffc247); }
.cake .tier::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 16px; border-radius: inherit; background: repeating-radial-gradient(circle at 12px 0, #fff 0 9px, transparent 10px 24px); opacity: .9; }
.cake .plate { position: absolute; bottom: 8px; left: 50%; width: 260px; height: 16px; margin-left: -130px; border-radius: 50%; background: linear-gradient(#f5f5f5, #cfcfcf); }
.candles { position: absolute; left: 50%; bottom: 182px; width: 110px; margin-left: -55px; height: 70px; }
.candles i { position: absolute; bottom: 0; width: 8px; height: 38px; border-radius: 3px; background: repeating-linear-gradient(45deg, #fff 0 6px, #ff6b8b 6px 12px); left: calc(var(--i) * 25%); }
.flame { position: absolute; bottom: 36px; left: -3px; width: 14px; height: 22px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: radial-gradient(#fff6c8 20%, #ffb300 60%, #ff6a00); transform-origin: bottom center; animation: flick .18s ease-in-out infinite alternate; box-shadow: 0 0 18px 6px rgba(255,190,60,.5); transition: opacity .5s, transform .5s; }
@keyframes flick { from { transform: scale(1, 1) rotate(-3deg); } to { transform: scale(.92, 1.1) rotate(3deg); } }
.cake.is-out .flame { opacity: 0; transform: scale(0) translateY(-14px); animation: none; }
.wl-wish { font-family: var(--f); font-size: 2rem; margin-top: 26px; opacity: 0; transition: opacity 1s; }
.wl-wish.is-in { opacity: 1; }

/* ring */
.ringbox { position: relative; width: 190px; height: 170px; cursor: pointer; margin-top: 40px; perspective: 700px; }
.rb-base { position: absolute; bottom: 0; left: 0; right: 0; height: 90px; border-radius: 10px 10px 16px 16px; background: linear-gradient(#3a1d5c, #1c0d33); box-shadow: 0 20px 40px rgba(0,0,0,.45); }
.rb-lid { position: absolute; bottom: 86px; left: 0; right: 0; height: 60px; border-radius: 14px 14px 0 0; background: linear-gradient(#5b2d91, #2b1450); transform-origin: bottom; transition: transform 1s cubic-bezier(.3,1.3,.5,1); }
.ringbox.is-open .rb-lid { transform: rotateX(-125deg); }
.rb-ring { position: absolute; left: 50%; bottom: 60px; width: 62px; height: 62px; margin-left: -31px; border: 9px solid #ffd54a; border-radius: 50%; z-index: 1; transform: translateY(20px) scale(.8); transition: transform 1.3s cubic-bezier(.3,1.4,.5,1) .5s; }
.ringbox.is-open .rb-ring { transform: translateY(-58px) scale(1.15); }
.rb-ring .gem { position: absolute; top: -22px; left: 50%; width: 24px; height: 24px; margin-left: -12px; background: linear-gradient(135deg, #fff, #9be7ff 50%, #6cb6ff); transform: rotate(45deg); border-radius: 4px; box-shadow: 0 0 20px 6px rgba(160,230,255,.7); }
.rb-glow { position: absolute; left: 50%; top: 20%; width: 60px; height: 60px; margin: -30px; border-radius: 50%; background: radial-gradient(circle, rgba(255,246,200,.9), transparent 70%); transform: scale(0); transition: transform 1.2s ease .5s; }
.ringbox.is-open .rb-glow { transform: scale(6); }

/* moon */
.moon { width: 120px; height: 120px; border-radius: 50%; box-shadow: -32px 10px 0 0 #ffe7a1; transform: rotate(-18deg) translateX(30px); margin-bottom: 40px; filter: drop-shadow(0 0 30px rgba(255,231,161,.6)); animation: moonIn 2s ease both; }
@keyframes moonIn { from { opacity: 0; transform: rotate(-60deg) translateX(30px) scale(.4); } }
.moon i { display: none; }

/* spotlight */
.spot-beam { position: absolute; top: -10%; left: 50%; width: 160%; height: 130%; transform: translateX(-50%); background: conic-gradient(from 168deg at 50% 0, transparent 0 0deg, rgba(255,255,255,.2) 0 24deg, transparent 24deg); animation: sway 5s ease-in-out infinite alternate; pointer-events: none; }
@keyframes sway { from { transform: translateX(-50%) rotate(-5deg); } to { transform: translateX(-50%) rotate(5deg); } }
.spot-text { position: relative; font-family: var(--disp); font-weight: 700; font-size: clamp(2rem, 8vw, 3.4rem); max-width: 14ch; }

/* envelope */
.env { --env: #f6e7d5; --flap: #ead3b9; --front: #f1dcc4; --seal: var(--accent); position: relative; width: min(80vw, 350px); aspect-ratio: 1.52; perspective: 1000px; animation: envIn 1.3s cubic-bezier(.2,1.15,.3,1) both, bob 4.5s ease-in-out 1.4s infinite; filter: drop-shadow(0 22px 40px rgba(0,0,0,.45)); }
.env-midnight { --env: #232b66; --flap: #2d377f; --front: #283070; --seal: #ffd27a; }
.env-party { --env: #ffd166; --flap: #ffbf3b; --front: #ffc94d; --seal: #e64980; }
@keyframes envIn { from { transform: translateY(90vh) rotate(-8deg) scale(.7); opacity: 0; } }
@keyframes bob { 50% { transform: translateY(-9px) rotate(.6deg); } }
.env-back { position: absolute; inset: 0; background: var(--env); border-radius: 8px; }
.env-card { position: absolute; left: 7%; right: 7%; top: 8%; height: 84%; background: #fffdf8; border-radius: 4px; z-index: 1; display: flex; align-items: flex-start; justify-content: center; padding-top: 12%; font-family: var(--f); font-size: 1.5rem; color: #6b4a4a; transition: transform 1.1s cubic-bezier(.3,1.2,.4,1), z-index 0s .5s; box-shadow: 0 -2px 8px rgba(0,0,0,.08); }
.env-front { position: absolute; inset: 0; z-index: 2; background: var(--front); border-radius: 8px; clip-path: polygon(0 0, 50% 58%, 100% 0, 100% 100%, 0 100%); }
.env-front::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,.08)); }
.env-flap { position: absolute; left: 0; right: 0; top: 0; height: 60%; z-index: 3; background: var(--flap); border-radius: 8px 8px 0 0; clip-path: polygon(0 0, 100% 0, 50% 100%); transform-origin: top; transition: transform .9s cubic-bezier(.4,.2,.2,1), z-index 0s .35s; }
.env-seal { position: absolute; left: 50%; top: 52%; width: 50px; height: 50px; margin: -25px 0 0 -25px; z-index: 4; border-radius: 50%; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--seal) 70%, #fff), var(--seal) 60%, color-mix(in srgb, var(--seal) 60%, #000)); display: grid; place-items: center; color: #fff; font-size: 22px; box-shadow: 0 4px 10px rgba(0,0,0,.35); transition: transform .5s, opacity .4s; }
.env-midnight .env-seal { color: #3a2f00; }
.env-seal b { font-weight: 400; }
.env.is-pop .env-seal { transform: scale(1.8); opacity: 0; }
.env.is-open .env-flap { transform: rotateX(180deg); z-index: 0; }
.env.is-rise .env-card { transform: translateY(-62%) scale(1.06); z-index: 5; }
.env-to { margin: 34px 0 6px; font-family: var(--f); font-size: 1.9rem; opacity: 0; transition: opacity 1s; text-align: center; }
.env-to.is-in { opacity: 1; }
.sc-env .wl-btn-main { font-size: 1.08rem; padding: 15px 30px; animation: hintPulse 2.2s ease-in-out infinite; }

/* letter */
.sc-letter { padding: 14px; }
.wl-paper { position: relative; width: min(94vw, 660px); max-height: calc(100dvh - 28px); overflow-y: auto; overscroll-behavior: contain; background: var(--paper); color: var(--ink); border-radius: 6px; padding: clamp(22px, 5.5vw, 48px) clamp(20px, 5.5vw, 46px) 30px; box-shadow: 0 30px 80px rgba(0,0,0,.5), inset 0 0 90px rgba(120,80,40,.10); font-family: var(--f); font-size: var(--fs); line-height: var(--lh); scrollbar-width: thin; user-select: text; -webkit-user-select: text; }
.wl-paper::before { content: ''; position: sticky; display: block; top: 0; height: 0; }
.wl-title { font-family: var(--f); font-size: 1.45em; margin: 0 0 .6em; text-align: center; color: var(--accent); line-height: 1.25; filter: brightness(.85); }
.wl-body { min-height: 3em; }
.sc-letter.reveal-unfold .wl-paper { transform-origin: top center; will-change: transform, opacity; backface-visibility: hidden; animation: unfold 1.4s cubic-bezier(.22,.7,.2,1) both; }
.sc-letter.reveal-slide .wl-paper { animation: slideUp 1s cubic-bezier(.2,.9,.25,1) both; }
/* two keyframes only: one easing curve for the whole move, so it grows smoothly instead of in steps */
@keyframes unfold { from { transform: perspective(1200px) rotateX(-62deg) scale(.9); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes slideUp { from { transform: translateY(70vh) scale(.9); opacity: 0; } to { transform: none; opacity: 1; } }
.sc-end { transition: opacity .6s ease; } .sc-end.is-closing { opacity: 0; }
.wl-cont { display: block; margin: 26px auto 4px; opacity: 0; transform: translateY(6px); font-family: 'Inter', 'Hind Siliguri', sans-serif; }
.wl-cont.is-in { opacity: 1; transform: none; }

/* gallery */
.sc-gallery { justify-content: flex-start; padding: 64px 0 20px; }
.wl-gal-title { font-family: var(--f); font-size: clamp(2rem, 7vw, 2.8rem); margin: 0 0 6px; text-shadow: 0 4px 24px rgba(0,0,0,.4); flex: none; }
.wl-gallery-body { flex: 1; width: 100%; overflow: auto; overflow-x: hidden; padding: 12px 14px 70px; -webkit-overflow-scrolling: touch; display: flex; justify-content: center; align-items: flex-start; }
.sc-gallery > .wl-cont { position: absolute; bottom: max(18px, env(safe-area-inset-bottom)); left: 50%; transform: translate(-50%, 6px); margin: 0; z-index: 4; white-space: nowrap; }
.sc-gallery > .wl-cont.is-in { transform: translate(-50%, 0); }
.wl-gallery-body img { display: block; width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; }
.wl-gallery-body figure { margin: 0; cursor: zoom-in; }
.wl-gallery-body figcaption { font-family: var(--f); }
.wl-polaroids { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px 16px; padding: 10px 0; max-width: 980px; }
.wl-polaroid { width: min(42vw, 210px); background: #fff; padding: 10px 10px 8px; box-shadow: 0 12px 30px rgba(0,0,0,.4); color: #4a3a3a; opacity: 0; transform: translateY(-60px) rotate(calc(var(--rot) * 3)) scale(1.25); transition: opacity .6s, transform .8s cubic-bezier(.3,1.3,.5,1); margin-top: var(--lift); }
.wl-polaroid.is-in { opacity: 1; transform: rotate(var(--rot)); }
.wl-polaroid img { aspect-ratio: 1; height: auto; background: #eee; }
.wl-polaroid figcaption { text-align: center; padding-top: 8px; font-size: 1.15rem; line-height: 1.2; min-height: 1.4em; }
.wl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; width: min(96vw, 900px); }
.wl-gitem { position: relative; aspect-ratio: 1; border-radius: 14px; overflow: hidden; border: 4px solid rgba(255,255,255,.9); box-shadow: 0 10px 26px rgba(0,0,0,.35); opacity: 0; transform: scale(.85); transition: all .6s cubic-bezier(.3,1.3,.5,1); }
.wl-gitem.is-in { opacity: 1; transform: none; }
.wl-gitem figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 8px 6px; font-size: 1rem; text-align: center; background: linear-gradient(transparent, rgba(0,0,0,.65)); }
.layout-filmstrip { align-items: center; }
.wl-film { width: 100%; overflow-x: auto; overflow-y: hidden; background: #111; padding: 26px 0; border-block: 12px dashed #333; scrollbar-width: none; }
.wl-film::-webkit-scrollbar { display: none; }
.wl-film-track { display: flex; gap: 14px; padding: 0 14px; width: max-content; }
.wl-frame { position: relative; height: min(52vh, 360px); aspect-ratio: 4/5; border: 5px solid #f5f0e6; background: #000; flex: none; }
.wl-frame figcaption { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; padding: 16px 6px 4px; background: linear-gradient(transparent, rgba(0,0,0,.7)); }
.layout-heart { align-items: center; }
.wl-heart { position: relative; flex: none; }
.wl-hitem { position: absolute; margin: 0; border-radius: 50%; overflow: hidden; border: 3px solid #fff; box-shadow: 0 6px 18px rgba(0,0,0,.4); opacity: 0; transform: scale(.2); transition: all .7s cubic-bezier(.3,1.5,.5,1); }
.wl-hitem.is-in { opacity: 1; transform: none; }
.wl-heart-core { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%); font-size: clamp(48px, 16vw, 90px); color: var(--accent); opacity: .85; animation: beat 1.4s ease-in-out infinite; filter: drop-shadow(0 0 20px var(--accent)); }
@keyframes beat { 0%, 100% { transform: translate(-50%, -50%) scale(1); } 15% { transform: translate(-50%, -50%) scale(1.15); } 30% { transform: translate(-50%, -50%) scale(1); } }
.wl-floating { position: relative; flex: none; }
.wl-fitem { position: absolute; margin: 0; background: #fff; padding: 6px; box-shadow: 0 12px 28px rgba(0,0,0,.4); border-radius: 6px; opacity: 0; transform: scale(.6) rotate(var(--rot)); transition: opacity .7s, transform .9s cubic-bezier(.3,1.4,.5,1); animation: floaty var(--dur) ease-in-out var(--del) infinite; }
.wl-fitem.is-in { opacity: 1; transform: rotate(var(--rot)); }
.wl-fitem img { aspect-ratio: 1; height: auto; border-radius: 3px; }
@keyframes floaty { 50% { translate: 0 -12px; } }
.layout-slideshow { align-items: center; }
.wl-slides { position: relative; width: min(92vw, 640px); }
.wl-slide-stage { position: relative; width: 100%; aspect-ratio: 4/5; max-height: 66vh; margin: 0 auto; background: rgba(0,0,0,.25); border: 8px solid #fff; border-radius: 6px; overflow: hidden; box-shadow: 0 20px 50px rgba(0,0,0,.45); }
.wl-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.1s ease; }
.wl-slide.is-on { opacity: 1; }
.wl-slide img { object-fit: cover; transform: scale(1.02); }
.wl-slide.is-on img { animation: kb 6s ease-out both; }
@keyframes kb { to { transform: scale(1.1); } }
.wl-slide figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 12px 12px; text-align: center; font-size: 1.4rem; background: linear-gradient(transparent, rgba(0,0,0,.65)); }
.wl-nav { position: absolute; top: 45%; width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(0,0,0,.4); color: #fff; font-size: 26px; line-height: 1; cursor: pointer; z-index: 2; }
.wl-nav.prev { left: -8px; } .wl-nav.next { right: -8px; }
.wl-dots { display: flex; justify-content: center; gap: 7px; margin-top: 14px; }
.wl-dots button { width: 9px; height: 9px; padding: 0; border-radius: 50%; border: 0; background: rgba(255,255,255,.35); cursor: pointer; }
.wl-dots button.on { background: #fff; transform: scale(1.3); }
.wl-timeline { position: relative; width: min(94vw, 720px); padding: 10px 0 40px; }
.wl-timeline::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 3px; margin-left: -1.5px; background: linear-gradient(transparent, var(--glow), transparent); }
.wl-tl-item { position: relative; width: 50%; padding: 10px 26px; opacity: 0; transform: translateY(30px); transition: all .8s cubic-bezier(.2,.9,.3,1); }
.wl-tl-item.is-in { opacity: 1; transform: none; }
.wl-tl-item.l { left: 0; text-align: right; } .wl-tl-item.r { left: 50%; }
.wl-tl-dot { position: absolute; top: 34px; width: 16px; height: 16px; border-radius: 50%; background: var(--accent); border: 3px solid #fff; box-shadow: 0 0 14px var(--accent); }
.wl-tl-item.l .wl-tl-dot { right: -8px; } .wl-tl-item.r .wl-tl-dot { left: -8px; }
.wl-tl-card { background: #fff; color: #4a3a3a; padding: 8px 8px 6px; border-radius: 8px; box-shadow: 0 10px 26px rgba(0,0,0,.35); }
.wl-tl-card img { aspect-ratio: 4/3; height: auto; border-radius: 4px; }
.wl-tl-card figcaption { padding: 6px 4px 2px; font-size: 1.15rem; text-align: center; }
@media (max-width: 560px) {
  .wl-timeline::before { left: 18px; }
  .wl-tl-item, .wl-tl-item.r { width: 100%; left: 0; text-align: left; padding-left: 46px; padding-right: 8px; }
  .wl-tl-item.l .wl-tl-dot, .wl-tl-item.r .wl-tl-dot { left: 10px; right: auto; }
}

/* lightbox */
.wl-lightbox { position: absolute; inset: 0; z-index: 40; background: rgba(0,0,0,.88); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 16px; opacity: 0; transition: opacity .25s; cursor: zoom-out; }
.wl-lightbox.is-in { opacity: 1; }
.wl-lightbox img { max-width: 100%; max-height: 82vh; border-radius: 6px; box-shadow: 0 20px 60px rgba(0,0,0,.6); }
.wl-lightbox p { font-family: var(--f); font-size: 1.5rem; margin: 12px 0 0; text-align: center; }
.wl-lightbox button { position: absolute; top: 14px; right: 16px; background: none; border: 0; color: #fff; font-size: 34px; cursor: pointer; }

/* ending */
.sc-end { justify-content: flex-start; padding-top: 12vh; overflow-y: auto; }
.end-text { font-size: clamp(2.2rem, 9vw, 4rem); max-width: 14ch; }
.end-panel { margin-top: 30px; width: min(92vw, 460px); text-align: center; opacity: 0; transform: translateY(16px); transition: all 1s; padding-bottom: 40px; }
.end-panel.is-in { opacity: 1; transform: none; }
.end-q { font-size: 1rem; opacity: .85; margin-bottom: 10px; }
.react-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.react-btn { width: 50px; height: 50px; font-size: 26px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.1); cursor: pointer; transition: transform .2s, background .2s; }
.react-btn:hover { transform: scale(1.18) translateY(-3px); background: rgba(255,255,255,.22); }
.react-btn.is-sent { background: color-mix(in srgb, var(--accent) 55%, transparent); border-color: var(--accent); transform: scale(1.1); }
.reply { margin: 18px 0 6px; text-align: left; }
.reply summary { cursor: pointer; text-align: center; list-style: none; padding: 10px; border-radius: 999px; border: 1px dashed rgba(255,255,255,.4); font-size: .95rem; }
.reply summary::-webkit-details-marker { display: none; }
.reply[open] summary { margin-bottom: 10px; }
.reply textarea, .reply input { width: 100%; margin-bottom: 8px; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(255,255,255,.3); background: rgba(0,0,0,.28); color: #fff; font: 1rem 'Inter', 'Hind Siliguri', sans-serif; user-select: text; -webkit-user-select: text; }
.reply textarea::placeholder, .reply input::placeholder { color: rgba(255,255,255,.55); }
.reply .send { width: 100%; }
.end-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 16px; }
.end-toast { height: 22px; margin-top: 12px; font-size: .9rem; opacity: 0; transition: opacity .4s; }
.end-toast.is-in { opacity: 1; }

/* static (reduced motion / fallback) */
.wl-static { position: absolute; inset: 0; overflow-y: auto; padding: 24px 14px 60px; display: flex; flex-direction: column; align-items: center; gap: 24px; }
.wl-paper.is-static { max-height: none; }
.wl-static .wl-gallery-body { flex: none; overflow: visible; }
.wl-static .wl-gitem { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .wl *, .wl *::before, .wl *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ===== Signature (its own handwriting font, "written" after the letter) ===== */
.wl { --sigf: 'Great Vibes', 'Galada', 'Atma', cursive; --sigs: 1; }
.wl[data-sig="allura"] { --sigf: 'Allura', 'Galada', 'Atma', cursive; --sigs: 1.08; }
.wl[data-sig="pinyon"] { --sigf: 'Pinyon Script', 'Galada', 'Atma', cursive; --sigs: .92; }
.wl[data-sig="delafield"] { --sigf: 'Mrs Saint Delafield', 'Galada', 'Atma', cursive; --sigs: 1.5; }
.wl-sig { margin: 1.6rem 0 .4rem; text-align: right; color: var(--accent); filter: brightness(.82); }
.wl-sig .wl-flourish { display: block; width: min(52%, 190px); height: 14px; margin: 0 0 -2px auto; overflow: visible; }
.wl-sig .wl-flourish path { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: .7; transition: stroke-dashoffset 1.3s ease .1s; }
.wl-sig.is-in .wl-flourish path { stroke-dashoffset: 0; }
.wl-sig-text { display: inline-block; font-family: var(--sigf); font-size: calc(clamp(2.3rem, 10vw, 3.4rem) * var(--sigs)); line-height: 1.15; padding: .05em .25em .12em; transform: rotate(-3deg); transform-origin: right center; clip-path: inset(-20% 100% -30% -5%); transition: clip-path 1.9s cubic-bezier(.4, .1, .2, 1) .35s; text-shadow: 0 1px 0 rgba(0, 0, 0, .05); }
.wl-sig.is-in .wl-sig-text { clip-path: inset(-20% -5% -30% -5%); }
.wl-paper.is-static .wl-sig-text, .wl-noscript .wl-sig-text { clip-path: none; }

/* highlighter + hand-drawn signature */
.wl-line span[style*="background"] { padding: 0 .14em; border-radius: .25em; -webkit-box-decoration-break: clone; box-decoration-break: clone; color: #2b1a1e; }
.wl-sig-draw { display: block; margin: 0 0 0 auto; width: min(64%, 300px); height: auto; overflow: visible; transform: rotate(-2deg); }
.wl-sig-draw path { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset var(--t, .6s) ease-in-out var(--d, 0s); }
.wl-sig.is-in .wl-sig-draw path { stroke-dashoffset: 0; }
.wl-sig.is-drawn .wl-flourish { display: none; }

/* group wish message cards */
.sc-group { justify-content: center; padding: 20px 14px 96px; }
.g-stage { position: relative; width: min(92vw, 520px); min-height: 300px; }
.g-card { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-46%) scale(.96); opacity: 0; transition: opacity .7s ease, transform .9s cubic-bezier(.2, .9, .3, 1); background: var(--paper); color: var(--ink); border-radius: 8px; padding: clamp(20px, 5vw, 32px); box-shadow: 0 24px 60px rgba(0, 0, 0, .45); font-family: var(--f); font-size: var(--fs); line-height: var(--lh); max-height: 72vh; overflow-y: auto; user-select: text; -webkit-user-select: text; }
.g-card.is-in { opacity: 1; transform: translateY(-50%) scale(1); }
.g-card.is-out { opacity: 0; transform: translateY(-58%) scale(.97); }
.g-card img { display: block; width: 100%; max-height: 240px; object-fit: cover; border-radius: 6px; margin-bottom: 14px; }
.g-msg { margin: 0 0 .6em; white-space: pre-wrap; overflow-wrap: anywhere; }
.g-name { text-align: right; font-family: var(--sigf); font-size: calc(1.5em * var(--sigs)); color: var(--accent); filter: brightness(.82); }
.g-dots { position: absolute; left: 0; right: 0; bottom: 84px; display: flex; justify-content: center; gap: 7px; flex-wrap: wrap; padding: 0 30px; }
.g-prev, .g-next { position: absolute; top: 48%; z-index: 3; } .g-prev { left: 8px; } .g-next { right: 8px; }
.sc-group .wl-cont { position: absolute; bottom: max(20px, env(safe-area-inset-bottom)); left: 50%; margin: 0; transform: translate(-50%, 6px); }
.sc-group .wl-cont.is-in { transform: translate(-50%, 0); }