/* =================================================================
   GN Splash Screen  —  PWA opening animation for Guianeo
   Edit the Custom Properties below to change colors / timings.
   ================================================================= */

/* ── Custom Properties (configuráveis) ───────────────────────── */
:root {
  --gns-bg-a:        #0f172a;
  --gns-bg-b:        #1e3a8a;
  --gns-bg-c:        #1e1b4b;
  --gns-pin-a:       #60a5fa;
  --gns-pin-b:       #818cf8;
  --gns-glow-clr:    rgba(99, 102, 241, 0.42);
  --gns-route-clr:   rgba(147, 197, 253, 0.65);
  --gns-route-glow:  rgba(147, 197, 253, 0.9);
  --gns-slogan-clr:  rgba(255, 255, 255, 0.5);

  --gns-dur-pin:     0.48s;
  --gns-dur-shimmer: 0.5s;
  --gns-dur-route:   0.58s;
  --gns-dur-icon:    0.36s;
  --gns-dur-search:  0.38s;
  --gns-dur-word:    0.3s;

  --gns-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --gns-ease-out:    cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ── Prevent scroll while splash is active ───────────────────── */
html.gns-active { overflow: hidden; }
html.gns-active body { overflow: hidden; height: 100%; }

/* ── Overlay ─────────────────────────────────────────────────── */
#gn-splash {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(
    155deg,
    var(--gns-bg-a)  0%,
    var(--gns-bg-b) 55%,
    var(--gns-bg-c) 100%
  );
  overflow: hidden;
  will-change: opacity;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
}

/* ── Background particles ────────────────────────────────────── */
.gns-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.gns-particle {
  position: absolute;
  border-radius: 50%;
  will-change: transform;
  opacity: 0;
  transition: opacity 0.6s ease-out;
  animation: gns-particle-float var(--dur, 7s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}
.gns-particles.gns-run .gns-particle { opacity: 1; }

@keyframes gns-particle-float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%       { transform: translate(var(--dx1,  12px), var(--dy1, -18px)) scale(1.06); }
  66%       { transform: translate(var(--dx2, -10px), var(--dy2,  12px)) scale(0.94); }
}

/* ── Stage ───────────────────────────────────────────────────── */
.gns-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 500px;
  padding: 0 1.5rem;
  user-select: none;
  -webkit-user-select: none;
}

/* ── Logo pin wrap (holds glow + pin + shimmer) ──────────────── */
.gns-pin-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.75rem;
  will-change: transform;
}
.gns-pin-wrap.gns-breathe {
  animation: gns-breathe 3.6s ease-in-out infinite;
}
@keyframes gns-breathe {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.032); }
}

/* Ambient glow ring */
.gns-glow {
  position: absolute;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--gns-glow-clr) 0%, transparent 70%);
  opacity: 0;
  transform: scale(0.4);
  pointer-events: none;
  will-change: transform, opacity;
}
.gns-glow.gns-anim {
  animation: gns-glow-in 1.3s var(--gns-ease-out) forwards;
}
@keyframes gns-glow-in {
  0%   { opacity: 0; transform: scale(0.4); }
  35%  { opacity: 0.95; transform: scale(1.05); }
  100% { opacity: 0.3; transform: scale(1.5); }
}

/* Pin SVG container */
.gns-pin {
  position: relative;
  z-index: 1;
  width: 72px;
  height: 96px;
  opacity: 0;
  transform: scale(0.4) translateY(28px);
  will-change: transform, opacity;
  filter: drop-shadow(0 8px 24px rgba(14, 30, 80, 0.7));
}
.gns-pin.gns-anim {
  animation: gns-pin-in var(--gns-dur-pin) var(--gns-ease-spring) forwards;
}
@keyframes gns-pin-in {
  0%   { opacity: 0; transform: scale(0.4) translateY(28px); }
  55%  { opacity: 1; transform: scale(1.09) translateY(-7px); }
  75%  { transform: scale(0.96) translateY(4px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
.gns-pin svg { width: 100%; height: 100%; display: block; }

/* Shimmer sweep */
.gns-shimmer {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%;
  overflow: hidden;
  pointer-events: none;
}
.gns-shimmer::after {
  content: '';
  position: absolute;
  top: -10%; left: -80%;
  width: 55%; height: 120%;
  background: linear-gradient(
    95deg,
    transparent 0%,
    rgba(255, 255, 255, 0.5) 50%,
    transparent 100%
  );
  transform: skewX(-18deg);
}
.gns-shimmer.gns-anim::after {
  animation: gns-shimmer var(--gns-dur-shimmer) ease-out forwards;
}
@keyframes gns-shimmer {
  from { left: -80%; }
  to   { left: 140%; }
}

/* ── Route wrap ──────────────────────────────────────────────── */
.gns-route-wrap {
  position: relative;
  width: 100%;
  transition: opacity 0.28s ease-out, transform 0.28s ease-out;
  margin-bottom: 0;
}
.gns-route-wrap.gns-fade-out {
  opacity: 0;
  transform: scaleY(0.85);
  pointer-events: none;
}
.gns-route-svg {
  width: 100%;
  height: auto;
  overflow: visible;
  display: block;
}
.gns-route-path {
  fill: none;
  stroke: var(--gns-route-clr);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 6px var(--gns-route-glow));
  /* stroke-dasharray / stroke-dashoffset set by JS */
}
.gns-route-path.gns-anim {
  animation: gns-draw-route var(--gns-dur-route) var(--gns-ease-out) forwards;
}
@keyframes gns-draw-route {
  to { stroke-dashoffset: 0; }
}

/* Traveling glow dot */
.gns-dot {
  fill: #bfdbfe;
  filter: drop-shadow(0 0 5px rgba(147, 197, 253, 1));
  opacity: 0;
}

/* ── Icons layer (absolute container inside overlay) ─────────── */
.gns-icons-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
}

/* ── Icon nodes ──────────────────────────────────────────────── */
.gns-icon {
  position: absolute;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.11);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1.5px solid rgba(255, 255, 255, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.88);
  font-size: 12px;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.15);
  will-change: transform, opacity;
}
/* Combined: pop-in then float forever. JS sets per-icon animation-delay. */
.gns-icon.gns-anim {
  animation:
    gns-icon-pop   var(--gns-dur-icon) var(--gns-ease-spring) forwards,
    gns-icon-float 2.8s ease-in-out var(--gns-dur-icon) infinite;
}
@keyframes gns-icon-pop {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.15); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes gns-icon-float {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50%       { transform: translate(-50%, calc(-50% - 5px)) scale(1); }
}

/* ── Search bar morph ────────────────────────────────────────── */
.gns-search {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1.5rem;
  background: rgba(255, 255, 255, 0.09);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1.5px solid rgba(255, 255, 255, 0.18);
  border-radius: 9999px;
  color: rgba(255, 255, 255, 0.85);
  font-size: clamp(0.875rem, 2.5vw, 0.9375rem);
  font-weight: 500;
  white-space: nowrap;
  width: min(300px, 82vw);
  margin: 0.5rem auto 0;
  opacity: 0;
  transform: scaleX(0.12);
  transform-origin: center;
  will-change: transform, opacity;
}
.gns-search.gns-anim {
  animation: gns-search-morph var(--gns-dur-search) cubic-bezier(0.34, 1.2, 0.64, 1) forwards;
}
@keyframes gns-search-morph {
  from { opacity: 0; transform: scaleX(0.12); }
  to   { opacity: 1; transform: scaleX(1); }
}
.gns-search i {
  color: rgba(147, 197, 253, 0.9);
  font-size: 0.9375rem;
  flex-shrink: 0;
}
.gns-search span { color: rgba(255, 255, 255, 0.5); }

/* ── Slogan ──────────────────────────────────────────────────── */
.gns-slogan {
  margin-top: 1.375rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.gns-slogan-word {
  font-size: clamp(0.9375rem, 2.8vw, 1.0625rem);
  font-weight: 700;
  color: var(--gns-slogan-clr);
  letter-spacing: 0.01em;
  opacity: 0;
  transform: translateY(13px);
  will-change: transform, opacity;
}
.gns-slogan-word.gns-anim {
  animation: gns-word-in var(--gns-dur-word) var(--gns-ease-out) forwards;
}
@keyframes gns-word-in {
  to { opacity: 1; transform: translateY(0); }
}

/* ── prefers-reduced-motion ──────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  #gn-splash *,
  #gn-splash *::before,
  #gn-splash *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .gns-pin {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
  .gns-slogan-word { opacity: 1 !important; transform: none !important; }
  .gns-route-wrap  { display: none; }
  .gns-shimmer     { display: none; }
  .gns-glow        { display: none; }
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 380px) {
  .gns-pin        { width: 58px; height: 78px; }
  .gns-icon       { width: 28px; height: 28px; font-size: 10px; }
  .gns-slogan     { gap: 0.375rem; }
}
@media (min-width: 768px) {
  .gns-pin        { width: 86px; height: 114px; }
  .gns-stage      { max-width: 560px; }
  .gns-icon       { width: 40px; height: 40px; font-size: 14px; }
  .gns-glow       { width: 220px; height: 220px; }
}
@media (min-width: 1024px) {
  .gns-search { width: min(360px, 82vw); }
}