/* GI site loader — brand gradient splash, subtle bubbles, fade in/out */

:root {
  --gi-brand-gradient: linear-gradient(135deg, #8559a5 10%, #59a59a 90%);
  --gi-loader-fade-in-ms: 650ms;
  --gi-loader-fade-out-ms: 850ms;
}

html.gi-loader-active,
html.gi-loader-leaving {
  background: var(--gi-brand-gradient);
}

html.gi-loader-active,
html.gi-loader-active body {
  overflow: hidden;
}

html.gi-loader-active body > *:not(#gi-site-loader) {
  visibility: hidden !important;
}

html.gi-loader-pending {
  background: var(--gi-brand-gradient);
}

#gi-site-loader {
  position: fixed;
  inset: 0;
  z-index: 2147483646;
  pointer-events: all;
  opacity: 1;
  visibility: visible;
  background: var(--gi-brand-gradient);
}

#gi-site-loader.is-visible .gi-loader-inner {
  animation: gi-loader-logo-in var(--gi-loader-fade-in-ms) ease forwards;
}

#gi-site-loader.is-exiting {
  animation: gi-loader-fade-out var(--gi-loader-fade-out-ms) ease-out forwards;
  pointer-events: none;
}

#gi-site-loader.is-exiting .gi-loader-curtain,
#gi-site-loader.is-exiting .gi-loader-inner {
  animation: gi-loader-fade-out var(--gi-loader-fade-out-ms) ease-out forwards;
}

@keyframes gi-loader-logo-in {
  0% {
    opacity: 0;
    transform: translate3d(0, 6px, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes gi-loader-fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    visibility: hidden;
  }
}

.gi-loader-curtain {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gi-brand-gradient);
  opacity: 1;
}

.gi-loader-inner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
}

.gi-loader-inner .shrimp-twin-crest-stage {
  --shrimp-size: clamp(78px, 18vw, 128px);
}

.gi-loader-inner .gi-loader-shrimp-svg,
.gi-loader-inner .shrimp-twin-crest-liquid svg {
  display: block;
  width: 100%;
  height: auto;
}

.gi-loader-bubbles {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

.gi-loader-bubbles .gi-bubble {
  position: absolute;
  bottom: -8px;
  border-radius: 50%;
  opacity: 0;
  animation: gi-bubble-rise linear infinite;
  animation-fill-mode: both;
  will-change: transform, opacity;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow:
    inset 2px -2px 6px rgba(255, 255, 255, 0.12),
    inset -1px 1px 4px rgba(255, 255, 255, 0.04);
}

.gi-loader-bubbles .gi-bubble-sm {
  width: 8px;
  height: 8px;
}

.gi-loader-bubbles .gi-bubble-md {
  width: 12px;
  height: 12px;
}

.gi-loader-bubbles .gi-bubble-lg {
  width: 16px;
  height: 16px;
}

@keyframes gi-bubble-rise {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(0.92);
  }
  8% {
    opacity: 0.45;
  }
  25% {
    transform: translate3d(6px, -25vh, 0) scale(1);
  }
  50% {
    transform: translate3d(-4px, -50vh, 0) scale(1.02);
  }
  75% {
    transform: translate3d(5px, -75vh, 0) scale(1);
  }
  92% {
    opacity: 0.35;
  }
  100% {
    opacity: 0;
    transform: translate3d(-2px, -105vh, 0) scale(0.96);
  }
}

@media (max-width: 600px) {
  .gi-loader-bubbles .gi-bubble-sm {
    width: 5px;
    height: 5px;
  }

  .gi-loader-bubbles .gi-bubble-md {
    width: 7px;
    height: 7px;
  }

  .gi-loader-bubbles .gi-bubble-lg {
    width: 9px;
    height: 9px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #gi-site-loader.is-visible .gi-loader-inner {
    animation: none;
    opacity: 1;
    transform: none;
  }

  #gi-site-loader.is-exiting {
    animation-duration: 300ms;
  }

  .gi-loader-bubbles {
    display: none;
  }
}