/* ============================================================
   octa-id app-specific styles.
   Loaded AFTER octacer-theme.css. portal-ux §4: styles live in CSS
   files, never inline <style>/style=. Keep minimal — prefer the
   shared theme tokens/components; only octa-id-only bits go here.
   ============================================================ */

/* Login brand-panel ambient motion */
@keyframes oc-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-18px); } }
.oc-float { animation: oc-float 7s ease-in-out infinite; }
.oc-float-slow { animation-delay: -3s; }

@keyframes oc-drift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
.oc-mesh { background-size: 200% 200%; animation: oc-drift 14s ease infinite; }

/* Faint grid overlay on the login brand panel */
.oc-login-grid {
    background-image:
        linear-gradient(#fff 1px, transparent 1px),
        linear-gradient(90deg, #fff 1px, transparent 1px);
    background-size: 44px 44px;
}

/* NoAccess card entrance */
@keyframes oc-fade-in { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.fade-in { animation: oc-fade-in 0.6s ease-out; }

@media (prefers-reduced-motion: reduce) {
    .oc-float, .oc-mesh, .fade-in { animation: none !important; }
}