/**
 * @file splash.css
 * @description Initial splash screen styles - shown before Angular boots
 * 
 * @compodoc
 * SOC2 CC6.6 COMPLIANCE:
 * This file is loaded as an external stylesheet to enable stricter CSP.
 * Previously inline styles required 'unsafe-inline' in style-src.
 * 
 * Uses CSS custom properties with fallbacks for theme compatibility.
 * The fallbacks match the default dark theme colors.
 */

:root {
  --splash-bg-color: var(--ion-background-color, #0a0a0a);
  --splash-primary-rgb: var(--ion-color-primary-rgb, 13, 245, 186);
}

/* Hide app content until Angular boots and lock screen is ready */
app-root:empty {
  display: block;
  position: fixed;
  inset: 0;
  background: var(--splash-bg-color);
  z-index: 99999;
}

/* Show a minimal loader spinner */
app-root:empty::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  border: 3px solid rgba(var(--splash-primary-rgb), 0.2);
  border-top-color: rgba(var(--splash-primary-rgb), 0.8);
  border-radius: 50%;
  animation: appSpin 1s linear infinite;
}

@keyframes appSpin {
  to { transform: rotate(360deg); }
}