/* ==========================================================================
   Zonisef — Splash screen (splash.php, assets/js/splash.js)
   Same colours as the landing page (landing.css). Every element's normal state is its final, visible state: the
   hidden starting states and the animations are only used when splash.js runs and motion is not reduced, so with
   reduced motion, or if the script never runs, the page is shown complete and still.
   ========================================================================== */

:root {
  --sp-navy: #0B2854;
  --sp-navy-deep: #071E41;
  --sp-navy-ink: #041430;
  --sp-blue: #1565D8;
  --sp-sky: #3FA9F5;
  --sp-teal: #16C7B7;
  --sp-teal-light: #5EE6D8;
  --sp-text-soft: #B9CBE3;
  --sp-ease: cubic-bezier(.16, 1, .3, 1);
  --sp-emblem: clamp(128px, min(56vw, 34vh), 300px);
  --sp-load-h: 104px;
}

html,
body {
  height: 100%;
  margin: 0;
  background: var(--sp-navy-deep);
}

body {
  overflow: hidden;
  color: #FFFFFF;
  font-family: Poppins, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

[hidden] { display: none !important; }

.sp-stage {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  overflow: hidden;
  background: radial-gradient(130% 100% at 50% 40%, #0F3468 0%, var(--sp-navy) 40%, var(--sp-navy-deep) 72%, var(--sp-navy-ink) 100%);
}

/* Light-blue and teal glows over the navy */
.sp-sky {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background:
    radial-gradient(60% 50% at 16% 10%, rgba(63, 169, 245, .20), rgba(63, 169, 245, 0) 70%),
    radial-gradient(55% 45% at 86% 90%, rgba(22, 199, 183, .14), rgba(22, 199, 183, 0) 70%);
  pointer-events: none;
}

/* ── The map (drawn by splash.js) and its pin ───────────────── */
.sp-map {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 1;
  transform-origin: 50% 46%;
}
.sp-canvas {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.sp-pin {
  position: absolute;
  left: 0; top: 0;
  width: 0; height: 0;
  visibility: hidden;   /* until splash.js has put it on the Town Hall */
}
.sp-pin.sp-pin-in { visibility: visible; }
.sp-pin-icon {
  position: absolute;
  left: -14px; top: -36px;
  width: 28px; height: 36.4px;
  overflow: visible;
  transform-origin: 50% 100%;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .4));
}
.sp-pin-shadow {
  position: absolute;
  left: -8px; top: -3px;
  width: 16px; height: 6px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .5);
  opacity: .45;
}
.sp-pin-pulse {
  position: absolute;
  left: -20px; top: -7px;
  width: 40px; height: 14px;
  box-sizing: border-box;
  border: 1.5px solid rgba(94, 230, 216, .9);
  border-radius: 50%;
  opacity: 0;   /* only seen while it spreads out (animation below) */
}
.sp-pin-label {
  position: absolute;
  left: 22px; top: -42px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  white-space: nowrap;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .75);
}
.sp-pin-left .sp-pin-label { left: auto; right: 22px; align-items: flex-end; }
.sp-pin-quiet .sp-pin-label { display: none; }   /* it would sit under the emblem */
.sp-pin-name {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #DFF9F6;
}
.sp-pin-coords {
  font-size: 10px;
  letter-spacing: .06em;
  color: rgba(94, 230, 216, .9);
  font-variant-numeric: tabular-nums;
}

/* Darkens the middle behind the emblem and the name */
.sp-veil {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 1;
  background: radial-gradient(ellipse 58% 62% at 50% 44%, rgba(4, 16, 40, .72) 0%, rgba(4, 16, 40, .4) 55%, rgba(4, 16, 40, 0) 100%);
  pointer-events: none;
}

/* ── Emblem, name and subtitle ──────────────────────────────── */
.sp-center {
  position: absolute;
  top: 0; right: 0; left: 0;
  bottom: var(--sp-load-h);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 56px 16px 8px;
  text-align: center;
}

.sp-emblem {
  position: relative;
  flex: none;
  width: var(--sp-emblem);
  height: var(--sp-emblem);
}
.sp-emblem::before {   /* the badge's shadow */
  content: "";
  position: absolute;
  top: 2%; right: 2%; bottom: 2%; left: 2%;
  z-index: 1;
  border-radius: 50%;
  box-shadow: 0 22px 48px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .05);
}
.sp-halo {
  position: absolute;
  top: -30%; left: -30%;
  width: 160%; height: 160%;
  z-index: 0;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(94, 230, 216, .22), rgba(21, 101, 216, .13) 55%, rgba(21, 101, 216, 0) 100%);
  pointer-events: none;
}
.sp-ring {
  position: absolute;
  top: -5%; left: -5%;
  width: 110%; height: 110%;
  z-index: 2;
  overflow: visible;
}
.sp-ring circle { fill: none; }
.sp-ring-track { stroke: rgba(94, 230, 216, .2); stroke-width: .35; }
.sp-ring-trace {
  stroke: var(--sp-teal-light);
  stroke-width: .55;
  stroke-linecap: round;
  stroke-dasharray: 304.8;   /* the circle's length (2 x pi x 48.5) */
  stroke-dashoffset: 0;
  opacity: .7;
}
.sp-emblem picture {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 3;
  display: block;
}
.sp-emblem-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;   /* always square: the emblem is never stretched */
}
.sp-sweep {   /* the cyan light passing over the badge, only inside its circle */
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 4;
  overflow: hidden;
  border-radius: 50%;
  -webkit-clip-path: circle(48.2% at 50% 50%);
  clip-path: circle(48.2% at 50% 50%);
  pointer-events: none;
}
.sp-sweep::before {
  content: "";
  position: absolute;
  top: -20%; bottom: -20%; left: 0;
  width: 45%;
  background: linear-gradient(100deg, rgba(160, 255, 246, 0) 0%, rgba(160, 255, 246, 0) 25%, rgba(200, 255, 250, .45) 50%, rgba(160, 255, 246, 0) 75%, rgba(160, 255, 246, 0) 100%);
  mix-blend-mode: screen;
  transform: translateX(-100%);
}
.sp-no-emblem .sp-emblem { display: none; }

.sp-title {
  margin: clamp(12px, 2.4vh, 26px) 0 0;
  padding-left: .3em;   /* balances the space after the last letter */
  font-size: clamp(24px, calc(1.6vw + 1.6vh + 8px), 46px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: .3em;
  text-transform: uppercase;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .35);
}
.sp-rule {
  display: block;
  flex: none;
  width: 200px;
  max-width: 46vw;
  height: 1px;
  margin: clamp(10px, 1.6vh, 16px) auto;
  background: linear-gradient(90deg, rgba(94, 230, 216, 0), rgba(94, 230, 216, .9), rgba(94, 230, 216, 0));
}
.sp-sub {
  max-width: 32em;
  margin: 0;
  font-size: clamp(13px, calc(.45vw + 10.5px), 17px);
  font-weight: 500;
  line-height: 1.5;
  color: var(--sp-text-soft);
  text-wrap: balance;
}
.sp-org {
  margin: clamp(8px, 1.4vh, 14px) 0 0;
  padding-left: .22em;
  font-size: clamp(9.5px, calc(.25vw + 8.5px), 11.5px);
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--sp-teal-light);
  opacity: .85;
  text-wrap: balance;
}

/* ── Loading progress ──────────────────────────────────────── */
.sp-load {
  position: absolute;
  left: 50%;
  bottom: 28px;
  bottom: max(28px, calc(env(safe-area-inset-bottom) + 16px));
  z-index: 3;
  width: 380px;
  max-width: calc(100% - 48px);
  transform: translateX(-50%);
}
.sp-bar {
  height: 3px;
  overflow: hidden;
  border-radius: 3px;
  background: rgba(255, 255, 255, .12);
}
.sp-bar-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--sp-teal), var(--sp-sky));
  transform: scaleX(0);
  transform-origin: 0 50%;
}
.sp-status {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
  font-size: 12px;
  letter-spacing: .02em;
  color: rgba(214, 226, 243, .8);
}
.sp-pct {
  flex: none;
  color: rgba(214, 226, 243, .6);
  font-variant-numeric: tabular-nums;
}
.sp-error { margin-top: 12px; text-align: center; }
.sp-error-msg { margin: 0 0 10px; font-size: 13px; line-height: 1.45; color: #FFD79A; }
.sp-error-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.sp-err .sp-bar-fill { background: #F5A524; }

.sp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 18px;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 999px;
  background: transparent;
  color: #FFFFFF;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.sp-btn:hover { border-color: rgba(94, 230, 216, .7); }
.sp-btn-primary { border-color: transparent; background: linear-gradient(90deg, var(--sp-teal), var(--sp-blue)); }

.sp-skip {
  position: absolute;
  top: 16px;
  top: max(16px, env(safe-area-inset-top));
  right: 16px;
  right: max(16px, env(safe-area-inset-right));
  z-index: 4;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 999px;
  background: rgba(7, 30, 65, .45);
  color: rgba(232, 240, 252, .85);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: color .2s ease, border-color .2s ease, background-color .2s ease;
}
.sp-skip:hover { color: #FFFFFF; border-color: rgba(94, 230, 216, .6); background: rgba(7, 30, 65, .7); }
.sp-skip:focus-visible,
.sp-btn:focus-visible { outline: 2px solid var(--sp-teal-light); outline-offset: 3px; }

/* Short screens (phones held sideways) */
@media (max-height: 520px) {
  :root { --sp-load-h: 78px; --sp-emblem: clamp(96px, 30vh, 200px); }
  .sp-center { padding-top: 12px; }
  .sp-load { bottom: 14px; bottom: max(14px, calc(env(safe-area-inset-bottom) + 8px)); }
  .sp-status { margin-top: 6px; }
}

/* ── The animation (only with motion, and only once splash.js runs) ── */
@media (prefers-reduced-motion: no-preference) {
  .sp-js .sp-sky,
  .sp-js .sp-veil,
  .sp-js .sp-load,
  .sp-js .sp-skip,
  .sp-js .sp-emblem,
  .sp-js .sp-title,
  .sp-js .sp-rule,
  .sp-js .sp-sub,
  .sp-js .sp-org { opacity: 0; }
  .sp-js .sp-map { transform: scale(1.05); }
  .sp-bar-fill { transition: transform .3s ease-out; }

  .sp-on .sp-sky { opacity: 1; transition: opacity 1.4s ease; }
  .sp-on .sp-map { transform: scale(1); transition: transform 7s cubic-bezier(.2, .6, .2, 1), opacity .9s ease; }
  .sp-on .sp-load { opacity: 1; transition: opacity .6s ease .25s; }
  .sp-on .sp-skip { opacity: 1; transition: opacity .6s ease .25s, color .2s ease, border-color .2s ease, background-color .2s ease; }

  .sp-pin-in .sp-pin-icon { animation: spDrop .62s cubic-bezier(.33, 0, .2, 1) both; }
  .sp-pin-in .sp-pin-shadow { animation: spShadow .62s ease-out both; }
  .sp-pin-in .sp-pin-pulse { animation: spPulse 1.3s ease-out .32s both; }
  .sp-pin-in .sp-pin-pulse-2 { animation-delay: .62s; }
  .sp-pin-in .sp-pin-label { animation: spFade .5s ease-out .55s both; }

  .sp-reveal .sp-map { opacity: .45; }
  .sp-reveal .sp-veil { opacity: 1; transition: opacity 1s ease; }
  .sp-reveal .sp-emblem { animation: spEmblemIn .9s var(--sp-ease) both; }
  .sp-reveal .sp-halo { animation: spHalo 1.6s ease-out both; }
  .sp-reveal .sp-ring-track { animation: spFade .8s ease-out .1s both; }
  .sp-reveal .sp-ring-trace { animation: spTrace 1.15s cubic-bezier(.65, 0, .35, 1) .15s both; }
  .sp-reveal .sp-sweep::before { animation: spSweep 1s cubic-bezier(.45, 0, .25, 1) .55s both; }
  .sp-reveal .sp-title { animation: spRise .8s var(--sp-ease) .35s both; }
  .sp-reveal .sp-rule { animation: spRule .7s var(--sp-ease) .5s both; }
  .sp-reveal .sp-sub { animation: spRise .8s var(--sp-ease) .55s both; }
  .sp-reveal .sp-org { animation: spRise .8s var(--sp-ease) .7s both; }

  /* Going on to the next page */
  .sp-leave .sp-center { opacity: 0; transform: scale(1.04); transition: opacity .42s ease, transform .42s ease; }
  .sp-leave .sp-map { opacity: 0; transition: transform 7s cubic-bezier(.2, .6, .2, 1), opacity .42s ease; }
  .sp-leave .sp-sky,
  .sp-leave .sp-veil,
  .sp-leave .sp-load,
  .sp-leave .sp-skip { opacity: 0; transition: opacity .42s ease; }
}

@keyframes spFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes spRise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes spRule { from { opacity: 0; transform: scaleX(0); } to { opacity: 1; transform: none; } }
@keyframes spEmblemIn { from { opacity: 0; transform: scale(.86); } to { opacity: 1; transform: none; } }
@keyframes spHalo { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } }
@keyframes spTrace {
  0% { stroke-dashoffset: 304.8; opacity: 1; }
  80% { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: .7; }
}
@keyframes spSweep { from { transform: translateX(-100%); } to { transform: translateX(225%); } }
@keyframes spDrop {
  0% { opacity: 0; transform: translateY(-64px); }
  50% { opacity: 1; transform: translateY(0) scaleY(.9); }
  68% { transform: translateY(-6px); }
  84% { transform: translateY(0); }
  100% { opacity: 1; transform: none; }
}
@keyframes spShadow {
  0% { opacity: 0; transform: scale(.3); }
  50% { opacity: .55; transform: scale(1.15); }
  100% { opacity: .45; transform: none; }
}
@keyframes spPulse { from { opacity: .85; transform: scale(.25); } to { opacity: 0; transform: scale(2.8); } }