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

.app-splash-screen.is-hiding {
  opacity: 0;
  transform: scale(2.5);
  pointer-events: none;
  visibility: hidden;
}

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

/* --- 1. Top Bracket Pulse Loader ({}) --- */
.app-splash-screen .app-splash-screen__code-brackets {
  display: flex;
  gap: 0.5rem;
  color: var(--atf-OffWhite, #ffffff);
  font-weight: bold;
  font-size: 7rem;
  font-family: Consolas, Menlo, Monaco, monospace;
  opacity: 0.9;
  user-select: none;
  filter: drop-shadow(0 0 15px rgba(1, 76, 246, 0.4));
}

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

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

/* --- 2. Text & Icon Wrapper --- */
.app-splash-screen .sp-s-text {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--atf-font-jet, monospace);
  font-size: 1rem;
  font-weight: 200;
  color: var(--atf-semi-OffWhite, #e0e0e0);
}

/* Glowing Icon Animation */
.app-splash-screen .sp-s-text .glowing-icon {
  color: var(--atf-white, #ffffff);
  will-change: transform, text-shadow;
  animation: icon-glow 1.5s infinite alternate ease-in-out;
}

/* Typing Effect for Text */
.app-splash-screen .sp-s-text .typing-text {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  border-right: 2px solid var(--atf-semi-OffWhite, #e0e0e0);
  width: 0;
  will-change: width, border-color;
  animation:
    typing 2s steps(13, end) infinite,
    blink-caret 0.75s step-end infinite;
}

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

/* Brackets Pulse */
@keyframes splash-pulse {
  to {
    transform: scale(0.85);
    opacity: 0.5;
  }
}

/* Icon Glow Pulse */
@keyframes icon-glow {
  0% {
    transform: scale(1);
    text-shadow: none;
  }
  100% {
    text-shadow:
      0 0 18px var(--atf-accent, #00d2ff),
      0 0 30px var(--atf-secondary, #0072ff);
    transform: scale(1.15);
  }
}

/* Typing Effect */
@keyframes typing {
  0% {
    width: 0;
  }
  50%,
  80% {
    width: 100%;
  }
  100% {
    width: 0;
  }
}

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