/* Splash Screen Styles */
.splash-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, #050b16, #0a1628 50%, #050b16);
  color: var(--paper);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  text-align: center;
  font-family: inherit;
  transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
  visibility: visible;
  opacity: 1;
}

.splash-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(2px 2px at 20% 30%, white, transparent),
    radial-gradient(2px 2px at 60% 70%, rgba(255,255,255,0.8), transparent),
    radial-gradient(1px 1px at 50% 50%, rgba(255,255,255,0.6), transparent),
    radial-gradient(1px 1px at 80% 10%, rgba(255,255,255,0.7), transparent),
    radial-gradient(2px 2px at 90% 60%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 33% 80%, rgba(255,255,255,0.6), transparent),
    radial-gradient(1px 1px at 15% 90%, rgba(255,255,255,0.4), transparent);
  background-size: 200% 200%, 150% 150%, 300% 300%, 250% 250%, 180% 180%, 220% 220%, 280% 280%;
  background-position: 0% 0%, 20% 20%, 40% 40%, 60% 60%, 80% 80%, 10% 90%, 70% 30%;
  pointer-events: none;
  z-index: -1;
  opacity: 0.6;
  animation: twinkle 120s ease-in-out infinite;
}

.splash-screen[aria-hidden="true"] {
  opacity: 0;
  visibility: hidden;
}

.splash-content {
  max-width: 500px;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.splash-logo {
  /* Ensure left-to-right order visually even on RTL pages */
  direction: ltr;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: nowrap;
  position: relative;
  margin-bottom: 2rem;
}

.splash-logo img {
  /* Responsive so two logos fit on small screens */
  width: clamp(120px, 22vw, 160px);
  height: auto;
  filter: drop-shadow(0 0 10px rgba(0, 212, 232, 0.3)) drop-shadow(0 2px 8px rgba(0, 0, 0, 0.2));
}

/* Vertical divider between SPL (left) and UPU (right) */
.splash-logo::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 1px;
  height: clamp(28px, 10vw, 80px);
  background: rgba(0, 212, 232, 0.5);
  box-shadow: 0 0 8px rgba(0, 212, 232, 0.4);
  pointer-events: none;
}

.splash-text-container {
  margin-bottom: 2.5rem;
}

.splash-text h1 {
  font-size: clamp(24px, 3.4vw, 36px);
  font-weight: 900;
  margin: 0;
  color: var(--brand-200);
  text-shadow: 0 0 20px rgba(0, 212, 232, 0.5);
}

.splash-text .hashtag {
  font-size: 1.2rem;
  font-style: normal;
  color: var(--brand-300);
  margin: 0.5rem 0;
  opacity: 0.9;
}

.splash-text .tagline {
  font-size: 1.5rem;
  font-weight: 500;
  margin: 0;
  color: var(--paper);
}

.splash-button {
  -webkit-tap-highlight-color: transparent;
  appearance: none;
  border: 2px solid transparent;
  border-radius: 14px;
  padding: 16px 24px;
  font-weight: 900;
  cursor: pointer;
  transition: 0.2s ease;
  width: 100%;
  max-width: 320px;
  font-size: 1.1rem;
  text-transform: uppercase;
  background: var(--brand);
  color: var(--ink-900);
  box-shadow: 0 0 30px rgba(0, 212, 232, 0.4);
}

.splash-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 40px rgba(0, 212, 232, 0.6), 0 5px 20px rgba(0, 0, 0, 0.3);
}

.splash-button span[lang="ar"] {
  display: none;
}

html[lang="ar"] .splash-button span[lang="ar"] {
  display: inline;
}

html[lang="ar"] .splash-button span[lang="en"] {
  display: none;
}

.splash-text[lang="ar"] {
  display: none;
}

html[lang="ar"] .splash-text[lang="ar"] {
  display: block;
}

html[lang="ar"] .splash-text[lang="en"] {
  display: none;
}