/* Portal — shared styles (non-themed, reused across 2+ templates) */

/* Base typography */
body { font-family: 'Inter', system-ui, sans-serif; }

/* Glass morphism */
.glass {
    background: rgba(255,255,255,0.82);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid rgba(255,255,255,0.35);
}

/* ── Shared keyframes ── */
@keyframes slideUp { from { opacity:0; transform:translateY(24px); } to { opacity:1; transform:translateY(0); } }
@keyframes floatOrb { 0%,100% { transform:translate(0,0) scale(1); } 50% { transform:translate(-20px,25px) scale(1.08); } }
@keyframes floatOrb2 { 0%,100% { transform:translate(0,0) scale(1); } 50% { transform:translate(15px,-20px) scale(1.05); } }
@keyframes gridPulse { 0%,100% { opacity:0.4; } 50% { opacity:0.6; } }
@keyframes noiseShift { 0% { transform:translate(0,0); } 100% { transform:translate(-28px,-28px); } }
@keyframes confirmFadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes confirmSlideUp { from { opacity:0; transform:translateY(16px) scale(0.96); } to { opacity:1; transform:translateY(0) scale(1); } }
@keyframes statusBreathe { 0%,100% { opacity:1; } 50% { opacity:0.5; } }

/* ── Animation utilities (error/login/payment pages) ── */
.animate-slide-up { animation: slideUp 0.6s cubic-bezier(0.16,1,0.3,1) forwards; }
.animate-delay-1 { animation-delay: 0.1s; opacity: 0; }
.animate-delay-2 { animation-delay: 0.2s; opacity: 0; }
.animate-delay-3 { animation-delay: 0.3s; opacity: 0; }

/* ── Animation utilities (hub/portal pages) ── */
.anim-slide-up { animation: slideUp 0.7s cubic-bezier(0.16,1,0.3,1) both; }
.delay-1 { animation-delay: .1s; }
.delay-2 { animation-delay: .2s; }
.delay-3 { animation-delay: .3s; }
.delay-4 { animation-delay: .4s; }

/* ── Confirm modal ── */
.confirm-backdrop { animation: confirmFadeIn 0.2s ease-out both; }
.confirm-card { animation: confirmSlideUp 0.35s cubic-bezier(0.16,1,0.3,1) both; animation-delay:0.05s; }

/* ── Nav scroll state (shared base — theme overrides stay inline) ── */
.nav-scrolled a, .nav-scrolled span, .nav-scrolled button { transition: color 0.3s; }
.nav-scrolled a { color: rgba(0,0,0,0.45) !important; }
.nav-scrolled a:hover { color: rgba(0,0,0,0.8) !important; }
.nav-scrolled button { color: rgba(0,0,0,0.5) !important; }
.nav-scrolled button:hover { color: rgba(0,0,0,0.8) !important; background: rgba(0,0,0,0.05) !important; }
.nav-scrolled span.font-semibold { color: rgba(0,0,0,0.8) !important; }