/* ============================================================
   GHANA RAILWAY VISUALIZER
   PREMIUM CINEMATIC SPLASH SYSTEM
   CSS ONLY — NO LOGIC CHANGES
   ============================================================ */

.splash {
  position: fixed;
  inset: 0;
  z-index: 100;

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;

  background:
    radial-gradient(
      circle at 50% 45%,
      rgba(252, 209, 22, 0.075) 0%,
      rgba(0, 107, 63, 0.10) 18%,
      transparent 45%
    ),
    radial-gradient(
      circle at 20% 20%,
      rgba(0, 107, 63, 0.13),
      transparent 35%
    ),
    radial-gradient(
      circle at 80% 75%,
      rgba(206, 17, 38, 0.045),
      transparent 30%
    ),
    linear-gradient(
      135deg,
      #02070b 0%,
      #061018 45%,
      #07131c 100%
    );

  transition:
    opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0.9s ease;
}

/* ============================================================
   TECHNICAL GRID
   ============================================================ */

.splash::before {
  content: "";

  position: absolute;
  inset: 0;

  background-image:
    linear-gradient(
      rgba(252, 209, 22, 0.035) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(252, 209, 22, 0.035) 1px,
      transparent 1px
    );

  background-size: 42px 42px;

  mask-image:
    radial-gradient(
      ellipse at center,
      black 0%,
      rgba(0, 0, 0, 0.75) 38%,
      transparent 78%
    );

  -webkit-mask-image:
    radial-gradient(
      ellipse at center,
      black 0%,
      rgba(0, 0, 0, 0.75) 38%,
      transparent 78%
    );

  pointer-events: none;
}

/* cinematic light sweep */
.splash::after {
  content: "";

  position: absolute;

  width: 70vw;
  height: 70vw;

  max-width: 850px;
  max-height: 850px;

  left: 50%;
  top: 50%;

  transform: translate(-50%, -50%);

  border-radius: 50%;

  background:
    conic-gradient(
      from 0deg,
      transparent,
      rgba(252, 209, 22, 0.035),
      transparent 22%,
      rgba(0, 107, 63, 0.045),
      transparent 48%
    );

  animation:
    atmosphereSpin 18s linear infinite;

  pointer-events: none;
}

@keyframes atmosphereSpin {
  to {
    transform:
      translate(-50%, -50%)
      rotate(360deg);
  }
}

/* ============================================================
   CORNER HUD MARKINGS
   ============================================================ */

.splash-inner::before,
.splash-inner::after {
  content: "";

  position: fixed;

  width: 65px;
  height: 65px;

  opacity: 0.35;

  pointer-events: none;
}

.splash-inner::before {
  top: 28px;
  left: 28px;

  border-top: 1px solid rgba(252, 209, 22, 0.45);
  border-left: 1px solid rgba(252, 209, 22, 0.45);

  box-shadow:
    12px 12px 0 -11px rgba(252, 209, 22, 0.25);
}

.splash-inner::after {
  right: 28px;
  bottom: 28px;

  border-right: 1px solid rgba(252, 209, 22, 0.45);
  border-bottom: 1px solid rgba(252, 209, 22, 0.45);
}

/* ============================================================
   SPLASH STATE
   ============================================================ */

.splash.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.splash.has-error .splash-status {
  max-width: min(340px, 82vw);
  margin-right: auto;
  margin-left: auto;
  line-height: 1.6;
  color: rgba(244, 247, 246, 0.9);
  letter-spacing: 0.3px;
}

.splash.has-error .splash-status::before {
  flex: 0 0 5px;
  background: #ce1126;
  box-shadow: 0 0 8px rgba(206, 17, 38, 0.65);
  animation: none;
}

.splash.has-error .splash-progress {
  display: none;
}

.splash-retry {
  display: none;
  margin: 18px auto 0;
  padding: 10px 18px;
  border: 1px solid rgba(252, 209, 22, 0.55);
  border-radius: 6px;
  background: rgba(252, 209, 22, 0.12);
  color: #f5f8f7;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  cursor: pointer;
}

.splash.has-error .splash-retry {
  display: block;
}

/* ============================================================
   CONTENT
   ============================================================ */

.splash-inner {
  position: relative;
  z-index: 5;

  width: min(430px, 92vw);

  text-align: center;

  padding: 30px 24px;

  animation:
    splashEntrance 1.2s
    cubic-bezier(0.16, 1, 0.3, 1)
    both;
}

@keyframes splashEntrance {
  0% {
    opacity: 0;
    transform:
      translateY(22px)
      scale(0.94);
    filter: blur(8px);
  }

  65% {
    filter: blur(0);
  }

  100% {
    opacity: 1;
    transform:
      translateY(0)
      scale(1);
  }
}

/* ============================================================
   SEAL
   ============================================================ */

.splash-seal {
  position: relative;

  width: 108px;
  height: 108px;

  margin: 0 auto 29px;

  display: flex;
  align-items: center;
  justify-content: center;
}

/* large atmospheric aura */
.splash-seal::before {
  content: "";

  position: absolute;

  inset: -34px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(252, 209, 22, 0.15) 0%,
      rgba(252, 209, 22, 0.055) 32%,
      transparent 68%
    );

  filter: blur(4px);

  animation:
    sealAura 3s ease-in-out infinite;
}

@keyframes sealAura {
  0%,
  100% {
    transform: scale(0.92);
    opacity: 0.65;
  }

  50% {
    transform: scale(1.08);
    opacity: 1;
  }
}

/* secondary orbital ring */
.splash-seal::after {
  content: "";

  position: absolute;

  inset: -19px;

  border-radius: 50%;

  border: 1px solid rgba(252, 209, 22, 0.10);

  border-left-color: rgba(252, 209, 22, 0.55);
  border-bottom-color: transparent;

  animation:
    counterRotate 7s linear infinite;
}

@keyframes counterRotate {
  to {
    transform: rotate(-360deg);
  }
}

.splash-seal-ring {
  position: absolute;

  inset: -14px;

  border-radius: 50%;

  border: 1px solid transparent;

  border-top-color: #fcd116;
  border-right-color: rgba(252, 209, 22, 0.65);
  border-bottom-color: rgba(0, 107, 63, 0.4);

  box-shadow:
    0 0 15px rgba(252, 209, 22, 0.08);

  animation:
    rotateRing 2.8s linear infinite;
}

/* orbiting signal */
.splash-seal-ring::after {
  content: "";

  position: absolute;

  top: -3px;
  left: 50%;

  width: 6px;
  height: 6px;

  border-radius: 50%;

  background: #ffe45c;

  box-shadow:
    0 0 6px #fcd116,
    0 0 18px rgba(252, 209, 22, 0.75);

  transform: translateX(-50%);
}

.splash-seal-logo {
  position: relative;
  z-index: 3;

  width: 100%;
  height: 100%;

  border-radius: 50%;

  border: 2px solid #fcd116;

  background: #fff;

  object-fit: cover;

  box-shadow:
    0 0 0 5px rgba(252, 209, 22, 0.045),
    0 0 28px rgba(252, 209, 22, 0.26),
    0 15px 40px rgba(0, 0, 0, 0.55);
}

@keyframes rotateRing {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* ============================================================
   TITLE
   ============================================================ */

.splash-title {
  position: relative;

  font-family:
    "Inter",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  font-size: clamp(22px, 6vw, 29px);

  font-weight: 900;

  letter-spacing: 5px;

  line-height: 1.05;

  margin: 0;

  color: #f8faf9;

  text-transform: uppercase;

  text-shadow:
    0 3px 25px rgba(0, 0, 0, 0.65);
}

/* animated gold sweep */
.splash-title::after {
  content: "";

  display: block;

  width: 65px;
  height: 2px;

  margin: 15px auto 0;

  border-radius: 999px;

  background:
    linear-gradient(
      90deg,
      transparent,
      #fcd116 35%,
      #ffe45c 50%,
      #fcd116 65%,
      transparent
    );

  background-size: 200% 100%;

  animation:
    titleSweep 2.4s ease-in-out infinite;

  box-shadow:
    0 0 12px rgba(252, 209, 22, 0.4);
}

@keyframes titleSweep {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}

/* ============================================================
   SUBTITLE
   ============================================================ */

.splash-subtitle {
  font-size: 9px;

  font-weight: 650;

  letter-spacing: 2.2px;

  text-transform: uppercase;

  color: rgba(244, 247, 246, 0.48);

  margin: 13px 0 28px;
}

/* ============================================================
   RAILWAY ROUTE
   ============================================================ */

.splash-route {
  position: relative;

  width: 100%;
  height: 44px;

  margin-bottom: 21px;

  overflow: visible;

  filter:
    drop-shadow(
      0 0 7px
      rgba(252, 209, 22, 0.20)
    );
}

.splash-route path {
  fill: none;

  stroke: #fcd116;

  stroke-width: 1.6;

  stroke-linecap: round;

  stroke-dasharray: 400;

  stroke-dashoffset: 400;

  animation:
    drawRoute 2.8s
    cubic-bezier(0.4, 0, 0.2, 1)
    infinite;
}

@keyframes drawRoute {
  0% {
    stroke-dashoffset: 400;
    opacity: 0.15;
  }

  12% {
    opacity: 0.85;
  }

  55% {
    stroke-dashoffset: 0;
    opacity: 1;
  }

  72% {
    opacity: 1;
  }

  100% {
    stroke-dashoffset: -400;
    opacity: 0.15;
  }
}

/* ============================================================
   STATUS
   ============================================================ */

.splash-status {
  display: flex;

  align-items: center;
  justify-content: center;

  gap: 8px;

  min-height: 15px;

  margin: 0 0 14px;

  font-size: 9px;

  font-weight: 600;

  color: rgba(244, 247, 246, 0.52);

  letter-spacing: 0.8px;

  text-transform: uppercase;

  transition: opacity 0.3s ease;
}

.splash-status::before {
  content: "";

  width: 5px;
  height: 5px;

  border-radius: 50%;

  background: #00a86b;

  box-shadow:
    0 0 6px rgba(0, 168, 107, 0.8),
    0 0 14px rgba(0, 168, 107, 0.3);

  animation:
    statusPulse 1.4s ease-in-out infinite;
}

@keyframes statusPulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.35;
    transform: scale(0.75);
  }
}

/* ============================================================
   PROGRESS
   ============================================================ */

.splash-progress {
  position: relative;

  width: min(250px, 72vw);

  height: 3px;

  margin: 0 auto;

  border-radius: 999px;

  background:
    rgba(255, 255, 255, 0.075);

  overflow: hidden;

  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, 0.5);
}

.splash-progress-bar {
  position: relative;

  height: 100%;

  width: 0%;

  border-radius: 999px;

  background:
    linear-gradient(
      90deg,
      #006b3f 0%,
      #00a86b 30%,
      #fcd116 80%,
      #ffe45c 100%
    );

  background-size: 180% 100%;

  animation:
    progressGlow 2s linear infinite;

  box-shadow:
    0 0 12px rgba(252, 209, 22, 0.25);

  transition:
    width 0.4s ease;
}

.splash-progress-bar::after {
  content: "";

  position: absolute;

  top: 0;
  right: 0;

  width: 45px;
  height: 100%;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.85)
    );

  filter: blur(2px);
}

@keyframes progressGlow {
  from {
    background-position: 0% 0;
  }

  to {
    background-position: 180% 0;
  }
}

/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 480px) {
  .splash-inner {
    padding: 20px;
  }

  .splash-seal {
    width: 88px;
    height: 88px;

    margin-bottom: 25px;
  }

  .splash-title {
    font-size: 20px;
    letter-spacing: 3.7px;
  }

  .splash-subtitle {
    font-size: 8px;
    letter-spacing: 1.5px;
  }

  .splash-route {
    height: 35px;
  }

  .splash-inner::before {
    top: 18px;
    left: 18px;
  }

  .splash-inner::after {
    right: 18px;
    bottom: 18px;
  }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .splash::after,
  .splash-inner,
  .splash-seal::before,
  .splash-seal::after,
  .splash-seal-ring,
  .splash-title::after,
  .splash-route path,
  .splash-status::before,
  .splash-progress-bar {
    animation: none;
  }

  .splash-route path {
    stroke-dashoffset: 0;
  }
}