/* Steel Platform — PWA Custom Styles (page-loader, animations, utilities) */
@keyframes logoFloat{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-10px) scale(1.02)}}
@keyframes spinnerPulse{0%{transform:scale(.8);opacity:.5}50%{transform:scale(1.1);opacity:1}100%{transform:scale(.8);opacity:.5}}
@keyframes spin{0%{transform:translate(-50%,-50%) rotate(0)}100%{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes fadeOut{from{opacity:1;visibility:visible}to{opacity:0;visibility:hidden}}
@keyframes likeHeartPop{0%{transform:scale(1)}40%{transform:scale(1.35)}70%{transform:scale(.92)}100%{transform:scale(1)}}

#page-loader{position:fixed;top:0;left:0;width:100%;height:100%;background:linear-gradient(135deg,#fff 0%,#f5f7fa 100%);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:999999;transition:opacity .5s ease,visibility .5s ease}
.dark #page-loader{background:linear-gradient(135deg,#0f172a 0%,#1e293b 100%)}
#page-loader.loaded{animation:fadeOut .5s ease forwards}
.loader-logo-container{position:relative;width:120px;height:120px;margin-bottom:30px}
.loader-logo{width:100%;height:100%;object-fit:contain;animation:logoFloat 2s ease-in-out infinite;filter:drop-shadow(0 10px 30px rgba(255,102,0,.3))}
.dark .loader-logo{filter:drop-shadow(0 10px 30px rgba(255,102,0,.5))}
.loader-spinner{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:140px;height:140px;border:3px solid transparent;border-top-color:#f60;border-right-color:#f60;border-radius:50%;animation:spin 1.5s linear infinite}
.loader-dots{display:flex;gap:8px;margin-top:20px}
.loader-dot{width:12px;height:12px;background:#f60;border-radius:50%;animation:spinnerPulse 1.4s ease-in-out infinite}
.loader-dot:nth-child(1){animation-delay:-.32s}
.loader-dot:nth-child(2){animation-delay:-.16s}
.loader-text{margin-top:20px;font-size:16px;font-weight:600;color:#64748b;letter-spacing:.5px}
.dark .loader-text{color:#94a3b8}
.like-heart-pop{animation:likeHeartPop .35s ease forwards}