/* --- Splash Screen Wrapper --- */
.app-splash-screen {
  position: fixed;
  inset: 0;
  background: radial-gradient(
    circle at center,
    var(--atf-darkest-blue) 0%,
    var(--atf-primary) 100%
  );
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  opacity: 1;
  transform: scale(1) translateZ(0);
  transform-origin: center center;
  will-change: opacity, transform, visibility;
  transition:
    opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0.5s ease;
  backface-visibility: hidden;
}

.app-splash-screen.is-hiding {
  opacity: 0;
  transform: scale(1.15) translateZ(0); /* High scale (2.5) causes blur/lag, reduced to 1.15 for smooth fade-out */
  pointer-events: none;
  visibility: hidden;
}

.app-splash-screen .app-splash-screen__container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
}

/* --- 1. Top Bracket Pulse Loader ({}) --- */
.app-splash-screen .app-splash-screen__code-brackets {
  display: flex;
  gap: 0.5rem;
  color: var(--atf-OffWhite);
  font-weight: 700;
  font-size: 5.5rem;
  font-family: Consolas, Monaco, "Courier New", monospace;
  opacity: 0.95;
  user-select: none;
  filter: drop-shadow(0 0 12px rgba(1, 76, 246, 0.45));
}

.app-splash-screen .app-splash-screen__code-brackets span {
  display: inline-block;
  will-change: transform, opacity;
  animation: splash-pulse 0.6s ease-in-out infinite alternate;
}

.app-splash-screen .app-splash-screen__code-brackets span:nth-child(2) {
  animation-delay: 0.3s;
}

/* --- 2. Text & Icon Wrapper --- */
.app-splash-screen .sp-s-text {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.95rem;
  font-weight: 300;
  color: var(--atf-semi-OffWhite);
}

/* Glowing Icon Animation */
.app-splash-screen .sp-s-text .glowing-icon {
  display: inline-flex;
  height: 20px;
  width: 20px;
  color: var(--atf-white);
  will-change: transform, filter;
  animation: icon-glow 1.8s ease-in-out infinite alternate;
}

.app-splash-screen .sp-s-text .glowing-icon svg {
  width: 100%;
  height: 100%;
}

/* Smooth Typing Effect for Text */
.app-splash-screen .sp-s-text .typing-text {
  display: inline-block;
  font-family: var(--atf-font-jet, monospace);
  white-space: nowrap;
  overflow: hidden;
  border-right: 2px solid var(--atf-semi-OffWhite);
  /* "Initialize..." uses 13 characters. Max width mapped to 'ch' */
  width: 0;
  will-change: width, border-color;
  animation:
    typing 2.5s steps(13, end) infinite,
    blink-caret 0.75s step-end infinite;
}

/* --- Keyframe Animations --- */

/* Brackets Smooth Scale */
@keyframes splash-pulse {
  0% {
    transform: scale(1) translateZ(0);
    opacity: 1;
  }
  100% {
    transform: scale(0.85) translateZ(0);
    opacity: 0.4;
  }
}

/* Icon Glow Filter Effect */
@keyframes icon-glow {
  0% {
    transform: scale(1) translateZ(0);
    filter: drop-shadow(0 0 0px rgba(0, 210, 255, 0));
  }
  100% {
    transform: scale(1.12) translateZ(0);
    filter: drop-shadow(0 0 8px var(--atf-accent)) 
            drop-shadow(0 0 16px var(--atf-secondary));
  }
}

/* Typing Effect */
@keyframes typing {
  0% {
    width: 0;
  }
  40%, 75% {
    width: 13ch; /* Exact length of "Initialize..." */
  }
  100% {
    width: 0;
  }
}

/* Cursor Blink */
@keyframes blink-caret {
  from, to {
    border-color: transparent;
  }
  50% {
    border-color: var(--atf-semi-OffWhite);
  }
}