/* ============================================================
   Trump Call — animated intro / splash overlay.
   Shows on cold load (web + native), reveals the logo, then fades
   into the app. Pure CSS animation (no GIF) → crisp on every DPI.
   ============================================================ */
#intro {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  /* Matches the native splash background (navy + soft purple center glow). */
  background:
    radial-gradient(120% 90% at 50% 42%, #1b1560 0%, #12123a 34%, #0b1020 68%);
  overflow: hidden;
  opacity: 1;
  transition: opacity 0.55s ease;
  -webkit-user-select: none;
  user-select: none;
}
#intro.intro-hide {
  opacity: 0;
  pointer-events: none;
}

/* Faint drifting suit glyphs in the background for depth. */
#intro .intro-suit {
  position: absolute;
  font-size: 42px;
  opacity: 0;
  filter: blur(0.4px);
  animation: introFloat 6s ease-in-out infinite;
  will-change: transform, opacity;
}
#intro .intro-suit.s1 { left: 12%;  top: 20%; color: #7c5cff; animation-delay: 0.2s; }
#intro .intro-suit.s2 { right: 14%; top: 26%; color: #f43f5e; animation-delay: 1.1s; font-size: 34px; }
#intro .intro-suit.s3 { left: 18%;  bottom: 22%; color: #10b981; animation-delay: 0.7s; font-size: 38px; }
#intro .intro-suit.s4 { right: 16%; bottom: 26%; color: #f59e0b; animation-delay: 1.6s; }

/* --- Logo (uses the app icon, radial-masked so its square box dissolves
       into the background → looks like a floating glowing emblem). --- */
#intro .intro-logo-wrap {
  position: relative;
  display: grid;
  place-items: center;
  animation: introPop 0.9s cubic-bezier(0.2, 0.9, 0.25, 1.15) both;
}
#intro .intro-glow {
  position: absolute;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(124, 92, 255, 0.55) 0%, rgba(124, 92, 255, 0) 65%);
  filter: blur(6px);
  animation: introPulse 2.2s ease-in-out infinite;
}
#intro .intro-logo {
  position: relative;
  width: 172px;
  height: 172px;
  object-fit: contain;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 56%, rgba(0, 0, 0, 0) 74%);
  mask-image: radial-gradient(circle at 50% 50%, #000 56%, rgba(0, 0, 0, 0) 74%);
  animation: introFloatLogo 3.2s ease-in-out 0.6s infinite;
}

/* --- Title + subtitle --- */
#intro .intro-title {
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 800;
  font-size: 30px;
  letter-spacing: 0.5px;
  margin: 0;
  background: linear-gradient(90deg, #cbd5ff, #ffffff 40%, #c4b5ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 2px 18px rgba(124, 92, 255, 0.35);
  animation: introUp 0.7s ease 0.35s both;
}
#intro .intro-sub {
  font-family: "Hind Siliguri", system-ui, sans-serif;
  font-weight: 600;
  font-size: 15px;
  margin: -12px 0 0;
  color: #9aa3d6;
  animation: introUp 0.7s ease 0.5s both;
}

/* --- Loading: four bouncing suit dots in brand colors --- */
#intro .intro-load {
  display: flex;
  gap: 12px;
  margin-top: 8px;
  animation: introUp 0.7s ease 0.65s both;
}
#intro .intro-load span {
  font-size: 20px;
  line-height: 1;
  animation: introBounce 1s ease-in-out infinite;
}
#intro .intro-load span:nth-child(1) { color: #7c5cff; animation-delay: 0s; }
#intro .intro-load span:nth-child(2) { color: #f43f5e; animation-delay: 0.15s; }
#intro .intro-load span:nth-child(3) { color: #f59e0b; animation-delay: 0.3s; }
#intro .intro-load span:nth-child(4) { color: #10b981; animation-delay: 0.45s; }

@keyframes introPop {
  0%   { transform: scale(0.6); opacity: 0; }
  60%  { opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes introPulse {
  0%, 100% { transform: scale(0.92); opacity: 0.75; }
  50%      { transform: scale(1.08); opacity: 1; }
}
@keyframes introFloatLogo {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
@keyframes introUp {
  from { transform: translateY(14px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
@keyframes introBounce {
  0%, 100% { transform: translateY(0); opacity: 0.85; }
  50%      { transform: translateY(-10px); opacity: 1; }
}
@keyframes introFloat {
  0%, 100% { transform: translateY(0) rotate(-6deg); opacity: 0; }
  25%      { opacity: 0.5; }
  50%      { transform: translateY(-22px) rotate(6deg); opacity: 0.7; }
  75%      { opacity: 0.4; }
}

/* Lite mode / reduced motion: keep it calm (no float/particles), still fades. */
html.lite #intro .intro-suit,
html.lite #intro .intro-glow { animation: none; }
html.lite #intro .intro-logo { animation: none; }
@media (prefers-reduced-motion: reduce) {
  #intro .intro-suit,
  #intro .intro-glow,
  #intro .intro-logo,
  #intro .intro-load span { animation: none !important; }
}