/**
 * Initial-load splash (index.html) — mirrors luna-selene-thinking-animation until
 * Angular bootstraps and replaces <app-root> contents. Theme tokens match FOUC script.
 */

[data-theme='light'] {
  --boot-bg: #f5f3ef;
  --boot-text: #202433;
  --boot-accent: #ab9fac;
  --boot-accent-hover: #9a8a9a;
}

[data-theme='dark'] {
  --boot-bg: #262c46;
  --boot-text: #ffffff;
  --boot-accent: #b199db;
  --boot-accent-hover: #c4b0e8;
}

[data-theme='paris-dawn'] {
  --boot-bg: #f8f5fb;
  --boot-text: #4e4458;
  --boot-accent: #b9a2c5;
  --boot-accent-hover: #aa91b8;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: var(--boot-bg, #f5f3ef);
  color: var(--boot-text, #202433);
}

.selene-boot-splash {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100dvh;
  width: 100%;
  padding: 1.5rem;
  font-family:
    system-ui,
    -apple-system,
    Segoe UI,
    Roboto,
    Helvetica,
    Arial,
    sans-serif;
}

.selene-boot-splash__panel {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.125rem;
  text-align: center;
  min-height: 9.75rem;
}

.selene-boot-splash__celestial {
  position: relative;
  width: 4.5rem;
  height: 4.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.selene-boot-splash__orbit {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.selene-boot-splash__orbit--primary {
  animation: selene-boot-spin 3s linear infinite;
}

.selene-boot-splash__orbit--secondary {
  inset: -15%;
  animation: selene-boot-spin-reverse 4s linear infinite;
}

.selene-boot-splash__sparkle {
  position: absolute;
  background: linear-gradient(
    135deg,
    var(--boot-accent-hover),
    var(--boot-accent)
  );
  clip-path: polygon(
    50% 0%,
    55% 45%,
    100% 50%,
    55% 55%,
    50% 100%,
    45% 55%,
    0% 50%,
    45% 45%
  );
}

.selene-boot-splash__sparkle--primary {
  top: -8px;
  left: 50%;
  width: 1.25rem;
  height: 1.25rem;
  transform: translateX(-50%);
  animation: selene-boot-sparkle-primary 1.2s cubic-bezier(0.4, 0, 0.2, 1)
    infinite alternate;
}

.selene-boot-splash__sparkle--secondary {
  bottom: 9px;
  right: -4px;
  width: 0.875rem;
  height: 0.875rem;
  background: linear-gradient(
    135deg,
    var(--boot-text),
    var(--boot-accent-hover)
  );
  animation: selene-boot-sparkle-secondary 1.2s cubic-bezier(0.4, 0, 0.2, 1)
    infinite alternate;
  animation-delay: -0.6s;
}

.selene-boot-splash__moon {
  --pending-moon-size: 36px;
  --pending-moon-border: 4px;
  --pending-crescent-offset: 13px;
  --pending-crescent-sweep-offset: 40px;
  --pending-crescent-highlight-y: 4px;
  --pending-glow-soft: color-mix(in srgb, var(--boot-accent) 42%, transparent);
  --pending-glow-strong: color-mix(
    in srgb,
    var(--boot-accent) 88%,
    transparent
  );

  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: transparent;
  border: var(--pending-moon-border) solid transparent;
  box-sizing: border-box;
  box-shadow: inset calc(-1 * var(--pending-crescent-offset))
    var(--pending-crescent-highlight-y) 0 0 var(--boot-text);
  animation: selene-boot-morph-phases 3.6s cubic-bezier(0.45, 0, 0.15, 1)
    infinite;
}

.selene-boot-splash__status {
  margin: 0;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.5px;
  background-image: linear-gradient(
    90deg,
    var(--boot-text) 0%,
    var(--boot-accent) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.selene-boot-splash__dots::after {
  content: '';
  display: inline-block;
  width: 1.5em;
  text-align: left;
  color: var(--boot-accent);
  animation: selene-boot-dots 1s steps(4, end) infinite;
}

@keyframes selene-boot-morph-phases {
  0% {
    border: 0 solid transparent;
    border-top-color: transparent;
    box-shadow: inset calc(-1 * var(--pending-crescent-offset))
      var(--pending-crescent-highlight-y) 0 0 var(--boot-text);
    transform: rotate(0deg) scale(0.9);
    filter: drop-shadow(0 0 8px var(--pending-glow-soft));
  }
  15% {
    border: 0 solid var(--boot-text);
    border-top-color: var(--boot-text);
    box-shadow: inset calc(-1 * var(--pending-crescent-sweep-offset)) 0 0 0
      var(--boot-text);
    transform: rotate(45deg) scale(1.15);
    filter: drop-shadow(0 0 25px var(--pending-glow-strong));
  }
  25% {
    border: var(--pending-moon-border) solid var(--boot-text);
    border-top-color: transparent;
    box-shadow: inset 0 0 0 0 var(--boot-text);
    transform: rotate(180deg) scale(1);
    filter: drop-shadow(0 0 10px var(--pending-glow-soft));
  }
  50% {
    border: var(--pending-moon-border) solid var(--boot-accent);
    border-top-color: transparent;
    box-shadow: inset 0 0 0 0 var(--boot-accent);
    transform: rotate(720deg) scale(1);
    filter: drop-shadow(0 0 15px var(--pending-glow-strong));
  }
  75% {
    border: var(--pending-moon-border) solid var(--boot-text);
    border-top-color: transparent;
    box-shadow: inset 0 0 0 0 var(--boot-text);
    transform: rotate(1260deg) scale(1);
    filter: drop-shadow(0 0 10px var(--pending-glow-soft));
  }
  85% {
    border: 0 solid var(--boot-text);
    border-top-color: var(--boot-text);
    box-shadow: inset calc(-1 * var(--pending-crescent-sweep-offset)) 0 0 0
      var(--boot-text);
    transform: rotate(1395deg) scale(1.15);
    filter: drop-shadow(0 0 25px var(--pending-glow-strong));
  }
  100% {
    border: 0 solid transparent;
    border-top-color: transparent;
    box-shadow: inset calc(-1 * var(--pending-crescent-offset))
      var(--pending-crescent-highlight-y) 0 0 var(--boot-text);
    transform: rotate(1440deg) scale(0.9);
    filter: drop-shadow(0 0 8px var(--pending-glow-soft));
  }
}

@keyframes selene-boot-sparkle-primary {
  0% {
    transform: translateX(-50%) scale(0.5) rotate(0deg);
    opacity: 0.5;
  }
  100% {
    transform: translateX(-50%) scale(1.2) rotate(45deg);
    opacity: 1;
  }
}

@keyframes selene-boot-sparkle-secondary {
  0% {
    transform: scale(0.5) rotate(0deg);
    opacity: 0.5;
  }
  100% {
    transform: scale(1.2) rotate(45deg);
    opacity: 1;
  }
}

@keyframes selene-boot-spin {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes selene-boot-spin-reverse {
  100% {
    transform: rotate(-360deg);
  }
}

@keyframes selene-boot-dots {
  0%,
  20% {
    content: '';
  }
  40% {
    content: '.';
  }
  60% {
    content: '..';
  }
  80%,
  100% {
    content: '...';
  }
}

@media (prefers-reduced-motion: reduce) {
  .selene-boot-splash__moon,
  .selene-boot-splash__sparkle,
  .selene-boot-splash__orbit--primary,
  .selene-boot-splash__orbit--secondary,
  .selene-boot-splash__dots::after {
    animation: none;
  }
}