/* Styles for onboarding completion celebration popup */

.celebration-popup-overlay { position:fixed; inset:0; width:100vw; height:100vh; background:rgba(0,0,0,0.8); display:flex; align-items:center; justify-content:center; z-index:10000; animation:fadeIn 0.3s ease-out; }
.celebration-popup { background:linear-gradient(135deg,#1a3d2e 0%,#2d5a41 100%); color:#fff; border-radius:12px; padding:3rem 2.5rem; box-shadow:0 20px 60px rgba(0,0,0,0.5); text-align:center; max-width:550px; width:90%; border:2px solid #3a7; position:relative; animation:slideUp 0.4s ease-out; }
.celebration-popup h2 { color:#3a7; margin-bottom:1.5rem; font-size:1.8rem; font-weight:700; }
.celebration-popup p { margin-bottom:2rem; line-height:1.6; font-size:1.1rem; }
#onboardingPopupBtn { background:#3a7; color:#fff; border:none; padding:15px 30px; border-radius:8px; font-size:1.1rem; font-weight:600; cursor:pointer; transition:all 0.3s ease; box-shadow:0 4px 15px rgba(58,119,119,0.3); }
#onboardingPopupBtn:hover { background:#2f8258; transform:translateY(-2px); box-shadow:0 6px 20px rgba(58,119,119,0.4); }
#popupLockContainer { font-size:3rem; margin-bottom:1rem; position:relative; height:3rem; display:flex; align-items:center; justify-content:center; }

@keyframes fadeIn { from {opacity:0;} to {opacity:1;} }
@keyframes slideUp { from { opacity:0; transform:translateY(30px) scale(0.9);} to { opacity:1; transform:translateY(0) scale(1);} }
@keyframes lockGrow { 0% { transform:scale(1);} 100% { transform:scale(2);} }
@keyframes lockShakeBig { 0%,100% { transform:scale(2) rotate(0deg);} 25% { transform:scale(2) rotate(-3deg);} 75% { transform:scale(2) rotate(3deg);} }
@keyframes lockUnlockBig { 0% { transform:scale(2);} 50% { transform:scale(2.1);} 100% { transform:scale(2);} }
@keyframes lockFallAwayBig { 0% { transform:scale(2) translateY(0) rotate(0deg); opacity:1;} 30% { transform:scale(2) translateY(10px) rotate(15deg); opacity:1;} 100% { transform:scale(0.5) translateY(300px) rotate(180deg); opacity:0;} }
@keyframes fadeOut { from {opacity:1;} to {opacity:0;} }
.lock-growing { animation:lockGrow 0.8s ease-out forwards; }
.lock-shaking-big { animation:lockShakeBig 0.3s ease-in-out 3; }
.lock-unlocking-big { animation:lockUnlockBig 0.3s ease-out forwards; }
.lock-falling-big { animation:lockFallAwayBig 1.2s ease-in forwards; }