/* ============================================
   COMPONENTS - Splash Screen
   Splash screen component styles converted to Tailwind
   ============================================ */

@layer components {
  /* Splash Screen Overlay */
  .crm-splash {
    @apply fixed inset-0 bg-black/20 backdrop-blur-sm hidden items-center justify-center transition-opacity duration-200 z-[9999] opacity-0 invisible;
  }

  .dynamic-modal-overlay {
    @apply z-[10000];
  }

  .dynamic-modal-panel {
    @apply w-full max-w-md rounded-crm-lg border border-crm-border bg-crm-surface px-7 py-6 shadow-crm-lg;
    opacity: 0;
    transform: translateY(10px) scale(0.98);
    transition: opacity 200ms ease, transform 200ms ease;
  }

  /* Visible State */
  .crm-splash[aria-hidden="false"],
  .crm-splash.is-visible {
    @apply flex opacity-100 visible;
  }

  .dynamic-modal-overlay[aria-hidden="false"] .dynamic-modal-panel,
  .dynamic-modal-overlay.is-visible .dynamic-modal-panel {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  .dynamic-modal-overlay.is-closing {
    @apply opacity-0;
  }

  .dynamic-modal-overlay.is-closing .dynamic-modal-panel {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
  }

  /* Splash Card Container */
  .crm-splash-card {
    @apply bg-crm-surface text-crm-text px-10 py-8 rounded-crm-xl shadow-crm-lg text-center min-w-splash-card;
  }

  /* Logo Image */
  .crm-splash-logo-img {
    @apply w-20 h-20 mx-auto block;
    animation: splash-pulse 2s ease-in-out infinite;
  }

  /* Logo Text (fallback) */
  .crm-splash-logo {
    @apply font-bold text-lg text-crm-primary;
  }

  /* Spinner */
  .crm-splash-spinner {
    @apply w-12 h-12 rounded-full border-4 border-crm-border border-t-crm-primary mx-auto my-6 mb-4;
    animation: splash-spin 0.8s linear infinite;
  }

  /* Loading Text */
  .crm-splash-text {
    @apply text-crm-muted font-medium text-crm-sm;
  }

  /* Progress Bar */
  .crm-splash-progress {
    @apply w-full h-1 bg-crm-border rounded-full mt-crm-md overflow-hidden;
  }

  .crm-splash-progress-bar {
    @apply h-full rounded-full;
    background: linear-gradient(90deg, #e10f21 0%, #c10c1b 100%);
    animation: splash-progress 1.5s ease-in-out infinite;
  }
}

/* ============================================
   ANIMATIONS
   ============================================ */

@layer utilities {
  @keyframes splash-pulse {
    0%, 100% {
      @apply opacity-100 scale-100;
    }
    50% {
      @apply opacity-80 scale-105;
    }
  }

  @keyframes splash-spin {
    to {
      transform: rotate(360deg);
    }
  }

  @keyframes splash-fade-in {
    from {
      @apply opacity-0 scale-95;
    }
    to {
      @apply opacity-100 scale-100;
    }
  }

  @keyframes splash-fade-out {
    from {
      @apply opacity-100 scale-100;
    }
    to {
      @apply opacity-0 scale-95;
    }
  }

  @keyframes splash-progress {
    0% {
      transform: translateX(-100%);
    }
    100% {
      transform: translateX(100%);
    }
  }

  /* Loading States */
  .crm-splash.entering {
    animation: splash-fade-in 0.2s ease-out;
  }

  .crm-splash.exiting {
    animation: splash-fade-out 0.2s ease-out;
  }
}

/* ============================================
   DARK MODE
   ============================================ */

@layer utilities {
  [data-theme="dark"] .crm-splash {
    @apply bg-black/50;
  }

  [data-theme="dark"] .crm-splash-card {
    @apply shadow-[0_20px_40px_rgba(0,0,0,0.8)];
  }
}