/* Signature scenes: every template has its OWN 3D world (CSS 3D transforms, layered gradients, glossy highlights).
   No inline styles — everything is class based; dynamic values come through CSS variables set via the CSSOM. */
.sx .sc { width: 100%; max-width: 640px; min-height: 100%; margin: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 54px 0 108px; perspective: 1100px; transition: opacity .38s ease, transform .38s ease; text-align: center; }
.sx .sc-out { opacity: 0; transform: translateY(-14px) scale(.98); }
.sx .sc-pre { opacity: 0; transform: translateY(22px) scale(.98); }
.sx .sc .next, .sx .sc .skip { margin-top: 12px; }
.sx .sc .sec { margin: 0; }
.sx .sc .for { margin: 6px 0 0; letter-spacing: .08em; opacity: .85; }
.sx .sc .sub { margin: 0; }
.sx.shake { animation: sx-shake .5s; }
@keyframes sx-shake { 10%, 50%, 90% { transform: translate(-6px, 3px); } 30%, 70% { transform: translate(6px, -3px); } }
/* gate: every template opens with its own motion */
.sx[data-tpl="story-journey"] .gate-heart { animation: bs-bounce 1.4s ease-in-out infinite; }
.sx[data-tpl="friendship"] .gate-heart { animation: sx-wave 1.6s ease-in-out infinite; transform-origin: 70% 90%; }
.sx[data-tpl="parents"] .gate-heart { animation: float-y 3s ease-in-out infinite; }
.sx[data-tpl="farewell"] .gate-heart { animation: sx-sink 3.4s ease-in-out infinite alternate; }
.sx[data-tpl="apology"] .gate-heart { animation: sx-sob 2.2s ease-in-out infinite; }
.sx[data-tpl="eid"] .gate-heart { animation: sx-sway 3s ease-in-out infinite; transform-origin: 50% 0; }
.sx[data-tpl="boishakh"] .gate-heart { animation: sx-flicker 1.1s ease-in-out infinite; }
.sx[data-tpl="newyear"] .gate-heart { animation: sx-spin 4s linear infinite; }
.sx[data-tpl="valentine"] .gate-heart { animation: heartbeat 1s ease-in-out infinite; }
.sx[data-tpl="anniversary"] .gate-heart { animation: sx-spin 6s ease-in-out infinite; }
.sx[data-tpl="constellation"] .gate-heart { animation: sx-twinkle 1.8s ease-in-out infinite; }
@keyframes sx-wave { 0%, 100% { transform: rotate(-12deg); } 50% { transform: rotate(18deg); } }
@keyframes sx-sink { to { transform: translateY(26px) scale(.9); opacity: .8; } }
@keyframes sx-sob { 0%, 100% { transform: translateY(0); } 20% { transform: translateY(5px); } 40% { transform: translateY(0); } 60% { transform: translateY(5px); } }
@keyframes sx-sway { 0%, 100% { transform: rotate(-9deg); } 50% { transform: rotate(9deg); } }
@keyframes sx-flicker { 0%, 100% { transform: scale(1) rotate(-2deg); filter: drop-shadow(0 0 20px #ff9f1c); } 50% { transform: scale(1.08) rotate(3deg); filter: drop-shadow(0 0 40px #ffd166); } }
@keyframes sx-spin { to { transform: rotateY(360deg); } }
@keyframes sx-twinkle { 0%, 100% { transform: scale(.9) rotate(0); opacity: .75; } 50% { transform: scale(1.15) rotate(20deg); opacity: 1; } }

/* ====================== 1. BIRTHDAY — balloon sky ====================== */
.bs-banner { position: relative; width: 100%; height: 150px; filter: drop-shadow(0 10px 8px rgba(0, 0, 0, .3)); }
.bs-rope { position: absolute; left: -3%; right: -3%; top: -70px; height: 110px; border-bottom: 3px solid rgba(255, 255, 255, .8); border-radius: 50%; }
.bs-flags { display: flex; justify-content: center; flex-wrap: wrap; gap: 3px; padding-top: 28px; perspective: 600px; }
.bs-gap { width: 16px; } .bs-word { display: inline-flex; gap: 3px; white-space: nowrap; }
.bs-flag { width: 38px; height: 56px; display: grid; place-items: start center; padding-top: 7px; font: 800 24px var(--serif); color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .7); background: linear-gradient(155deg, rgba(255, 255, 255, .5), transparent 45%, rgba(0, 0, 0, .18)), var(--c); clip-path: polygon(0 0, 100% 0, 50% 100%); transform-origin: 50% 0; animation: bs-swing 2.6s ease-in-out infinite; animation-delay: calc(var(--i) * -.22s); }
@keyframes bs-swing { 0%, 100% { transform: rotateZ(-6deg) rotateX(14deg); } 50% { transform: rotateZ(6deg) rotateX(-14deg); } }
.bs-cake { font-size: 78px; filter: drop-shadow(0 18px 16px rgba(0, 0, 0, .35)); animation: bs-bounce 1.6s ease-in-out infinite; }
@keyframes bs-bounce { 0%, 100% { transform: translateY(0) scale(1, 1); } 45% { transform: translateY(-16px) scale(.96, 1.05); } 70% { transform: translateY(0) scale(1.06, .94); } }
.bs-sky { position: relative; width: 100%; height: min(44vh, 360px); }
.bs-balloon { position: absolute; left: var(--x); bottom: var(--y); width: 70px; height: 150px; margin-left: -35px; border: 0; background: none; padding: 0; cursor: pointer; animation: bs-bob var(--s) ease-in-out var(--d) infinite alternate; transform-origin: 50% 100%; -webkit-tap-highlight-color: transparent; }
.bs-body { position: absolute; left: 0; top: 0; width: 70px; height: 88px; border-radius: 50% 50% 47% 47% / 58% 58% 42% 42%; background: radial-gradient(circle at 50% 62%, var(--c), color-mix(in srgb, var(--c) 52%, #000) 112%); box-shadow: inset -9px -12px 20px rgba(0, 0, 0, .3), inset 7px 7px 16px rgba(255, 255, 255, .35), 0 16px 26px -12px rgba(0, 0, 0, .55); }
.bs-body::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(ellipse at 50% 120%, rgba(255, 255, 255, .22), transparent 55%); }
.bs-shine { position: absolute; left: 17%; top: 11%; width: 17%; height: 27%; border-radius: 50%; background: rgba(255, 255, 255, .85); filter: blur(1.4px); transform: rotate(24deg); z-index: 2; }
.bs-knot { position: absolute; left: 31px; top: 86px; width: 10px; height: 9px; background: var(--c); filter: brightness(.7); clip-path: polygon(50% 0, 0 100%, 100% 100%); }
.bs-string { position: absolute; left: 35px; top: 94px; width: 1.5px; height: 56px; background: linear-gradient(rgba(255, 255, 255, .85), rgba(255, 255, 255, .15)); transform-origin: 50% 0; animation: bs-string 2.2s ease-in-out infinite alternate; }
@keyframes bs-bob { from { transform: translateY(0) rotate(-3deg); } to { transform: translateY(-22px) rotate(3deg); } }
@keyframes bs-string { from { transform: rotate(6deg); } to { transform: rotate(-6deg); } }
.bs-balloon.popped { pointer-events: none; animation: bs-pop .28s ease-out forwards; }
@keyframes bs-pop { 60% { transform: scale(1.35); opacity: 1; } 100% { transform: scale(1.7); opacity: 0; } }
.bs-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; width: 100%; min-height: 56px; perspective: 700px; }
.bs-tag { position: relative; padding: 10px 14px 10px 28px; max-width: 47%; background: linear-gradient(135deg, #fff, #ffe3ee); color: #4a1030; border-radius: 6px 16px 16px 6px; font-size: .93rem; line-height: 1.4; box-shadow: 0 12px 20px -8px rgba(0, 0, 0, .5), inset 0 -2px 0 rgba(0, 0, 0, .06); transform: rotate(var(--r)); animation: bs-tagin .7s cubic-bezier(.2, 1.4, .3, 1) both; }
.bs-hole { position: absolute; left: 9px; top: 50%; width: 11px; height: 11px; margin-top: -5px; border-radius: 50%; background: rgba(0, 0, 0, .3); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .6); }
@keyframes bs-tagin { from { opacity: 0; transform: translateY(-40px) rotateX(70deg) scale(.6); } }
.gb { position: relative; width: 190px; height: 190px; margin: 10px auto 0; border: 0; background: none; cursor: pointer; perspective: 900px; }
.gb-cube { position: relative; width: 120px; height: 100px; margin: 62px auto 0; transform-style: preserve-3d; transform: rotateX(-20deg) rotateY(-30deg); animation: gb-idle 4.5s ease-in-out infinite; }
@keyframes gb-idle { 0%, 100% { transform: rotateX(-20deg) rotateY(-36deg); } 50% { transform: rotateX(-20deg) rotateY(-22deg) translateY(-6px); } }
.gb-f { position: absolute; left: 0; top: 0; width: 120px; height: 100px; background: linear-gradient(90deg, transparent 41%, #ffd166 41% 59%, transparent 59%), linear-gradient(135deg, #ff5d8f, #b0124f); box-shadow: inset 0 0 26px rgba(0, 0, 0, .3); }
.gb-f.f { transform: translateZ(60px); } .gb-f.b { transform: rotateY(180deg) translateZ(60px); filter: brightness(.7); } .gb-f.l { transform: rotateY(-90deg) translateZ(60px); filter: brightness(.82); } .gb-f.r { transform: rotateY(90deg) translateZ(60px); filter: brightness(.9); }
.gb-lid { position: absolute; left: -7px; top: -24px; width: 134px; height: 26px; transform-style: preserve-3d; transform-origin: 0 100%; transform: translateZ(0); transition: transform 1.1s cubic-bezier(.3, 1.5, .4, 1); }
.gb-lid::before { content: ''; position: absolute; inset: 0; transform: translateZ(67px); background: linear-gradient(90deg, transparent 43%, #ffd166 43% 57%, transparent 57%), linear-gradient(135deg, #ff7aa8, #d11a5f); box-shadow: inset 0 -5px 8px rgba(0, 0, 0, .2); }
.gb-lid::after { content: ''; position: absolute; left: 0; top: 0; width: 134px; height: 134px; transform-origin: 0 0; transform: translateZ(-67px) rotateX(-90deg) translateY(-0px); background: linear-gradient(90deg, transparent 43%, #ffd166 43% 57%, transparent 57%), linear-gradient(135deg, #ff9ec0, #e0346f); }
.gb-bow { position: absolute; top: -26px; width: 36px; height: 28px; border: 7px solid #ffd166; border-radius: 60% 60% 60% 0; transform: translateZ(67px); box-shadow: 0 3px 5px rgba(0, 0, 0, .3); }
.gb-bow.l { left: 26px; transform: translateZ(67px) rotate(-18deg); } .gb-bow.r { right: 26px; border-radius: 60% 60% 0 60%; transform: translateZ(67px) rotate(18deg); }
.gb-glow { position: absolute; left: 8%; top: -30px; width: 84%; height: 90px; background: radial-gradient(ellipse, #fff 0, rgba(255, 209, 102, .6) 38%, transparent 70%); opacity: 0; transition: opacity .7s .2s; transform: translateZ(10px); }
.gb.open .gb-lid { transform: translate3d(-18px, -30px, 0) rotateZ(-20deg); } .gb.open .gb-glow { opacity: 1; } .gb.open .gb-cube { animation: none; }
.bs-note { position: relative; margin-top: 18px; width: min(94%, 430px); padding: 22px 18px 16px; background: #fffdf6; color: #4a3a2a; border-radius: 5px; text-align: left; box-shadow: 0 26px 50px -14px rgba(0, 0, 0, .6); opacity: 0; transform: translateY(60px) rotateX(35deg) scale(.88); transform-origin: 50% 100%; transition: opacity .9s, transform 1s cubic-bezier(.2, .9, .3, 1.2); background-image: repeating-linear-gradient(transparent 0 29px, rgba(194, 24, 91, .13) 29px 30px); }
.bs-note.rise { opacity: 1; transform: rotate(-1deg); }
.bs-note-text { font-size: 15px; line-height: 30px; white-space: pre-wrap; min-height: 90px; }
.bs-pin { position: absolute; left: 50%; top: -9px; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ff9ec0, #c2185b); box-shadow: 0 5px 6px rgba(0, 0, 0, .4); }
.bs-note .typing::after { background: #4a3a2a; }
.bs-line { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 22px 12px; width: 100%; padding-top: 30px; perspective: 800px; }
.bs-twine { position: absolute; left: -2%; right: -2%; top: 0; height: 28px; border-bottom: 2px solid rgba(255, 255, 255, .7); border-radius: 0 0 50% 50%; }
.bs-polaroid { position: relative; margin: 0; width: 30%; max-width: 132px; padding: 7px 7px 26px; background: #fff; box-shadow: 0 16px 26px -10px rgba(0, 0, 0, .6); transform-origin: 50% -8px; transform: rotate(var(--r)); animation: bs-sway 3.6s ease-in-out infinite; animation-delay: calc(var(--i) * -.55s); }
.bs-polaroid img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.bs-peg { position: absolute; left: 50%; top: -12px; width: 10px; height: 24px; margin-left: -5px; background: linear-gradient(90deg, #deaa68, #9a6428); border-radius: 2px; box-shadow: 0 2px 3px rgba(0, 0, 0, .4); z-index: 2; }
@keyframes bs-sway { 0%, 100% { transform: rotate(calc(var(--r) - 3deg)) rotateY(-8deg); } 50% { transform: rotate(calc(var(--r) + 3deg)) rotateY(8deg); } }
.bs-fin { display: flex; flex-direction: column; align-items: center; }
.bs-bigcake { font-size: 92px; filter: drop-shadow(0 20px 18px rgba(0, 0, 0, .4)); animation: bs-bounce 1.6s ease-in-out infinite; }

/* ====================== 2. FRIENDSHIP — chat, sticky notes, cork board ====================== */
.fr-head { font: 800 clamp(20px, 5.5vw, 28px) var(--serif); margin: 0; }
.fr-phone { width: min(100%, 360px); border-radius: 30px; padding: 12px; background: linear-gradient(145deg, #1d2a44, #0b1220); box-shadow: 0 30px 60px -18px rgba(0, 0, 0, .7), inset 0 0 0 2px rgba(255, 255, 255, .12); transform: rotateX(6deg) rotateY(-8deg); transform-style: preserve-3d; }
.fr-top { display: flex; align-items: center; gap: 10px; padding: 8px 10px; text-align: left; }
.fr-top small { display: block; color: #6ee7b7; font-size: .72rem; }
.fr-av { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-style: normal; background: linear-gradient(135deg, #4cc9f0, #3a86ff); }
.fr-feed { height: min(40vh, 320px); overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 10px 6px; background: rgba(255, 255, 255, .05); border-radius: 18px; scrollbar-width: none; }
.fr-b { align-self: flex-start; max-width: 82%; padding: 9px 13px; border-radius: 18px 18px 18px 4px; text-align: left; background: linear-gradient(145deg, #2f4a72, #243957); box-shadow: 0 6px 12px -4px rgba(0, 0, 0, .5); font-size: .95rem; line-height: 1.45; }
.fr-b.pop { animation: fr-pop .45s cubic-bezier(.2, 1.5, .4, 1); transform-origin: 0 100%; }
@keyframes fr-pop { from { transform: scale(.4); opacity: 0; } }
.fr-b.typing { display: flex; gap: 4px; padding: 13px 14px; } .fr-b.typing i { width: 7px; height: 7px; border-radius: 50%; background: #9fb6d8; animation: fr-dot 1s infinite; } .fr-b.typing i:nth-child(2) { animation-delay: .15s; } .fr-b.typing i:nth-child(3) { animation-delay: .3s; }
@keyframes fr-dot { 40% { transform: translateY(-5px); opacity: .5; } }
.fr-wall { position: relative; width: 100%; min-height: 150px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; perspective: 800px; }
.fr-note { position: relative; width: 44%; min-height: 86px; padding: 18px 12px 12px; color: #3b2f12; font: 600 .95rem/1.35 var(--font); text-align: left; background: linear-gradient(160deg, rgba(255, 255, 255, .5), transparent 40%), var(--c); box-shadow: 0 14px 16px -8px rgba(0, 0, 0, .5), inset -10px -10px 20px rgba(0, 0, 0, .06); transform: rotate(var(--r)); animation: fr-stick .55s cubic-bezier(.2, 1.4, .3, 1) both; }
.fr-tape { position: absolute; left: 50%; top: -9px; width: 54px; height: 18px; margin-left: -27px; background: rgba(255, 255, 255, .55); transform: rotate(-3deg); box-shadow: 0 1px 3px rgba(0, 0, 0, .2); }
@keyframes fr-stick { from { opacity: 0; transform: translateY(90px) rotateX(70deg) scale(1.3); } }
.fr-pad { position: relative; width: 150px; height: 120px; margin-top: 8px; border: 0; background: none; perspective: 600px; cursor: pointer; }
.fr-sheet { position: absolute; left: 0; top: 0; width: 150px; height: 118px; background: linear-gradient(160deg, #fff7a8, #ffe44d); box-shadow: 0 3px 4px rgba(0, 0, 0, .25); z-index: var(--z); transform: translateY(calc(var(--o) * -2px)) rotateX(24deg); transform-origin: 50% 100%; transition: transform .5s, opacity .5s; }
.fr-sheet.peel { transform: translateY(-120px) rotateX(-60deg) rotateZ(10deg); opacity: 0; }
.fr-cork { position: relative; width: 100%; height: min(52vh, 400px); border-radius: 14px; background: radial-gradient(circle at 20% 30%, rgba(255, 255, 255, .12) 0 2px, transparent 3px) 0 0 / 22px 22px, radial-gradient(circle at 70% 60%, rgba(0, 0, 0, .14) 0 2px, transparent 3px) 0 0 / 17px 17px, linear-gradient(145deg, #c98f52, #a8713a); border: 10px solid #6b4423; box-shadow: inset 0 0 40px rgba(0, 0, 0, .45), 0 24px 40px -14px rgba(0, 0, 0, .6); touch-action: none; }
.fr-photo { position: absolute; left: var(--x); top: var(--y); width: 28%; margin: 0; padding: 6px 6px 18px; background: #fff; transform: rotate(var(--r)) rotateZ(var(--tilt, 0deg)); box-shadow: 0 10px 16px -6px rgba(0, 0, 0, .6); cursor: grab; touch-action: none; animation: fr-drop .7s cubic-bezier(.2, 1.3, .4, 1) both; animation-delay: var(--d); transition: box-shadow .2s, scale .2s; }
.fr-photo.lift { cursor: grabbing; scale: 1.08; box-shadow: 0 26px 30px -8px rgba(0, 0, 0, .6); }
.fr-photo img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; pointer-events: none; }
.fr-pin { position: absolute; left: 50%; top: -8px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ff8a8a, #c0152f); box-shadow: 0 4px 5px rgba(0, 0, 0, .45); }
@keyframes fr-drop { from { opacity: 0; transform: translateY(-120px) rotate(20deg) scale(1.4); } }
.fr-arena { position: relative; width: 100%; height: 190px; border: 0; background: none; cursor: pointer; }
.fr-hand { position: absolute; top: 40px; font-size: 92px; line-height: 1; filter: drop-shadow(0 16px 12px rgba(0, 0, 0, .4)); transition: transform .26s cubic-bezier(.5, 0, 1, .6); }
.fr-hand.l { left: 12%; animation: fr-idle-l 1.5s ease-in-out infinite; } .fr-hand.r { right: 12%; transform: scaleX(-1); animation: fr-idle-r 1.5s ease-in-out infinite; }
@keyframes fr-idle-l { 50% { transform: translateX(-12px) rotate(-8deg); } } @keyframes fr-idle-r { 0%, 100% { transform: scaleX(-1) translateX(0); } 50% { transform: scaleX(-1) translateX(-12px) rotate(-8deg); } }
.fr-arena.smack .fr-hand.l { animation: none; transform: translateX(26vw) rotate(10deg); } .fr-arena.smack .fr-hand.r { animation: none; transform: scaleX(-1) translateX(26vw) rotate(10deg); }
.fr-ring { position: absolute; left: 50%; top: 80px; width: 20px; height: 20px; margin: -10px; border-radius: 50%; border: 6px solid #fff; opacity: 0; }
.fr-arena.smack .fr-ring { animation: fr-shock .8s .2s ease-out; } @keyframes fr-shock { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(18); } }
.fr-neon { display: flex; flex-direction: column; align-items: center; }
.fr-sign { margin: 0 0 8px; font: 800 clamp(30px, 9vw, 54px) var(--serif); color: #e8fbff; text-shadow: 0 0 6px #fff, 0 0 18px #4cc9f0, 0 0 40px #4cc9f0, 0 0 80px #0ea5e9; animation: fr-flick 4s infinite; }
@keyframes fr-flick { 0%, 18%, 22%, 62%, 100% { opacity: 1; } 20%, 60% { opacity: .55; } }

/* ====================== 3. PARENTS — garden, album, hug ====================== */
.pa-lamp { position: relative; width: 140px; height: 120px; display: grid; place-items: center; }
.pa-lamp b { font-size: 76px; animation: sx-sway 3.4s ease-in-out infinite; transform-origin: 50% 0; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .45)); }
.pa-glow { position: absolute; width: 300px; height: 300px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 214, 140, .55), transparent 65%); animation: pa-glow 3s ease-in-out infinite; }
@keyframes pa-glow { 50% { transform: scale(1.18); opacity: .75; } }
.pa-sign { padding: 16px 22px; border-radius: 10px; background: linear-gradient(180deg, #a8713a, #7a4a22); box-shadow: 0 18px 28px -10px rgba(0, 0, 0, .6), inset 0 2px 0 rgba(255, 255, 255, .25), inset 0 -6px 12px rgba(0, 0, 0, .3); transform: rotateX(8deg); }
.pa-sign h1 { margin: 0; font: 800 clamp(22px, 6.4vw, 34px) var(--serif); color: #fff3d6; text-shadow: 0 2px 0 #4b2c12, 0 4px 10px rgba(0, 0, 0, .5); }
.pa-bed { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 6px 52px; width: 100%; padding: 120px 0 50px; }
.pa-plot { position: relative; width: 31%; height: 150px; border: 0; background: none; cursor: pointer; perspective: 500px; }
.pa-mound { position: absolute; left: 4%; bottom: 0; width: 92%; height: 34px; border-radius: 50%; background: radial-gradient(ellipse at 50% 30%, #8a5a34, #4e2f18 70%); box-shadow: 0 10px 14px -4px rgba(0, 0, 0, .6), inset 0 6px 8px rgba(255, 255, 255, .12); }
.pa-seed { position: absolute; left: 50%; bottom: 22px; width: 10px; height: 14px; margin-left: -5px; border-radius: 50%; background: #e6c98f; box-shadow: 0 2px 3px rgba(0, 0, 0, .5); animation: pa-seed 1.6s ease-in-out infinite; }
@keyframes pa-seed { 50% { transform: translateY(-5px); } }
.pa-stem { position: absolute; left: 50%; bottom: 26px; width: 6px; height: 0; margin-left: -3px; border-radius: 3px; background: linear-gradient(90deg, #1f7a45, #4ade80 60%, #166534); transition: height 1s cubic-bezier(.3, 1.2, .4, 1) .2s; }
.pa-leaf { position: absolute; top: 40%; width: 22px; height: 12px; background: linear-gradient(135deg, #4ade80, #166534); border-radius: 0 100% 0 100%; opacity: 0; transition: opacity .4s 1s, transform .6s 1s; } .pa-leaf.l { right: 5px; transform: scaleX(-1) rotate(-20deg) scale(.2); } .pa-leaf.r { left: 5px; transform: rotate(-20deg) scale(.2); }
.pa-flower { position: absolute; left: 50%; bottom: 120px; width: 0; height: 0; transform-style: preserve-3d; transform: rotateX(55deg) scale(0); transition: transform 1.1s cubic-bezier(.3, 1.6, .4, 1) 1.1s; }
.pa-petal { position: absolute; left: -13px; top: -34px; width: 26px; height: 40px; border-radius: 50% 50% 50% 50% / 70% 70% 30% 30%; background: radial-gradient(ellipse at 50% 85%, #fff9, transparent 50%), linear-gradient(180deg, var(--c), color-mix(in srgb, var(--c) 60%, #5a0b2b)); box-shadow: inset 0 -6px 8px rgba(0, 0, 0, .18); transform-origin: 50% 100%; transform: rotate(var(--a)) translateY(-2px); }
.pa-core { position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff3b0, #f59e0b 70%); box-shadow: 0 2px 5px rgba(0, 0, 0, .4); }
.pa-tag { position: absolute; left: 50%; bottom: -46px; transform: translateX(-50%) translateY(14px) scale(.6); width: 104%; padding: 6px 9px; border-radius: 10px; background: rgba(255, 255, 255, .94); color: #4a1030; font-size: .78rem; line-height: 1.3; opacity: 0; transition: opacity .6s 2.1s, transform .6s 2.1s; box-shadow: 0 8px 14px -6px rgba(0, 0, 0, .5); pointer-events: none; z-index: 3; }
.pa-plot.grow .pa-seed { display: none; } .pa-plot.grow .pa-stem { height: 100px; } .pa-plot.grow .pa-leaf { opacity: 1; } .pa-plot.grow .pa-leaf.l { transform: scaleX(-1) rotate(-20deg) scale(1); } .pa-plot.grow .pa-leaf.r { transform: rotate(-20deg) scale(1); }
.pa-plot.grow .pa-flower { transform: rotateX(18deg) scale(1.15); animation: pa-spin 8s ease-in-out 2.4s infinite alternate; } .pa-plot.grow .pa-tag { opacity: 1; transform: translateX(-50%) translateY(-4px) scale(1); }
@keyframes pa-spin { from { transform: rotateX(18deg) rotateZ(-8deg) scale(1.15); } to { transform: rotateX(28deg) rotateZ(8deg) scale(1.2); } }
.pa-book { position: relative; width: min(82%, 300px); height: min(46vh, 360px); margin: 6px 0; transform-style: preserve-3d; transform: rotateX(14deg); cursor: pointer; }
.pa-book::before { content: ''; position: absolute; inset: -10px -12px -12px -6px; border-radius: 6px 14px 14px 6px; background: linear-gradient(135deg, #7a3b1a, #4a1f0a); box-shadow: 0 28px 40px -12px rgba(0, 0, 0, .7), inset 0 0 0 2px rgba(255, 210, 120, .3); }
.pa-spine { position: absolute; left: -6px; top: -10px; bottom: -12px; width: 12px; background: linear-gradient(90deg, #3a1706, #7a3b1a); border-radius: 6px 0 0 6px; z-index: 40; }
.pa-page { position: absolute; inset: 0; transform-origin: 0 50%; transform-style: preserve-3d; transition: transform 1.2s cubic-bezier(.5, .1, .2, 1); z-index: var(--z); }
.pa-page.turned { transform: rotateY(-170deg); z-index: 0; }
.pa-face { position: absolute; inset: 0; padding: 14px 14px 10px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; background: linear-gradient(90deg, #e9dcc0, #fbf3de 12%, #fffaf0); border-radius: 3px 8px 8px 3px; backface-visibility: hidden; box-shadow: inset 6px 0 12px rgba(0, 0, 0, .12); color: #5b3a1a; }
.pa-pic { position: relative; margin: 0; flex: 1; width: 100%; min-height: 0; } .pa-pic img { width: 100%; height: 100%; object-fit: cover; border: 4px solid #fff; box-shadow: 0 6px 14px -4px rgba(0, 0, 0, .5); display: block; }
.pa-corner { position: absolute; width: 22px; height: 22px; background: #5b3a1a; z-index: 2; } .pa-corner.a { left: -2px; top: -2px; clip-path: polygon(0 0, 100% 0, 0 100%); } .pa-corner.b { right: -2px; bottom: -2px; clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.pa-sheet { position: relative; width: min(96%, 440px); padding: 24px 20px 18px; text-align: left; color: #3d2a1a; background: #fff9ec repeating-linear-gradient(transparent 0 31px, rgba(130, 90, 40, .17) 31px 32px); border-radius: 4px; box-shadow: 0 30px 50px -16px rgba(0, 0, 0, .6), 0 0 0 1px rgba(0, 0, 0, .05); transform: rotateX(8deg) rotate(.6deg); }
.pa-ink { font: 500 17px/32px var(--font); font-style: italic; white-space: pre-wrap; min-height: 160px; } .pa-sheet .typing::after { background: #3d2a1a; }
.pa-stamp { position: absolute; right: 12px; top: 10px; font-style: normal; font-size: 30px; opacity: .3; }
.pa-pen { position: absolute; right: 14%; font-size: 40px; font-style: normal; animation: pa-write 1.2s ease-in-out infinite; } @keyframes pa-write { 50% { transform: translate(-30px, 8px) rotate(-12deg); } }
.pa-heart { position: relative; width: 190px; height: 190px; border: 0; background: none; cursor: pointer; --v: 0; touch-action: none; user-select: none; }
.pa-heart b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 150px; line-height: 1; filter: drop-shadow(0 20px 18px rgba(0, 0, 0, .4)); transform: scale(calc(1 + var(--v) * .18)); transition: transform .15s; }
.pa-fill { position: absolute; left: 10%; right: 10%; bottom: 14%; height: 70%; transform-origin: 50% 100%; transform: scaleY(0); background: linear-gradient(0deg, #ff3b6b, #ff9ec0); border-radius: 40% 40% 50% 50%; mix-blend-mode: multiply; opacity: .85; }
.pa-halo { position: absolute; inset: -30px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 150, 190, calc(var(--v) * .7)), transparent 65%); pointer-events: none; }
.pa-heart.hold b { animation: heartbeat .7s infinite; }
.pa-fin { position: relative; display: flex; flex-direction: column; align-items: center; }
.pa-rays { position: absolute; left: 50%; top: 40px; width: 560px; height: 560px; margin: -280px 0 0 -280px; background: repeating-conic-gradient(from 0deg, rgba(255, 220, 150, .3) 0 6deg, transparent 6deg 18deg); border-radius: 50%; mask-image: radial-gradient(circle, #000 20%, transparent 66%); -webkit-mask-image: radial-gradient(circle, #000 20%, transparent 66%); animation: sx-rot 40s linear infinite; z-index: -1; }
@keyframes sx-rot { to { transform: rotate(360deg); } }

/* ====================== 4. FAREWELL — parallax road, postcard, lanterns ====================== */
.fw-world { position: relative; width: 100%; height: min(46vh, 380px); border-radius: 22px; overflow: hidden; touch-action: none; cursor: ew-resize; box-shadow: 0 26px 46px -16px rgba(0, 0, 0, .7), inset 0 0 0 2px rgba(255, 255, 255, .15); background: #f6b26b; }
.fw-l { position: absolute; left: 0; bottom: 0; height: 100%; width: 300%; }
.fw-l.sky { width: 100%; background: linear-gradient(180deg, #5fb4ff 0%, #bfe3ff 45%, #ffe7b3 100%); }
.fw-dusk { position: absolute; inset: 0; opacity: calc(var(--p) * 1); background: linear-gradient(180deg, #1b1240 0%, #7a2e6e 38%, #ff7a59 72%, #ffc371 100%); }
.fw-sun { position: absolute; left: 62%; top: calc(14% + var(--p) * 44%); width: 78px; height: 78px; margin-left: -39px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fffbe0, #ffd166 55%, #ff9f1c); box-shadow: 0 0 60px 26px rgba(255, 190, 80, .6); }
.fw-world .fw-l.clouds { top: 6%; height: 30%; background: radial-gradient(ellipse 60px 18px at 12% 40%, #fff 60%, transparent 62%) 0 0 / 420px 100% repeat-x, radial-gradient(ellipse 46px 14px at 52% 70%, #fff 60%, transparent 62%) 0 0 / 520px 100% repeat-x; opacity: .75; transform: translateX(calc(var(--p) * -16%)); }
.fw-l.hill3 { height: 52%; background: radial-gradient(ellipse 170px 100% at 50% 100%, #6b7fd0 60%, transparent 61%) 0 100% / 340px 100% repeat-x; opacity: .85; transform: translateX(calc(var(--p) * -14%)); }
.fw-l.hill2 { height: 40%; background: radial-gradient(ellipse 150px 100% at 50% 100%, #4a8c5c 60%, transparent 61%) 0 100% / 300px 100% repeat-x; transform: translateX(calc(var(--p) * -28%)); }
.fw-l.trees { height: 34%; bottom: 24%; background: radial-gradient(circle 22px at 50% 40%, #1f6b3a 98%, transparent 100%) 0 0 / 120px 100% repeat-x, linear-gradient(90deg, transparent 47%, #5a3a1c 47% 53%, transparent 53%) 0 100% / 120px 40% no-repeat repeat-x; transform: translateX(calc(var(--p) * -46%)); }
.fw-l.hill1 { height: 26%; background: radial-gradient(ellipse 200px 100% at 50% 100%, #2d6a3e 62%, transparent 63%) 0 100% / 380px 100% repeat-x; transform: translateX(calc(var(--p) * -60%)); }
.fw-world::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, .35)); opacity: calc(var(--p) * .8); pointer-events: none; }
.fw-road { position: absolute; left: -20%; right: -20%; bottom: -6%; height: 34%; background: linear-gradient(180deg, #5b4a42, #2e2622); transform: perspective(300px) rotateX(48deg); transform-origin: 50% 100%; box-shadow: inset 0 10px 18px rgba(0, 0, 0, .5); }
.fw-road .fw-l.dash { width: 100%; height: 6px; top: 50%; bottom: auto; background: repeating-linear-gradient(90deg, #ffe9a8 0 36px, transparent 36px 72px); transform: translateX(calc(var(--p) * -300px)); }
.fw-walker { position: absolute; left: 24%; bottom: 14%; z-index: 4; font-size: 46px; line-height: 1; } .fw-walker b { display: block; filter: drop-shadow(0 6px 4px rgba(0, 0, 0, .5)); }
.fw-walker.step b { animation: fw-step .34s ease-in-out infinite; } @keyframes fw-step { 50% { transform: translateY(-6px) rotate(4deg); } }
.fw-shadow { position: absolute; left: 4px; bottom: -4px; width: 40px; height: 8px; border-radius: 50%; background: rgba(0, 0, 0, .4); filter: blur(2px); }
.fw-sign-wrap { position: absolute; right: 6%; top: 8%; z-index: 5; width: 38%; pointer-events: none; }
.fw-post { position: relative; margin: 0; padding: 6px; background: #fff; box-shadow: 0 14px 20px -6px rgba(0, 0, 0, .6); transform: rotate(var(--r)); animation: fw-pop .6s cubic-bezier(.2, 1.5, .4, 1) both; } .fw-post img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.fw-stick { position: absolute; left: 50%; top: 100%; width: 6px; height: 40px; margin-left: -3px; background: linear-gradient(90deg, #8a5a30, #5b3a1c); }
@keyframes fw-pop { from { transform: scale(0) rotate(-30deg); opacity: 0; } }
.fw-track { position: relative; width: 86%; height: 14px; border-radius: 99px; background: rgba(255, 255, 255, .2); touch-action: none; margin-top: 10px; box-shadow: inset 0 2px 4px rgba(0, 0, 0, .4); }
.fw-fill { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--p, 0) * 100%); border-radius: 99px; background: linear-gradient(90deg, #ffd166, #ff7a59); }
.fw-knob { position: absolute; top: 50%; left: calc(var(--p, 0) * 100%); width: 34px; height: 34px; margin: -17px 0 0 -17px; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #ffd9a8); font-size: 16px; box-shadow: 0 6px 10px rgba(0, 0, 0, .4); }
.fw-card { position: relative; width: min(94%, 400px); height: 270px; transform-style: preserve-3d; transition: transform 1s cubic-bezier(.4, .2, .2, 1); cursor: pointer; transform: rotateX(8deg) rotateY(-10deg); }
.fw-card.flipped { transform: rotateX(4deg) rotateY(180deg); cursor: default; }
.fw-front, .fw-back { position: absolute; inset: 0; border-radius: 10px; backface-visibility: hidden; box-shadow: 0 30px 50px -16px rgba(0, 0, 0, .65), inset 0 0 0 6px #fff; overflow: hidden; }
.fw-front { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: linear-gradient(180deg, #1b1240, #7a2e6e 45%, #ff9a5a); } .fw-front b { position: relative; z-index: 2; font: 800 clamp(24px, 7vw, 34px) var(--serif); color: #fff; text-shadow: 0 3px 12px rgba(0, 0, 0, .6); padding: 0 18px; } .fw-front small { position: relative; z-index: 2; opacity: .85; }
.fw-sunset { position: absolute; left: 50%; bottom: 20%; width: 110px; height: 110px; margin-left: -55px; border-radius: 50%; background: radial-gradient(circle, #fff3b0, #ffb347 60%, #ff7a59); box-shadow: 0 0 50px 20px rgba(255, 170, 90, .6); }
.fw-back { transform: rotateY(180deg); padding: 24px 22px 14px; text-align: left; background: #fffaf0 linear-gradient(90deg, transparent 49.6%, rgba(0, 0, 0, .08) 50%, transparent 50.4%); color: #3d2a1a; }
.fw-hand { font: 500 16px/28px var(--font); font-style: italic; white-space: pre-wrap; padding-right: 8px; } .fw-back .typing::after { background: #3d2a1a; }
.fw-postmark { position: absolute; right: 10px; top: 8px; width: 54px; height: 54px; display: grid; place-items: center; font-style: normal; font-size: 24px; border: 3px double rgba(180, 60, 40, .6); border-radius: 50%; transform: rotate(12deg); opacity: .6; }
.fw-sky { position: relative; width: 100%; height: min(54vh, 420px); border-radius: 22px; overflow: hidden; background: linear-gradient(180deg, #0a0820, #2b1a52 55%, #7a2e6e 100%); box-shadow: inset 0 0 40px rgba(0, 0, 0, .6); }
.fw-moon { position: absolute; right: 12%; top: 8%; width: 46px; height: 46px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fffbe6, #ffe9a8); box-shadow: 0 0 40px 12px rgba(255, 233, 168, .35); }
.fw-lantern { position: absolute; left: var(--x); bottom: 6%; width: 52px; height: 70px; margin-left: -26px; border: 0; background: linear-gradient(90deg, #d96a2b, #ffb15c 40%, #ffd89a 55%, #c5521a); border-radius: 8px 8px 14px 14px / 12px 12px 18px 18px; cursor: pointer; box-shadow: 0 0 26px 6px rgba(255, 170, 70, .5), inset 0 -10px 14px rgba(120, 30, 0, .45); font-size: 22px; display: grid; place-items: center; transition: transform .3s; animation: fw-idle 2.6s ease-in-out infinite; animation-delay: calc(var(--i) * -.4s); }
.fw-lantern b { filter: drop-shadow(0 0 4px #fff); } .fw-flame { position: absolute; left: 50%; bottom: -10px; width: 12px; height: 18px; margin-left: -6px; border-radius: 50% 50% 50% 50% / 70% 70% 30% 30%; background: radial-gradient(circle at 50% 70%, #fff6c0, #ff9f1c); box-shadow: 0 0 14px 4px #ffb347; animation: sx-flicker 0.7s infinite; }
.fw-lantern.go { pointer-events: none; animation: fw-fly 7s ease-in forwards; } @keyframes fw-idle { 50% { transform: translateY(-6px); } } @keyframes fw-fly { to { transform: translate(calc((var(--i) - 2.5) * 18px), -112%) scale(.4); opacity: .2; } }
.fw-fin { position: relative; display: flex; flex-direction: column; align-items: center; } .fw-horizon { position: absolute; left: -10%; right: -10%; top: 20%; height: 180px; background: radial-gradient(ellipse at 50% 100%, rgba(255, 150, 80, .5), transparent 68%); z-index: -1; }

/* ====================== 5. APOLOGY — rain, fogged glass, broken heart, rainbow ====================== */
.sx.rainy .bg { filter: saturate(.55) brightness(.7); } .sx.sunny .bg { filter: saturate(1.3) brightness(1.15); transition: filter 2s; }
.ap-rain { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; } .ap-rain.stop { opacity: 0; transition: opacity 2s; }
.ap-rain i { position: absolute; left: var(--x); top: -40px; width: 2px; height: 34px; background: linear-gradient(transparent, rgba(190, 215, 255, .8)); animation: ap-fall var(--s) linear var(--d) infinite; } @keyframes ap-fall { to { transform: translateY(115vh); } }
.ap-cloud { position: relative; width: 190px; height: 100px; filter: drop-shadow(0 14px 10px rgba(0, 0, 0, .4)); animation: float-y 3s ease-in-out infinite; } .ap-cloud i { position: absolute; background: radial-gradient(circle at 35% 30%, #cdd5e6, #7f8aa6); border-radius: 50%; } .ap-cloud i:nth-child(1) { left: 14px; top: 28px; width: 80px; height: 66px; } .ap-cloud i:nth-child(2) { left: 56px; top: 0; width: 92px; height: 80px; } .ap-cloud i:nth-child(3) { right: 6px; top: 32px; width: 84px; height: 62px; } .ap-cloud b { position: absolute; left: 50%; bottom: -26px; font-size: 26px; animation: ap-drip 1.2s infinite; } @keyframes ap-drip { from { transform: translateY(-10px); opacity: 1; } to { transform: translateY(26px); opacity: 0; } }
.ap-window { position: relative; width: min(94%, 420px); height: min(48vh, 380px); border-radius: 12px; overflow: hidden; background: linear-gradient(160deg, #39466b, #1b2340); border: 14px solid #e9edf6; box-shadow: 0 0 0 3px #aab3c7, 0 36px 50px -16px rgba(0, 0, 0, .7), inset 0 0 40px rgba(0, 0, 0, .6); }
.ap-bar { position: absolute; background: #e9edf6; z-index: 4; box-shadow: 0 0 6px rgba(0, 0, 0, .4); } .ap-bar.v { left: 50%; top: 0; bottom: 0; width: 8px; margin-left: -4px; } .ap-bar.h { top: 50%; left: 0; right: 0; height: 8px; margin-top: -4px; }
.ap-text { position: absolute; inset: 0; padding: 20px 22px; display: flex; align-items: center; z-index: 1; text-align: left; color: #fff; font: 600 16px/1.9 var(--font); text-shadow: 0 2px 8px rgba(0, 0, 0, .6); } .ap-text p { margin: 0; white-space: pre-wrap; }
.ap-fog { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; touch-action: none; transition: opacity 1.6s; } .ap-fog.gone { opacity: 0; pointer-events: none; }
.ap-drops { position: absolute; inset: 0; z-index: 3; pointer-events: none; } .ap-drops i { position: absolute; left: var(--x); top: -10px; width: 9px; height: 13px; border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%; background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .9), rgba(170, 200, 255, .35)); box-shadow: 0 2px 4px rgba(0, 0, 0, .4); animation: ap-slide var(--s) ease-in var(--d) infinite; } @keyframes ap-slide { to { transform: translateY(420px); } }
.ap-frames { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; width: 100%; } .ap-frame { position: relative; margin: 0; width: 30%; overflow: hidden; border: 5px solid #e9edf6; border-radius: 4px; box-shadow: 0 14px 20px -8px rgba(0, 0, 0, .6); animation: sx-fadeup .8s both; animation-delay: calc(var(--i) * .2s); } .ap-frame img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; filter: saturate(.7) blur(.6px); } .ap-frame i { position: absolute; inset: 0; background: linear-gradient(115deg, rgba(255, 255, 255, .35), transparent 35%, rgba(255, 255, 255, .12) 70%); }
@keyframes sx-fadeup { from { opacity: 0; transform: translateY(24px); } }
.ap-heart { position: relative; width: 240px; height: 210px; touch-action: none; cursor: ew-resize; perspective: 700px; }
.ap-half { position: absolute; top: 20px; width: 110px; height: 170px; overflow: hidden; filter: drop-shadow(0 16px 12px rgba(0, 0, 0, .45)); transition: transform .12s; }
.ap-half i { position: absolute; top: 0; width: 220px; height: 170px; background: radial-gradient(circle at 30% 24%, #ffd1de, #ff3b6b 38%, #a0123f 100%); clip-path: path('M110 160 C10 90 0 30 55 20 C85 15 105 40 110 55 C115 40 135 15 165 20 C220 30 210 90 110 160 Z'); }
.ap-half.l { left: 10px; transform: translateX(calc((1 - var(--m)) * -46px)) rotate(calc((1 - var(--m)) * -14deg)); } .ap-half.l i { left: 0; clip-path: path('M110 160 C10 90 0 30 55 20 C85 15 105 40 110 55 L96 80 L116 104 L100 128 L110 160 Z'); }
.ap-half.r { right: 10px; transform: translateX(calc((1 - var(--m)) * 46px)) rotate(calc((1 - var(--m)) * 14deg)); } .ap-half.r i { left: -110px; clip-path: path('M110 160 L120 128 L104 104 L124 80 L110 55 C115 40 135 15 165 20 C220 30 210 90 110 160 Z'); }
.ap-crack { position: absolute; left: 50%; top: 40px; width: 4px; height: 120px; margin-left: -2px; background: linear-gradient(transparent, #fff, transparent); opacity: calc(1 - var(--m)); filter: blur(2px); }
.ap-heart.mended .ap-half { animation: heartbeat 1s infinite; filter: drop-shadow(0 0 24px #ff3b6b); }
.ap-q { margin: 0 0 6px; font: 800 clamp(26px, 7.4vw, 38px) var(--serif); } .ap-row { display: flex; gap: 14px; justify-content: center; align-items: center; flex-wrap: wrap; } .ap-no { transition: transform .4s cubic-bezier(.2, 1.5, .4, 1), background .4s, color .4s; } .ap-no.melted { background: linear-gradient(135deg, #34d399, #10b981); color: #052e1f; }
.ap-fin { position: relative; display: flex; flex-direction: column; align-items: center; padding-top: 10px; }
.ap-bow { position: relative; width: min(82vw, 330px); height: 170px; margin-bottom: 8px; overflow: hidden; } .ap-bow i { position: absolute; left: 50%; bottom: -170px; border-radius: 50%; transform: translateX(-50%) scale(.2); opacity: 0; animation: ap-arc 1.4s cubic-bezier(.3, 1.3, .4, 1) forwards; box-shadow: 0 8px 14px rgba(0, 0, 0, .2); }
.ap-bow .r1 { width: 330px; height: 330px; background: #ff4d4d; animation-delay: .1s; } .ap-bow .r2 { width: 296px; height: 296px; margin-bottom: -17px; background: #ff9f43; animation-delay: .2s; } .ap-bow .r3 { width: 262px; height: 262px; margin-bottom: -34px; background: #ffe066; animation-delay: .3s; } .ap-bow .r4 { width: 228px; height: 228px; margin-bottom: -51px; background: #5ee08a; animation-delay: .4s; } .ap-bow .r5 { width: 194px; height: 194px; margin-bottom: -68px; background: #4cc9f0; animation-delay: .5s; } .ap-bow .r6 { width: 160px; height: 160px; margin-bottom: -85px; background: #a78bfa; animation-delay: .6s; }
@keyframes ap-arc { to { transform: translateX(-50%) scale(1); opacity: .95; } }
.ap-bow::after { content: ''; position: absolute; left: 50%; bottom: -170px; width: 126px; height: 126px; margin-left: -63px; border-radius: 50%; background: var(--bg2, #cdbcf7); box-shadow: inset 0 6px 14px rgba(0, 0, 0, .15); }
.ap-sun { position: absolute; right: 6%; top: -4px; width: 70px; height: 70px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fffbe0, #ffd166 60%, #ff9f1c); box-shadow: 0 0 60px 24px rgba(255, 200, 80, .55); animation: bs-bounce 3s ease-in-out infinite; z-index: -1; }

/* ====================== 6. EID — chaand raat ====================== */
.ei-sky { position: relative; width: 100%; height: min(42vh, 340px); border-radius: 24px; overflow: hidden; background: linear-gradient(180deg, #020d14, #06402e 70%, #0b6a4a); box-shadow: 0 30px 50px -16px rgba(0, 0, 0, .7), inset 0 0 0 2px rgba(255, 220, 140, .25); }
.ei-moon { position: absolute; left: 50%; top: 14%; width: 120px; height: 120px; margin-left: -60px; opacity: .15; filter: blur(2px); transition: all 1.6s; }
.ei-moon.seen { opacity: 1; filter: none; transform: scale(1.12) rotate(-12deg); }
.ei-crescent { position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 24px -10px 0 0 #ffe9a8, 0 0 40px 6px rgba(255, 209, 102, .35); filter: drop-shadow(0 0 12px rgba(255, 220, 140, .8)); }
.ei-star { position: absolute; right: -6px; top: 8px; font-style: normal; font-size: 26px; color: #fff3b0; text-shadow: 0 0 14px #ffd166, 0 0 30px #ffd166; animation: sx-twinkle 1.8s infinite; }
.ei-mosque { position: absolute; left: 0; right: 0; bottom: 0; height: 90px; background: radial-gradient(circle 26px at 30% 100%, #02150e 98%, transparent 100%), radial-gradient(circle 34px at 62% 100%, #02150e 98%, transparent 100%), linear-gradient(90deg, transparent 18%, #02150e 18% 21%, transparent 21%) 0 100% / 100% 80px no-repeat, linear-gradient(90deg, transparent 78%, #02150e 78% 81%, transparent 81%) 0 100% / 100% 100px no-repeat, linear-gradient(0deg, #02150e 0 24px, transparent 24px); }
.ei-cloud { position: absolute; left: var(--x); top: var(--y); width: 130px; height: 56px; border: 0; background: none; z-index: 3; cursor: pointer; transition: transform 2s cubic-bezier(.3, .6, .3, 1), opacity 2s; animation: ei-drift 6s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -2s); filter: drop-shadow(0 12px 8px rgba(0, 0, 0, .45)); }
.ei-cloud i { position: absolute; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #b4c0d4 75%); } .ei-cloud i:nth-child(1) { left: 6px; top: 16px; width: 52px; height: 38px; } .ei-cloud i:nth-child(2) { left: 34px; top: 0; width: 62px; height: 52px; } .ei-cloud i:nth-child(3) { right: 6px; top: 18px; width: 54px; height: 36px; }
@keyframes ei-drift { to { translate: 26px 0; } } .ei-cloud.away { pointer-events: none; transform: translateX(160%) scale(1.2); opacity: 0; }
.ei-env-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px 12px; width: 100%; perspective: 800px; }
.ei-env { position: relative; width: 31%; max-width: 120px; aspect-ratio: 1.45; border: 0; background: none; cursor: pointer; transform: rotate(var(--r)); animation: float-y 3.4s ease-in-out infinite; animation-delay: calc(var(--i) * -.5s); transform-style: preserve-3d; }
.ei-back { position: absolute; inset: 0; border-radius: 6px; background: linear-gradient(135deg, #0a6b46, #04382a); box-shadow: 0 16px 20px -8px rgba(0, 0, 0, .65); }
.ei-front { position: absolute; inset: 0; border-radius: 6px; display: grid; place-items: center; background: linear-gradient(135deg, #11a06b, #07573b); clip-path: polygon(0 0, 50% 55%, 100% 0, 100% 100%, 0 100%); box-shadow: inset 0 0 0 2px rgba(255, 215, 120, .6); } .ei-front b { margin-top: 18px; font-size: 22px; filter: drop-shadow(0 0 6px #ffd166); }
.ei-flap { position: absolute; left: 0; right: 0; top: 0; height: 58%; background: linear-gradient(160deg, #19b57c, #0a6b46); clip-path: polygon(0 0, 100% 0, 50% 100%); transform-origin: 50% 0; transition: transform .7s cubic-bezier(.3, 1.3, .4, 1); z-index: 3; filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .35)); }
.ei-coin { position: absolute; left: 50%; top: 20%; width: 46px; height: 46px; margin-left: -23px; display: grid; place-items: center; border-radius: 50%; font-style: normal; font-weight: 800; font-size: 22px; color: #7a4a00; background: radial-gradient(circle at 35% 30%, #fff3b0, #ffc83d 55%, #b57d00); box-shadow: inset 0 0 0 4px rgba(255, 255, 255, .25), 0 6px 10px rgba(0, 0, 0, .4); transition: transform 1s cubic-bezier(.3, 1.5, .4, 1) .35s; z-index: 1; }
.ei-env.open .ei-flap { transform: rotateX(180deg); z-index: 0; } .ei-env.open .ei-coin { transform: translateY(-70px) rotateY(720deg) scale(1.2); z-index: 4; }
.ei-note { min-height: 56px; padding: 12px 18px; border-radius: 16px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 215, 120, .4); backdrop-filter: blur(8px); font-size: 1.05rem; opacity: 0; } .ei-note.in { animation: sx-fadeup .6s both; opacity: 1; }
.ei-frame { position: relative; display: flex; align-items: flex-start; justify-content: center; gap: 4px; width: 100%; }
.ei-fanus { position: relative; width: 54px; padding-top: 0; transform-origin: 50% 0; animation: sx-sway 3.6s ease-in-out infinite; } .ei-fanus.r { animation-delay: -1.5s; }
.ei-cord { display: block; width: 2px; height: 52px; margin: 0 auto; background: #ffd166; } .ei-fanus b { display: block; height: 96px; border-radius: 40% 40% 30% 30% / 30% 30% 50% 50%; background: linear-gradient(90deg, #b36a00, #ffc24d 40%, #ffe9a8 55%, #b36a00); clip-path: polygon(30% 0, 70% 0, 100% 40%, 85% 100%, 15% 100%, 0 40%); box-shadow: inset 0 0 16px rgba(120, 50, 0, .6); }
.ei-light { position: absolute; left: 50%; bottom: -22px; width: 80px; height: 80px; margin-left: -40px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 200, 90, .55), transparent 65%); animation: pa-glow 2s infinite; }
.ei-arch { position: relative; flex: 1; max-width: 340px; border-radius: 170px 170px 14px 14px; padding: 12px; background: linear-gradient(160deg, #ffe08a, #b8791a 60%, #ffd166); box-shadow: 0 30px 50px -16px rgba(0, 0, 0, .7), inset 0 0 0 2px #fff3b0; }
.ei-pane { min-height: 280px; padding: 64px 18px 20px; border-radius: 160px 160px 8px 8px; background: radial-gradient(ellipse at 50% 0, #fff9e0, #f4ecd0 70%); color: #0f3d2c; text-align: center; box-shadow: inset 0 8px 20px rgba(0, 0, 0, .18); } .ei-text { font: 600 16px/1.9 var(--font); white-space: pre-wrap; } .ei-pane .typing::after { background: #0f3d2c; }
.ei-fin { position: relative; display: flex; flex-direction: column; align-items: center; }
.ei-garland { display: flex; justify-content: space-between; width: 100%; height: 70px; margin-bottom: 4px; } .ei-garland i { position: relative; width: 20px; height: 34px; margin-top: calc(var(--i) % 2 * 14px); border-radius: 40% 40% 30% 30%; background: linear-gradient(90deg, #b36a00, #ffd166 50%, #b36a00); box-shadow: 0 0 22px 6px rgba(255, 200, 90, .55); transform-origin: 50% -20px; animation: sx-sway 3s ease-in-out infinite; animation-delay: calc(var(--i) * -.4s); } .ei-garland i::before { content: ''; position: absolute; left: 9px; top: -30px; width: 2px; height: 30px; background: #ffd166; }
.ei-bigmoon { position: relative; width: 150px; height: 150px; margin: 6px 0 14px; animation: float-y 4s ease-in-out infinite; } 

/* ====================== 7. BOISHAKH — dawn, alpona, diya, halkhata, kites ====================== */
.bo-dawn { position: relative; width: 100%; height: min(46vh, 360px); border-radius: 22px; overflow: hidden; touch-action: none; cursor: ns-resize; background: linear-gradient(180deg, #7ec8ff 0%, #ffe3a3 60%, #ffb36b 100%); box-shadow: 0 26px 46px -16px rgba(0, 0, 0, .7), inset 0 0 0 2px rgba(255, 255, 255, .25); }
.bo-night { position: absolute; inset: 0; background: linear-gradient(180deg, #0b0a2a, #3b1d5e 55%, #8a2f55); opacity: calc(1 - var(--p) * 1.15); }
.bo-sun { position: absolute; left: 50%; bottom: calc(-20% + var(--p) * 62%); width: 110px; height: 110px; margin-left: -55px; } .bo-disc { position: absolute; inset: 14px; border-radius: 50%; background: radial-gradient(circle at 38% 34%, #fffbe0, #ffd166 50%, #ff7a1a); box-shadow: 0 0 60px 26px rgba(255, 150, 40, .6); }
.bo-rays { position: absolute; left: 50%; top: 50%; width: 300px; height: 300px; margin: -150px; border-radius: 50%; background: repeating-conic-gradient(rgba(255, 220, 120, .4) 0 5deg, transparent 5deg 15deg); mask-image: radial-gradient(circle, #000 25%, transparent 66%); -webkit-mask-image: radial-gradient(circle, #000 25%, transparent 66%); animation: sx-rot 30s linear infinite; opacity: calc(var(--p)); }
.bo-hills { position: absolute; left: 0; right: 0; bottom: 20%; height: 40%; background: radial-gradient(ellipse 140px 100% at 50% 100%, #2f6b3c 60%, transparent 61%) 0 100% / 260px 100% repeat-x, radial-gradient(ellipse 100px 70% at 50% 100%, #1d4e2c 60%, transparent 61%) 90px 100% / 200px 100% repeat-x; }
.bo-river { position: absolute; left: 0; right: 0; bottom: 0; height: 22%; background: linear-gradient(180deg, #3d8fb8, #1f5f86); } .bo-river::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .25) 0 20px, transparent 20px 60px); animation: bo-wave 3s linear infinite; mask-image: linear-gradient(180deg, transparent, #000); -webkit-mask-image: linear-gradient(180deg, transparent, #000); } @keyframes bo-wave { to { background-position-x: 60px; } }
.bo-boat { position: absolute; left: 18%; bottom: 10%; font-style: normal; font-size: 34px; animation: ei-drift 5s ease-in-out infinite alternate, bs-bob 2.4s ease-in-out infinite alternate; filter: drop-shadow(0 8px 4px rgba(0, 0, 0, .4)); }
.bo-floor { width: min(92%, 380px); aspect-ratio: 1; transform: perspective(700px) rotateX(38deg); border-radius: 18px; padding: 10px; background: radial-gradient(circle at 30% 25%, #b5462a, #7a2615 80%); box-shadow: 0 40px 40px -10px rgba(0, 0, 0, .65), inset 0 0 0 4px #5a1b0e, inset 0 0 40px rgba(0, 0, 0, .5); margin: 22px 0 0; }
.bo-alpona { display: block; width: 100%; height: 100%; touch-action: none; border-radius: 10px; }
.bo-banner { min-height: 54px; padding: 12px 22px; border-radius: 14px 14px 30px 30px / 14px 14px 18px 18px; background: linear-gradient(180deg, #dc2626, #8f1010); color: #fff3d0; font: 700 1.1rem var(--font); box-shadow: 0 14px 20px -8px rgba(0, 0, 0, .55), inset 0 2px 0 rgba(255, 255, 255, .3); } .bo-banner.flash { animation: sx-fadeup .5s both; }
.bo-diyas { display: flex; justify-content: center; flex-wrap: wrap; gap: 20px 14px; width: 100%; padding-top: 34px; }
.bo-diya { position: relative; width: 20%; min-width: 60px; max-width: 90px; aspect-ratio: 1.2; border: 0; background: none; cursor: pointer; }
.bo-bowl { position: absolute; left: 0; right: 0; bottom: 0; height: 52%; border-radius: 6px 6px 50% 50% / 6px 6px 100% 100%; background: radial-gradient(ellipse at 40% 20%, #e58a52, #9c4a22 60%, #5e2a0f); box-shadow: 0 12px 14px -6px rgba(0, 0, 0, .6), inset 0 -6px 10px rgba(0, 0, 0, .35); } .bo-bowl::before { content: ''; position: absolute; left: 6%; right: 6%; top: 0; height: 22%; border-radius: 50%; background: radial-gradient(ellipse, #3a1706, #7a3a18); }
.bo-wick { position: absolute; left: 50%; bottom: 50%; width: 4px; height: 12px; margin-left: -2px; background: #2a1a10; border-radius: 2px; }
.bo-flame { position: absolute; left: 50%; bottom: 56%; width: 20px; height: 34px; margin-left: -10px; border-radius: 50% 50% 50% 50% / 75% 75% 25% 25%; background: radial-gradient(ellipse at 50% 75%, #fff8c9 10%, #ffb703 50%, #ff6b00 90%); box-shadow: 0 0 24px 10px rgba(255, 160, 30, .8); transform: scale(0); transform-origin: 50% 100%; transition: transform .5s cubic-bezier(.3, 1.6, .4, 1); }
.bo-diya.lit .bo-flame { transform: scale(1); animation: sx-flicker .8s ease-in-out infinite; } .bo-pool { position: absolute; left: -30%; right: -30%; bottom: -26%; height: 60%; background: radial-gradient(ellipse, rgba(255, 170, 60, .7), transparent 65%); opacity: 0; transition: opacity .8s; } .bo-diya.lit .bo-pool { opacity: 1; }
.bo-book { position: relative; width: min(88%, 340px); height: 330px; perspective: 1200px; cursor: pointer; transform-style: preserve-3d; }
.bo-pages { position: absolute; inset: 0; padding: 20px 18px; text-align: left; border-radius: 4px 10px 10px 4px; background: #f8efd6 repeating-linear-gradient(transparent 0 29px, rgba(180, 40, 30, .22) 29px 30px); box-shadow: 0 30px 46px -14px rgba(0, 0, 0, .7), inset 8px 0 14px rgba(0, 0, 0, .12); color: #3a1a10; } .bo-pages h3 { margin: 0 0 6px; font: 800 20px var(--serif); color: #b91c1c; text-align: center; }
.bo-ink { font: 600 15px/30px var(--font); white-space: pre-wrap; } .bo-pages .typing::after { background: #3a1a10; }
.bo-cover { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; border-radius: 4px 10px 10px 4px; background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .04) 0 3px, transparent 3px 6px), linear-gradient(135deg, #e03a3a, #8f1010); box-shadow: inset 0 0 0 5px rgba(255, 215, 120, .55), inset 0 0 40px rgba(0, 0, 0, .4); transform-origin: 0 50%; transition: transform 1.2s cubic-bezier(.5, .1, .2, 1); } .bo-cover b { font: 800 34px var(--serif); color: #ffe9a8; text-shadow: 0 3px 8px rgba(0, 0, 0, .5); } .bo-cover small { color: #ffe9a8; opacity: .9; } .bo-cover i { font-style: normal; font-size: 34px; }
.bo-book.open .bo-cover { transform: rotateY(-165deg); }
.bo-fin { position: relative; display: flex; flex-direction: column; align-items: center; }
.bo-kites { position: relative; width: 100%; height: 190px; }
.bo-kite { position: absolute; left: var(--x); top: 0; width: 44px; height: 60px; animation: bo-fly 5s ease-in-out infinite alternate; animation-delay: var(--d); transform-origin: 50% 100%; }
.bo-diamond { position: absolute; left: 0; top: 0; width: 44px; height: 60px; background: linear-gradient(90deg, rgba(255, 255, 255, .25) 50%, transparent 50%), linear-gradient(180deg, var(--c) 50%, var(--c2) 50%); clip-path: polygon(50% 0, 100% 40%, 50% 100%, 0 40%); filter: drop-shadow(0 6px 4px rgba(0, 0, 0, .4)); } .bo-tail { position: absolute; left: 20px; top: 60px; width: 4px; height: 50px; background: repeating-linear-gradient(180deg, var(--c) 0 8px, transparent 8px 14px); animation: bo-tail 1.4s ease-in-out infinite alternate; transform-origin: 50% 0; } .bo-thread { position: absolute; left: 21px; top: 60px; width: 1px; height: 160px; background: rgba(255, 255, 255, .5); transform-origin: 50% 0; transform: rotate(-8deg); }
@keyframes bo-fly { from { transform: translate(-14px, 6px) rotate(-10deg); } to { transform: translate(18px, -14px) rotate(12deg); } } @keyframes bo-tail { to { transform: rotate(16deg); } }
.bo-ring { width: 170px; height: 170px; margin: -40px 0 -150px; border-radius: 50%; background: repeating-conic-gradient(rgba(255, 255, 255, .5) 0 10deg, transparent 10deg 30deg); mask-image: radial-gradient(circle, transparent 40%, #000 41%, #000 68%, transparent 70%); -webkit-mask-image: radial-gradient(circle, transparent 40%, #000 41%, #000 68%, transparent 70%); animation: sx-rot 18s linear infinite; opacity: .5; z-index: -1; }

/* ====================== 8. NEW YEAR — lock screen, countdown, odometer ====================== */
.ny-neon { margin: 0; font: 800 clamp(22px, 6.4vw, 34px) var(--serif); color: #fff; text-shadow: 0 0 6px #fff, 0 0 20px #ff5d8f, 0 0 44px #ff5d8f; animation: fr-flick 5s infinite; }
.ny-phone { position: relative; width: min(84%, 300px); height: min(54vh, 430px); padding: 40px 12px 14px; border-radius: 38px; background: linear-gradient(160deg, #1a1030, #0a0618 55%, #2a1048); box-shadow: 0 0 0 3px #3c2a60, 0 0 0 7px #120a22, 0 36px 60px -14px rgba(0, 0, 0, .8), inset 0 0 40px rgba(255, 93, 143, .18); transform: rotateX(8deg) rotateY(-10deg); transform-style: preserve-3d; overflow: hidden; }
.ny-notch { position: absolute; left: 50%; top: 10px; width: 80px; height: 22px; margin-left: -40px; border-radius: 99px; background: #000; } .ny-phone small { display: block; opacity: .7; font-size: .78rem; }
.ny-clock { font: 700 58px/1.1 var(--font); letter-spacing: -.02em; margin: 2px 0 12px; text-shadow: 0 4px 18px rgba(255, 93, 143, .6); }
.ny-feed { display: flex; flex-direction: column; gap: 8px; max-height: 250px; overflow: hidden; }
.ny-note { display: flex; align-items: center; gap: 10px; padding: 10px 12px; text-align: left; border-radius: 16px; background: rgba(255, 255, 255, .14); backdrop-filter: blur(10px); box-shadow: 0 8px 16px -6px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(255, 255, 255, .12); animation: ny-drop .6s cubic-bezier(.2, 1.4, .3, 1); font-size: .86rem; line-height: 1.3; } .ny-note > i { font-style: normal; font-size: 22px; } .ny-note b { display: block; font-size: .74rem; opacity: .7; } .ny-note div { flex: 1; } .ny-note small { margin: 0; }
@keyframes ny-drop { from { opacity: 0; transform: translateY(-60px) scale(.8) rotateX(50deg); } }
.ny-ticket { position: relative; width: min(94%, 400px); padding: 26px 22px 18px; text-align: left; color: #3a2a10; border-radius: 10px; background: linear-gradient(135deg, #ffe9a8, #ffc83d 60%, #f59e0b); box-shadow: 0 30px 50px -16px rgba(0, 0, 0, .7), 0 0 40px rgba(255, 200, 60, .35), inset 0 0 0 3px rgba(255, 255, 255, .45); transform: rotateX(8deg) rotate(-1.5deg); animation: sx-fadeup .8s both; }
.ny-ticket b { display: block; margin-bottom: 8px; letter-spacing: .22em; font-size: .78rem; text-align: center; opacity: .7; } .ny-ticket-text { font: 600 16px/1.85 var(--font); white-space: pre-wrap; min-height: 100px; } .ny-ticket .typing::after { background: #3a2a10; }
.ny-hole { position: absolute; top: 50%; width: 22px; height: 22px; margin-top: -11px; border-radius: 50%; background: var(--bg1, #12071f); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .5); } .ny-hole.l { left: -11px; } .ny-hole.r { right: -11px; }
.ny-cd { position: relative; width: 280px; height: 280px; display: grid; place-items: center; perspective: 600px; }
.ny-num { font: 800 150px/1 var(--font); color: #fff; text-shadow: 0 0 20px #ff5d8f, 0 0 60px #ff5d8f, 0 10px 0 rgba(0, 0, 0, .25); background: linear-gradient(180deg, #fff, #ffd1de 60%, #ff5d8f); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 24px rgba(255, 93, 143, .8)); } .ny-num.hit { animation: ny-hit .9s cubic-bezier(.1, .8, .2, 1); }
@keyframes ny-hit { 0% { transform: translateZ(-500px) scale(.2) rotateX(60deg); opacity: 0; } 25% { transform: translateZ(60px) scale(1.15); opacity: 1; } 100% { transform: translateZ(0) scale(1); opacity: .95; } }
.ny-ring { position: absolute; inset: 20px; border-radius: 50%; border: 4px solid rgba(255, 255, 255, .85); box-shadow: 0 0 30px #ff5d8f, inset 0 0 30px rgba(255, 93, 143, .5); opacity: 0; } .ny-ring.hit { animation: ny-ring .9s ease-out; } @keyframes ny-ring { from { opacity: 1; transform: scale(.4); } to { opacity: 0; transform: scale(1.5); } }
.ny-fin { display: flex; flex-direction: column; align-items: center; }
.ny-odo { display: flex; gap: 8px; margin-bottom: 14px; perspective: 700px; } .ny-cell { position: relative; display: block; width: 62px; height: 92px; overflow: hidden; border-radius: 12px; background: linear-gradient(180deg, #2a1a4a, #0e0820 50%, #2a1a4a); box-shadow: 0 16px 24px -8px rgba(0, 0, 0, .7), inset 0 0 0 2px rgba(255, 255, 255, .15), inset 0 0 20px rgba(0, 0, 0, .6); } .ny-cell::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: rgba(0, 0, 0, .6); box-shadow: 0 1px 0 rgba(255, 255, 255, .15); }
.ny-strip { display: flex; flex-direction: column; transition: transform 1.4s cubic-bezier(.2, .9, .2, 1); } .ny-strip i { flex: none; height: 92px; display: grid; place-items: center; font: 800 56px var(--font); font-style: normal; color: #ffd166; text-shadow: 0 0 18px rgba(255, 209, 102, .8); } .ny-cell.roll .ny-strip { transform: translateY(-92px); }

/* ====================== 9. VALENTINE — rose, wax seal, heartbeat ====================== */
.va-rose { position: relative; width: 260px; height: 300px; perspective: 700px; }
.va-stem { position: absolute; left: 50%; top: 130px; width: 9px; height: 140px; margin-left: -4px; background: linear-gradient(90deg, #14532d, #4ade80 55%, #14532d); border-radius: 5px; box-shadow: 0 10px 14px rgba(0, 0, 0, .35); }
.va-leaf { position: absolute; top: 215px; width: 46px; height: 24px; background: linear-gradient(135deg, #4ade80, #166534); border-radius: 0 100% 0 100%; } .va-leaf.l { left: 60px; transform: scaleX(-1) rotate(-14deg); } .va-leaf.r { right: 60px; transform: rotate(-14deg); }
.va-head { position: absolute; left: 50%; top: 118px; width: 0; height: 0; transform-style: preserve-3d; transform: rotateX(48deg); animation: va-sway 5s ease-in-out infinite alternate; } @keyframes va-sway { from { transform: rotateX(44deg) rotateZ(-6deg); } to { transform: rotateX(54deg) rotateZ(6deg); } }
.va-petal { position: absolute; left: -32px; top: -112px; width: 64px; height: 112px; padding: 0; border: 0; background: none; transform-origin: 50% 100%; transform: rotate(var(--a)) translateZ(calc(var(--k) * 1px)); cursor: pointer; transition: transform 1.6s cubic-bezier(.3, 0, .4, 1), opacity 1.6s; }
.va-petal i { display: block; width: 100%; height: 100%; border-radius: 50% 50% 50% 50% / 78% 78% 22% 22%; background: radial-gradient(ellipse at 50% 88%, rgba(255, 255, 255, .38), transparent 45%), linear-gradient(180deg, #ff6f95, #d4143f 60%, #7c0a25); box-shadow: inset 0 -10px 14px rgba(0, 0, 0, .28), inset 0 6px 8px rgba(255, 255, 255, .22), 0 8px 12px -4px rgba(0, 0, 0, .5); }
.va-petal.fall { pointer-events: none; opacity: 0; transform: rotate(var(--a)) translateY(260px) translateZ(120px) rotateX(-70deg) rotateZ(120deg); }
.va-core { position: absolute; left: -20px; top: -20px; width: 40px; height: 40px; border-radius: 50%; background: radial-gradient(circle at 38% 32%, #ffd166, #e08a00 70%); box-shadow: 0 4px 8px rgba(0, 0, 0, .5); pointer-events: none; }
.va-reason { min-height: 78px; padding: 10px 20px; border-radius: 18px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .22); backdrop-filter: blur(10px); } .va-reason small { display: block; color: var(--accent); font-weight: 800; letter-spacing: .04em; } .va-reason.in { animation: sx-fadeup .5s both; }
.va-env { position: relative; width: min(92%, 340px); height: 230px; margin-top: 70px; perspective: 900px; transform: rotateX(10deg); }
.va-back { position: absolute; inset: 0; border-radius: 8px; background: linear-gradient(145deg, #f8d4dc, #e8a4b4); box-shadow: 0 30px 40px -12px rgba(0, 0, 0, .65); }
.va-paper { position: absolute; left: 6%; right: 6%; bottom: 6px; height: 88%; padding: 18px 16px; text-align: left; color: #4a1030; background: #fffdf6 repeating-linear-gradient(transparent 0 29px, rgba(194, 24, 91, .13) 29px 30px); border-radius: 4px; box-shadow: 0 -2px 10px rgba(0, 0, 0, .12); transition: transform 1.3s cubic-bezier(.3, 1, .3, 1) .5s, height 1.3s .5s; z-index: 2; } .va-text { font: 500 15px/30px var(--font); white-space: pre-wrap; } .va-paper .typing::after { background: #4a1030; }
.va-front { position: absolute; inset: 0; border-radius: 8px; background: linear-gradient(145deg, #fbd9e1, #e7a0b2); clip-path: polygon(0 0, 50% 50%, 100% 0, 100% 100%, 0 100%); box-shadow: inset 0 0 0 1px rgba(194, 24, 91, .2); z-index: 3; }
.va-flap { position: absolute; left: 0; right: 0; top: 0; height: 58%; background: linear-gradient(160deg, #f9c3cf, #e48aa1); clip-path: polygon(0 0, 100% 0, 50% 100%); transform-origin: 50% 0; transition: transform .9s cubic-bezier(.4, 0, .3, 1), z-index 0s .45s; z-index: 4; filter: drop-shadow(0 6px 4px rgba(0, 0, 0, .25)); }
.va-seal { position: absolute; left: 50%; top: 44%; width: 62px; height: 62px; margin: -31px; border: 0; border-radius: 50%; z-index: 6; cursor: pointer; background: radial-gradient(circle at 35% 30%, #ff5a7c, #b0123a 55%, #6b0a22); box-shadow: 0 8px 12px rgba(0, 0, 0, .5), inset 0 -4px 8px rgba(0, 0, 0, .4), inset 0 3px 5px rgba(255, 255, 255, .35); animation: heartbeat 1.4s infinite; } .va-seal b { color: #ffd1de; font-size: 26px; text-shadow: 0 -1px 0 rgba(0, 0, 0, .5); } .va-seal i { position: absolute; top: 0; bottom: 0; width: 50%; transition: transform .5s; } .va-seal i.l { left: 0; } .va-seal i.r { right: 0; }
.va-env.open .va-seal { animation: none; opacity: 0; transition: opacity .6s .2s; transform: scale(1.4); } .va-env.open .va-flap { transform: rotateX(180deg); z-index: 1; } .va-env.open .va-paper { transform: translateY(-120px); height: 100%; z-index: 5; }
.va-ecg { width: min(94%, 360px); height: 90px; overflow: visible; } .va-ecg-line { fill: none; stroke: #ff5d8f; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 8px #ff5d8f); stroke-dasharray: 700; stroke-dashoffset: 700; } .va-ecg.draw .va-ecg-line { transition: stroke-dashoffset 2.4s linear; stroke-dashoffset: 0; }
.va-heart { position: relative; width: 140px; height: 130px; margin-top: 10px; opacity: 0; transform: scale(.3); transition: opacity 1s 2.2s, transform 1.4s 2.2s cubic-bezier(.3, 1.6, .4, 1); filter: drop-shadow(0 24px 20px rgba(0, 0, 0, .5)); } .va-heart.beat { opacity: 1; transform: scale(1); animation: va-beat 1.1s 1.5s infinite; } .va-heart.sm { opacity: 1; transform: none; transition: none; width: 100px; height: 94px; margin-top: 0; }
.va-h1, .va-h2 { position: absolute; left: 50%; top: 0; width: 70%; height: 100%; margin-left: -35%; border-radius: 50% 50% 0 0 / 60% 60% 0 0; background: radial-gradient(circle at 40% 30%, #ff8fb1, #e11d48 45%, #8a0b2c); box-shadow: inset -8px -8px 18px rgba(0, 0, 0, .35), inset 6px 6px 14px rgba(255, 255, 255, .25); transform-origin: 50% 100%; } .va-h1 { transform: translateX(-26%) rotate(-45deg); } .va-h2 { transform: translateX(26%) rotate(45deg); }
.va-hshine { position: absolute; left: 18%; top: 14%; width: 20%; height: 14%; border-radius: 50%; background: rgba(255, 255, 255, .7); filter: blur(3px); transform: rotate(-30deg); }
@keyframes va-beat { 0%, 40%, 100% { transform: scale(1); } 15% { transform: scale(1.18); } 30% { transform: scale(1.04); } }
.va-fin { display: flex; flex-direction: column; align-items: center; gap: 4px; } .va-fin .va-heart { margin-bottom: 10px; }

/* ====================== 10. ANNIVERSARY — gold carousel, cheers, candlelight, rings ====================== */
.an-monogram { position: relative; width: 150px; height: 100px; perspective: 600px; } .an-ring { position: absolute; top: 10px; width: 80px; height: 80px; border-radius: 50%; padding: 10px; background: linear-gradient(135deg, #fff3b0, #ffc83d 45%, #a86a00 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); filter: drop-shadow(0 12px 8px rgba(0,0,0,.55)); } .an-ring.a { left: 10px; animation: an-spinA 6s ease-in-out infinite; } .an-ring.b { right: 10px; animation: an-spinB 6s ease-in-out infinite; }
@keyframes an-spinA { 50% { transform: rotateY(160deg) translateX(10px); } } @keyframes an-spinB { 50% { transform: rotateY(-160deg) translateX(-10px); } }
.an-carousel { position: relative; width: 100%; height: min(46vh, 360px); perspective: 1000px; touch-action: pan-y; cursor: grab; } .an-ring3d { position: absolute; left: 50%; top: 50%; width: 150px; height: 200px; margin: -100px 0 0 -75px; transform-style: preserve-3d; transform: translateZ(-300px) rotateY(var(--a, 0deg)); }
.an-frame { position: absolute; inset: 0; margin: 0; display: grid; place-items: center; font-size: 70px; background: linear-gradient(160deg, #2a1d06, #5b3b0a); border-radius: 6px; padding: 8px; transform: rotateY(calc(var(--i) * 360deg / var(--n))) translateZ(300px); box-shadow: 0 20px 30px -10px rgba(0, 0, 0, .6); -webkit-box-reflect: below 6px linear-gradient(transparent 72%, rgba(255, 255, 255, .22)); } .an-frame img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; border-radius: 2px; } .an-gold { position: absolute; inset: 0; border-radius: 6px; pointer-events: none; padding: 5px; background: linear-gradient(135deg, #fff3b0, #ffc83d 40%, #a86a00 70%, #ffe9a8); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.an-toast { position: relative; width: 280px; height: 230px; touch-action: none; cursor: ew-resize; perspective: 700px; }
.an-glass { position: absolute; bottom: 20px; width: 90px; height: 190px; transition: transform .1s; filter: drop-shadow(0 18px 12px rgba(0, 0, 0, .45)); } .an-glass.l { left: calc(8px + var(--m) * 42px); transform: rotate(calc(-10deg + var(--m) * 10deg)); } .an-glass.r { right: calc(8px + var(--m) * 42px); transform: rotate(calc(10deg - var(--m) * 10deg)); }
.an-bowl { position: absolute; left: 6px; top: 0; width: 78px; height: 104px; border-radius: 12px 12px 50% 50% / 6px 6px 100% 100%; overflow: hidden; background: linear-gradient(100deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, .08) 40%, rgba(255, 255, 255, .32)); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .55), inset 6px 0 10px rgba(255, 255, 255, .25); }
.an-wine { position: absolute; left: 0; right: 0; bottom: 0; height: 68%; background: linear-gradient(180deg, #ffe08a, #f7b733 60%, #c98410); } .an-bub { position: absolute; left: 30%; bottom: 8%; width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .8); box-shadow: 14px -14px 0 rgba(255, 255, 255, .7), 26px 6px 0 rgba(255, 255, 255, .6), 6px -34px 0 rgba(255, 255, 255, .6); animation: an-bub 2s linear infinite; } @keyframes an-bub { to { transform: translateY(-50px); opacity: 0; } }
.an-stem { position: absolute; left: 41px; top: 100px; width: 8px; height: 70px; background: linear-gradient(90deg, rgba(255, 255, 255, .6), rgba(255, 255, 255, .15), rgba(255, 255, 255, .5)); } .an-foot { position: absolute; left: 14px; bottom: 0; width: 62px; height: 12px; border-radius: 50%; background: linear-gradient(180deg, rgba(255, 255, 255, .6), rgba(255, 255, 255, .2)); box-shadow: 0 3px 5px rgba(0, 0, 0, .4); }
.an-flash { position: absolute; left: 50%; top: 24%; width: 10px; height: 10px; margin: -5px; border-radius: 50%; opacity: 0; background: #fff; box-shadow: 0 0 40px 30px #fff; } .an-toast.clink .an-flash { animation: ny-ring .8s ease-out; }
.an-table { position: relative; display: flex; align-items: flex-end; justify-content: center; gap: 8px; width: 100%; } .an-candle { position: relative; width: 26px; height: 120px; margin-bottom: 8px; } .an-wax { position: absolute; left: 0; right: 0; bottom: 0; height: 82px; border-radius: 4px 4px 2px 2px; background: linear-gradient(90deg, #d8c8a8, #fffaf0 40%, #cdbd9c); box-shadow: 0 10px 12px -4px rgba(0, 0, 0, .6); } .an-flame { position: absolute; left: 50%; bottom: 82px; width: 16px; height: 30px; margin-left: -8px; border-radius: 50% 50% 50% 50% / 75% 75% 25% 25%; background: radial-gradient(ellipse at 50% 78%, #fff8c9 10%, #ffb703 55%, #ff6b00); box-shadow: 0 0 34px 14px rgba(255, 170, 40, .7); animation: sx-flicker .7s ease-in-out infinite; transform-origin: 50% 100%; } .an-candle.r .an-flame { animation-delay: -.3s; }
.an-card { position: relative; flex: 1; max-width: 340px; padding: 26px 18px 18px; text-align: left; color: #f5deb0; border-radius: 6px; background: radial-gradient(ellipse at 50% 0, #3a2810, #1a1006); box-shadow: 0 30px 50px -16px rgba(0, 0, 0, .8), 0 0 60px rgba(255, 170, 60, .22), inset 0 0 0 2px rgba(255, 200, 100, .5); transform: rotateX(6deg); } .an-text { font: 500 16px/1.9 var(--font); white-space: pre-wrap; min-height: 140px; text-shadow: 0 0 10px rgba(255, 200, 100, .4); } .an-card .typing::after { background: #f5deb0; } .an-seal { position: absolute; right: 12px; top: 6px; font-style: normal; font-size: 26px; color: #ffc83d; opacity: .75; }
.an-fin { display: flex; flex-direction: column; align-items: center; } .an-rings3d { position: relative; width: 210px; height: 130px; margin-bottom: 10px; perspective: 700px; transform-style: preserve-3d; animation: an-tilt 6s ease-in-out infinite; } @keyframes an-tilt { 50% { transform: rotateY(24deg) rotateX(10deg); } 0%, 100% { transform: rotateY(-24deg) rotateX(10deg); } }
.an-r1, .an-r2 { position: absolute; top: 10px; width: 110px; height: 110px; border-radius: 50%; padding: 14px; background: conic-gradient(from 30deg, #fff3b0, #ffc83d, #a86a00, #ffe9a8, #fff3b0); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); filter: drop-shadow(0 14px 10px rgba(0,0,0,.6)); } .an-r1 { left: 18px; } .an-r2 { right: 18px; transform: rotateY(60deg); animation: an-r2 6s ease-in-out infinite; } @keyframes an-r2 { 50% { transform: rotateY(-20deg); } }
.an-gem { position: absolute; left: 50%; top: -6px; width: 26px; height: 26px; margin-left: -13px; background: linear-gradient(135deg, #fff, #9be7ff 45%, #3a86ff); clip-path: polygon(50% 0, 100% 35%, 80% 100%, 20% 100%, 0 35%); filter: drop-shadow(0 0 10px #9be7ff); animation: sx-twinkle 2s infinite; }

/* ====================== 11. CONSTELLATION — telescope, star-join, shooting star ====================== */
.co-scope, .co-heart { width: 100%; height: min(42vh, 340px); border-radius: 22px; touch-action: none; cursor: crosshair; background: radial-gradient(ellipse at 50% 40%, #16204a, #060a1c 75%); box-shadow: 0 30px 50px -16px rgba(0, 0, 0, .8), inset 0 0 0 2px rgba(150, 170, 255, .25); }
.co-log { display: flex; flex-direction: column; gap: 4px; min-height: 40px; } .co-line { margin: 0; padding: 4px 12px; border-radius: 10px; background: rgba(255, 255, 255, .08); animation: sx-fadeup .7s both; text-shadow: 0 0 12px rgba(255, 233, 176, .7); }
.co-wish { position: relative; width: 100%; height: 320px; border: 0; border-radius: 22px; background: radial-gradient(ellipse at 50% 100%, #2a1f5e, #060a1c 70%); cursor: pointer; overflow: hidden; color: #fff; box-shadow: 0 30px 50px -16px rgba(0, 0, 0, .8), inset 0 0 0 2px rgba(150, 170, 255, .25); } .co-wish b { position: absolute; left: 0; right: 0; bottom: 24px; font-weight: 600; }
.co-planet { position: absolute; left: 50%; top: 40%; width: 110px; height: 110px; margin: -55px; border-radius: 50%; background: radial-gradient(circle at 32% 30%, #ffd9a8, #c47a3c 45%, #4a2410 100%); box-shadow: inset -16px -14px 30px rgba(0, 0, 0, .65), 0 0 40px rgba(255, 170, 90, .3); } .co-planet::after { content: ''; position: absolute; left: -40px; right: -40px; top: 50%; height: 26px; margin-top: -13px; border-radius: 50%; border: 5px solid rgba(255, 225, 170, .7); border-bottom-color: rgba(255, 225, 170, .25); transform: rotate(-18deg) scaleY(.5); }
.co-shoot { position: absolute; right: -20px; top: 14%; width: 140px; height: 3px; background: linear-gradient(90deg, #fff, transparent); border-radius: 3px; transform: rotate(24deg); opacity: 0; box-shadow: 0 0 14px 3px #fff; } .co-wish.go .co-shoot { animation: co-shoot 1.4s ease-in; } @keyframes co-shoot { 0% { opacity: 1; translate: 0 0; } 100% { opacity: 0; translate: -460px 210px; } }
.co-fin { position: relative; display: flex; flex-direction: column; align-items: center; } .co-aurora { position: absolute; left: -10%; right: -10%; top: -10%; height: 220px; background: linear-gradient(100deg, transparent 10%, rgba(80, 255, 190, .4) 30%, rgba(120, 120, 255, .4) 55%, rgba(255, 90, 200, .3) 75%, transparent 90%); filter: blur(26px); z-index: -1; animation: co-aurora 8s ease-in-out infinite alternate; transform-origin: 50% 0; } @keyframes co-aurora { to { transform: skewX(-14deg) translateX(40px) scaleY(1.3); opacity: .7; } }
.co-orbit { position: relative; width: 150px; height: 120px; margin-bottom: 8px; animation: float-y 5s ease-in-out infinite; } .co-sphere { position: absolute; left: 50%; top: 50%; width: 82px; height: 82px; margin: -41px; border-radius: 50%; background: radial-gradient(circle at 32% 28%, #fff, #a8b8ff 35%, #3a4aa8 75%, #121a4a); box-shadow: inset -12px -10px 22px rgba(0, 0, 0, .55), 0 0 40px rgba(140, 160, 255, .55); } .co-moonlet { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #b8b8c8 60%, #555); animation: co-orbit 5s linear infinite; } @keyframes co-orbit { from { transform: rotate(0) translateX(70px) rotate(0); } to { transform: rotate(360deg) translateX(70px) rotate(-360deg); } }
.co-title { text-shadow: 0 0 20px rgba(255, 255, 255, .5); }