/* CoSphere animated logo — shared keyframes (desktop + mobile) */

.cosphere-logo-container {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  perspective: 800px;
  width: 100%;
  aspect-ratio: 208 / 50;
}

.cosphere-logo-container--desktop {
  max-width: 320px;
}

.cosphere-logo-container--mobile {
  max-width: 240px;
}

.cosphere-logo-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  display: block;
}

.earth-base {
  transform-origin: 29px 25px;
  animation: cosphereEarthSpin 4.5s cubic-bezier(0.25, 1, 0.5, 1) both;
}

.earth-continents {
  transform-origin: 29px 25px;
  animation: cosphereContinentsShift 4.5s ease-in-out both;
}

.orbit-ring-group {
  transform-origin: 29px 25px;
  animation: cosphereFullOrbit 4.5s cubic-bezier(0.34, 1.15, 0.64, 1) both;
}

.modern-golden-star {
  transform-origin: 29px 25px;
  animation: cosphereStarRevolutionModern 4.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.logo-text {
  transform-origin: 60px 25px;
  animation: cosphereTextFadeIn 4.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Preview pages: loop forever */
.cosphere-logo-preview .earth-base,
.cosphere-logo-preview .earth-continents,
.cosphere-logo-preview .orbit-ring-group,
.cosphere-logo-preview .modern-golden-star,
.cosphere-logo-preview .logo-text {
  animation-iteration-count: infinite;
}

@keyframes cosphereEarthSpin {
  0% {
    transform: scale(0.2) rotate(-220deg);
    opacity: 0;
  }
  22% {
    transform: scale(1.08) rotate(15deg);
    opacity: 1;
  }
  40% {
    transform: scale(0.98) rotate(-5deg);
  }
  60%, 100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}

@keyframes cosphereContinentsShift {
  0% {
    opacity: 0;
    transform: scale(0.6) rotate(-90deg);
  }
  28% {
    opacity: 0.9;
    transform: scale(1.04) rotate(8deg);
  }
  60%, 100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

@keyframes cosphereFullOrbit {
  0% {
    transform: rotateY(-180deg) rotateZ(-35deg) scale(0.4);
    opacity: 0;
  }
  18% {
    opacity: 0.85;
  }
  50% {
    transform: rotateY(180deg) rotateZ(8deg) scale(1.06);
    opacity: 1;
  }
  70%, 100% {
    transform: rotateY(0deg) rotateZ(0deg) scale(1);
    opacity: 1;
  }
}

@keyframes cosphereStarRevolutionModern {
  0% {
    transform: translate(-18px, 10px) scale(0.1) rotate(-180deg);
    opacity: 0;
    filter: drop-shadow(0 1px 2px rgba(245, 158, 11, 0.15));
  }
  14% {
    opacity: 1;
  }
  34% {
    transform: translate(15px, -12px) scale(1.35) rotate(75deg);
    opacity: 1;
    filter: drop-shadow(0 2px 6px rgba(245, 158, 11, 0.35));
  }
  54% {
    transform: translate(13px, -5px) scale(0.95) rotate(190deg);
    opacity: 1;
    filter: drop-shadow(0 1px 4px rgba(245, 158, 11, 0.25));
  }
  72% {
    transform: translate(12px, -4px) scale(0.8) rotate(360deg);
    opacity: 0.95;
    filter: drop-shadow(0 1px 3px rgba(245, 158, 11, 0.2));
  }
  85% {
    transform: translate(12px, -4px) scale(0.65) rotate(360deg);
    opacity: 0.6;
    filter: drop-shadow(0 1px 2px rgba(245, 158, 11, 0.15));
  }
  94% {
    transform: translate(12px, -4px) scale(0.4) rotate(360deg);
    opacity: 0;
  }
  100% {
    transform: translate(12px, -4px) scale(0) rotate(360deg);
    opacity: 0;
  }
}

@keyframes cosphereTextFadeIn {
  0%, 42% {
    opacity: 0;
    transform: translateX(12px);
    filter: blur(3px);
  }
  68% {
    opacity: 1;
    transform: translateX(-0.5px);
    filter: blur(0px);
  }
  82%, 100% {
    opacity: 1;
    transform: translateX(0);
    filter: blur(0px);
  }
}

/* Full-screen splash overlay */
.logo-splash {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f8fafc;
  opacity: 1;
  transition: opacity 0.45s ease;
  pointer-events: all;
}

@media (max-width: 768px) {
  .logo-splash {
    align-items: flex-start;
    padding-top: 36vh;
    padding-left: 24px;
    padding-right: 24px;
  }
}

.logo-splash.is-hiding {
  opacity: 0;
  pointer-events: none;
}

.logo-splash[hidden] {
  display: none !important;
}

html.logo-splash-active,
html.logo-splash-active body {
  overflow: hidden;
}