/* First paint splash — loaded from index.html before Angular bundles */
.ey-initial-loader {
  --ey-loader-primary: #2c7a6b;
  --ey-loader-primary-600: #358f7e;
  --ey-loader-primary-700: #1f5c50;
  --ey-loader-primary-soft: rgba(44, 122, 107, 0.16);
  --ey-loader-primary-glow: rgba(44, 122, 107, 0.28);
  --ey-loader-bg: #fafaf6;
  --ey-loader-surface: #ffffff;
  --ey-loader-text: #1a2e28;
  --ey-loader-muted: #5f736c;
  --ey-loader-ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  position: fixed;
  inset: 0;
  z-index: 2147483646;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 2rem);
  overflow: hidden;
  font-family: 'IBM Plex Sans Arabic', 'Cairo', 'Segoe UI', system-ui, sans-serif;
  color: var(--ey-loader-text);
  background: var(--ey-loader-bg);
  transition:
    opacity 0.52s var(--ey-loader-ease-out),
    visibility 0.52s var(--ey-loader-ease-out);
}

.ey-initial-loader--leaving {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.ey-initial-loader--leaving .ey-initial-loader__panel {
  transform: translateY(10px) scale(0.97);
  opacity: 0;
}

.ey-initial-loader__backdrop {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 90% 60% at 50% -8%, rgba(44, 122, 107, 0.14), transparent 62%),
    radial-gradient(ellipse 55% 45% at 100% 100%, rgba(44, 122, 107, 0.08), transparent 55%),
    radial-gradient(ellipse 45% 40% at 0% 85%, rgba(44, 122, 107, 0.06), transparent 50%),
    linear-gradient(168deg, var(--ey-loader-bg) 0%, #f3f7f5 42%, #ebf2ef 100%);
}

.ey-initial-loader__backdrop::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.45;
  background-image:
    linear-gradient(rgba(44, 122, 107, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(44, 122, 107, 0.04) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, #000 20%, transparent 75%);
}

.ey-initial-loader__panel {
  position: relative;
  z-index: 1;
  width: min(24rem, 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  padding: 2.15rem 2rem 1.85rem;
  border-radius: 1.35rem;
  background: color-mix(in srgb, var(--ey-loader-surface) 88%, transparent);
  border: 1px solid color-mix(in srgb, var(--ey-loader-primary) 14%, transparent);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.65) inset,
    0 1px 2px rgba(26, 46, 40, 0.05),
    0 24px 56px rgba(26, 46, 40, 0.1);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition:
    transform 0.52s var(--ey-loader-ease-out),
    opacity 0.52s var(--ey-loader-ease-out);
  animation: ey-loader-panel-in 0.7s var(--ey-loader-ease-out) both;
}

.ey-initial-loader__brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
  animation: ey-loader-brand-in 0.75s var(--ey-loader-ease-out) 0.08s both;
}

.ey-initial-loader__mark-wrap {
  position: relative;
  width: 5.5rem;
  height: 5.5rem;
  display: grid;
  place-items: center;
}

.ey-initial-loader__mark-wrap::before {
  content: '';
  position: absolute;
  inset: 0.35rem;
  border-radius: 50%;
  background: radial-gradient(circle, var(--ey-loader-primary-soft) 0%, transparent 72%);
  animation: ey-loader-glow 2.6s ease-in-out infinite;
}

.ey-initial-loader__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: var(--ey-loader-primary);
  border-inline-end-color: color-mix(in srgb, var(--ey-loader-primary) 28%, transparent);
  animation: ey-loader-spin 1.15s linear infinite;
}

.ey-initial-loader__ring--outer {
  inset: -0.2rem;
  border-width: 1.5px;
  border-top-color: color-mix(in srgb, var(--ey-loader-primary) 55%, transparent);
  border-inline-start-color: color-mix(in srgb, var(--ey-loader-primary) 18%, transparent);
  animation-duration: 1.75s;
  animation-direction: reverse;
}

.ey-initial-loader__mark {
  position: relative;
  z-index: 1;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 1.05rem;
  object-fit: contain;
  padding: 0.35rem;
  background: var(--ey-loader-surface);
  box-shadow:
    0 8px 22px var(--ey-loader-primary-glow),
    0 0 0 1px color-mix(in srgb, var(--ey-loader-primary) 12%, transparent);
  animation: ey-loader-mark-float 3s ease-in-out infinite;
}

.ey-initial-loader__name {
  margin: 0;
  font-size: 1.625rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--ey-loader-primary-700);
}

.ey-initial-loader__tagline {
  margin: 0.35rem 0 0;
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.45;
  color: var(--ey-loader-muted);
  max-width: 16rem;
}

.ey-initial-loader__status {
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ey-loader-muted);
  animation: ey-loader-brand-in 0.75s var(--ey-loader-ease-out) 0.18s both;
}

.ey-initial-loader__dots {
  display: inline-flex;
  gap: 0.22rem;
}

.ey-initial-loader__dots span {
  width: 0.3rem;
  height: 0.3rem;
  border-radius: 50%;
  background: var(--ey-loader-primary);
  opacity: 0.35;
  animation: ey-loader-dot 1.2s ease-in-out infinite;
}

.ey-initial-loader__dots span:nth-child(2) {
  animation-delay: 0.16s;
}

.ey-initial-loader__dots span:nth-child(3) {
  animation-delay: 0.32s;
}

@keyframes ey-loader-panel-in {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes ey-loader-brand-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes ey-loader-glow {
  0%,
  100% {
    transform: scale(0.9);
    opacity: 0.5;
  }
  50% {
    transform: scale(1.08);
    opacity: 1;
  }
}

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

@keyframes ey-loader-mark-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4px);
  }
}

@keyframes ey-loader-dot {
  0%,
  80%,
  100% {
    opacity: 0.35;
    transform: translateY(0);
  }
  40% {
    opacity: 1;
    transform: translateY(-2px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ey-initial-loader__panel,
  .ey-initial-loader__brand,
  .ey-initial-loader__status,
  .ey-initial-loader__mark,
  .ey-initial-loader__mark-wrap::before,
  .ey-initial-loader__ring,
  .ey-initial-loader__dots span {
    animation: none !important;
  }
}