html { 
    scroll-behavior: smooth; 
    scrollbar-width: thin; 
    scrollbar-color: #ff69b4 #050714; 
}

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #050714; }
::-webkit-scrollbar-thumb { background: linear-gradient(#ff69b4, #b5447e); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #ffb7e2; }
body { animation: pageFadeIn 0.8s ease-out; background: radial-gradient(circle at top, #261b3b 0, #050714 50%, #020308 100%); transition: opacity 0.2s; }
body[unresolved] { opacity: 0; display: block; overflow: hidden; position: relative; }

@keyframes pageFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes aurora { 0%, 100% { opacity: 0.2; transform: translate(0) scale(1); } 50% { opacity: 0.3; transform: translate(20px, -20px) scale(1.05); } }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@keyframes lightboxZoomIn { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: scale(1); } }
@keyframes lightboxZoomOut { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(0.8); } }
@keyframes starDrift { 0% { transform: translate3d(0,0,0); } 100% { transform: translate3d(-10px, 8px, 0) scale(1.02); } }
@keyframes fadeUp { 0% { opacity: 0; transform: translateY(20px) scale(0.98); } 100% { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes fadeInBlur { 0% { opacity: 0; filter: blur(8px); transform: scale(0.97); } 100% { opacity: 1; filter: blur(0); transform: scale(1); } }
@keyframes slideIn { from { transform: translateX(200px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes fadeOut { to { opacity: 0; transform: translateX(200px); } }
@keyframes floatSoft { 0% { transform: translate3d(0,0,0); } 100% { transform: translate3d(0, -10px, 0); } }
@keyframes cloudDrift { 0% { background-position-x: 0; } 100% { background-position-x: -800px; } }

.lightbox-zoom-in { animation: lightboxZoomIn 0.3s ease-out; }
.lightbox-zoom-out { animation: lightboxZoomOut 0.25s ease-in; }
.pixel-stars { position: fixed; inset: 0; background-image: radial-gradient(2px 2px at 10px 20px, rgba(255,255,255,0.8) 50%, transparent 50%), radial-gradient(2px 2px at 130px 80px, rgba(255,192,203,0.7) 50%, transparent 50%), radial-gradient(2px 2px at 230px 40px, rgba(255,255,255,0.6) 50%, transparent 50%); background-size: 200px 200px; opacity: 0.5; pointer-events: none; z-index: -1; animation: starDrift 40s linear infinite alternate; }
.anim-fade-up { animation: fadeUp .7s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.anim-fade-delay-1 { animation-delay: .15s; }
.anim-fade-delay-2 { animation-delay: .3s; }
.anim-fade-delay-3 { animation-delay: .45s; }
.anim-fade-blur { animation: fadeInBlur .9s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
#top-loader { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: linear-gradient(90deg, #ff69b4, #ffb7e2); z-index: 9999; transition: width .25s, opacity .4s; }
.pixel-btn { box-shadow: 0 0 0 2px #fff4fa, 0 10px 0 #b5447e, 0 18px 30px rgba(0,0,0,0.45); transition: .15s; }
.pixel-btn:hover { transform: translateY(2px); box-shadow: 0 0 0 2px #fff4fa, 0 5px 0 #8d315f, 0 10px 20px rgba(0,0,0,0.55); filter: brightness(1.03); }
.pixel-btn:active { transform: translateY(6px); box-shadow: 0 0 0 2px #fff4fa, 0 0 0 #8d315f, 0 3px 10px rgba(0,0,0,0.7); }
.faq-item button[aria-expanded="true"] .faq-icon { transform: rotate(90deg); }
.faq-content { max-height: 0; opacity: 0; overflow: hidden; transition: .3s ease-out; transform: translateY(-4px); }
.faq-content.open { max-height: 200px; opacity: 1; transform: translateY(0); }
.wiggle-hover, .gallery-card { transition: .2s ease-out; transform: translateZ(0); }
.wiggle-hover:hover, .gallery-card:hover { transform: translateY(-3px) scale(1.005); box-shadow: 0 16px 35px rgba(0,0,0,0.6); border-color: rgba(255,255,255,0.2); }
.notification { position: fixed; top: 90px; right: 20px; background: linear-gradient(135deg, #ff69b4, #ffb7e2); color: #fff; padding: 12px 18px; border-radius: 999px; box-shadow: 0 14px 30px rgba(0,0,0,0.35); z-index: 100; display: flex; gap: 8px; align-items: center; font-size: 0.75rem; animation: slideIn .2s ease-out, fadeOut .3s ease-in 2.4s forwards; }
.float-soft { animation: floatSoft 6s ease-in-out infinite alternate; }
.backdrop-hidden { opacity: 0; pointer-events: none; }
.backdrop-visible { opacity: 1; pointer-events: auto; }
.modal-scale-in { transform: translateY(10px) scale(0.97); opacity: 0; }
.modal-scale-in.modal-open { transform: translateY(0) scale(1); opacity: 1; }