@keyframes pageFadeIn { 0% { opacity: 0; transform: translateY(15px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes cardFadeUp { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes slideInRight { 0% { transform: translateX(120%); opacity: 0; } 100% { transform: translateX(0); opacity: 1; } }
@keyframes fadeOutRight { 0% { transform: translateX(0); opacity: 1; } 100% { transform: translateX(120%); opacity: 0; } }
@keyframes ticker{0%{transform:translateX(0)}100%{transform:translateX(-100%)}}
@keyframes lovePop{0%{transform:scale(1)}50%{transform:scale(1.3)}100%{transform:scale(1)}}
@keyframes popIn{0%{transform:scale(0.5);opacity:0}100%{transform:scale(1);opacity:1}}
@keyframes bounceEmoji{0%{transform:translateY(0)}100%{transform:translateY(-15px)}}
@keyframes floatUp{0%{opacity:1;transform:translateY(0)scale(1)}100%{opacity:0;transform:translateY(-400px)scale(1.5)}}

.reaction-overlay{position:fixed;inset:0;background:rgba(13, 17, 23, 0.8);z-index:2500;display:flex;align-items:center;justify-content:center;visibility:hidden;opacity:0;transition:all 0.3s ease;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.reaction-overlay.active{visibility:visible;opacity:1}
.reaction-box{background:var(--surface);border:2px solid var(--primary);border-radius:24px;padding:30px;text-align:center;max-width:400px;width:90%;animation:popIn 0.4s ease}
.reaction-emoji{font-size:60px;animation:bounceEmoji 0.6s ease infinite alternate}
.reaction-text{font-size:20px;font-weight:800;color:#F8F6F2;margin:16px 0}
.reaction-sub{font-size:14px;color:var(--muted);margin-bottom:16px}
.reaction-close{background:var(--primary);color:#0D1117;border:none;padding:10px 24px;border-radius:50px;font-weight:800;cursor:pointer; transition: all 0.3s ease;}
.reaction-close:hover { transform: scale(1.05); filter: brightness(1.1); }
.hearts-container{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:2600}
.floating-heart{position:absolute;font-size:24px;animation:floatUp 3s ease-out forwards}

.share-modal-overlay{position:fixed;inset:0;background:rgba(13, 17, 23, 0.8);backdrop-filter:blur(5px);z-index:2700;display:flex;align-items:center;justify-content:center;visibility:hidden;opacity:0;transition:all 0.3s ease}
.share-modal-overlay.active{visibility:visible;opacity:1}
.share-modal{background:var(--surface);border:2px solid var(--primary);border-radius:20px;padding:30px;text-align:center;max-width:450px;width:90%; transform: scale(0.9); transition: transform 0.3s ease;}
.share-modal-overlay.active .share-modal { transform: scale(1); }
.share-modal h3{color:var(--primary);margin-bottom:12px}
.share-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:16px 0}
.share-btn{padding:14px 24px;border-radius:12px;border:none;font-weight:700;font-size:15px;cursor:pointer;color:#F8F6F2;text-decoration:none;display:flex;align-items:center;gap:8px; transition: all 0.3s ease;}
.share-btn:hover { transform: translateY(-3px) scale(1.05); filter: brightness(1.1); }
.share-btn:active { transform: scale(0.95); }
.share-btn-facebook{background:#1877f2}.share-btn-instagram{background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888)}.share-btn-tiktok{background:#000;border:1px solid #F8F6F2}
.close-share-modal{background:var(--surface3);color:#F8F6F2;border:1px solid rgba(248, 246, 242, 0.2);padding:10px 24px;border-radius:20px;cursor:pointer;font-weight:600; transition: all 0.3s ease;}
.close-share-modal:hover { background: rgba(255,255,255,0.1); }
.share-done-btn{background:var(--primary);color:#0D1117;border:none;padding:12px 24px;border-radius:20px;font-weight:700;cursor:pointer;margin-top:12px;width:100%; transition: all 0.3s ease;}
.share-done-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(244, 183, 61, 0.3); }
.share-done-btn:disabled{opacity:0.5;cursor:not-allowed}