/* Pure CSS Logo Animation - Matching Dist Version */

est-spinner {
    position: relative;
    margin: 4px;
    width: 48px;
    height: 48px;
    color: #e95e41;
}

.spinner-error {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, 0);
  width: 25rem;
  text-align: center;
  color: black;
}

:root {
  --logo-base-size: 80px;
  --logo-scale: 1;
  --first-phase: 200ms; /* 50% of duration */
  --second-phase: 200ms; /* 50% of duration */
  --e-zoom-duration: 100ms;
}

.spinner-container {
  width: calc(var(--logo-base-size) * var(--logo-scale));
  height: calc(var(--logo-base-size) * var(--logo-scale));
  position: relative;
  overflow: visible;
}

.spinner-container.scale-25 {
  --logo-scale: 0.25;
}

.spinner-container.scale-50 {
  --logo-scale: 0.50;
}

.spinner-container.scale-75 {
  --logo-scale: 0.75;
}

#spinner, #final-logo {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  overflow: visible;
}

/* Use opacity instead of display:none for #final-logo */
#final-logo {
    opacity: 0;
    pointer-events: none;
}

#final-logo.fade-in {
    animation: finalLogoFadeIn var(--second-phase) ease-out forwards;
    animation-delay: var(--first-phase);
}

#final-logo.fade-in > .e-shape {
    animation: eZoomFinal var(--e-zoom-duration) ease-out forwards;
    animation-delay: calc(var(--first-phase) + var(--second-phase));
}

@keyframes finalLogoFadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; pointer-events: auto; }
}

/* Animation Keyframes */
@keyframes fadeInOut {
  0%, 100% { opacity: 0.15; }
  50% { opacity: 1; }
}

@keyframes e-zoom {
  from {
    transform: scale(0.5);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* Animation Classes */
.dot0 { animation: fadeInOut 1s infinite; animation-delay: 0s; }
.dot1 { animation: fadeInOut 1s infinite; animation-delay: 0.143s; }
.dot2 { animation: fadeInOut 1s infinite; animation-delay: 0.286s; }
.dot3 { animation: fadeInOut 1s infinite; animation-delay: 0.429s; }
.dot4 { animation: fadeInOut 1s infinite; animation-delay: 0.571s; }
.dot5 { animation: fadeInOut 1s infinite; animation-delay: 0.714s; }
.dot6 { animation: fadeInOut 1s infinite; animation-delay: 0.857s; }

/* Phase 1: Spinner visible (0-50% of total duration) */
#spinner.fade-out {
  animation: spinnerPhase1 var(--first-phase) ease-out forwards;
}

/* E shape - simplified approach */
.e-shape {
  /* Start hidden and small */
  opacity: 0;
  transform: scale(0.5);
  transform-origin: center;
  transform-box: fill-box;
}

/* Phase 1: Spinner fades out */
@keyframes spinnerPhase1 {
  0% {
    opacity: 1;
    display: block;
  }
  99% {
    opacity: 1;
    display: block;
  }
  100% {
    opacity: 0;
    display: none;
  }
}

/* Final E zoom animation */
@keyframes eZoomFinal {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Info Section */
.info {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  max-width: 600px;
  background: rgba(255, 255, 255, 0.9);
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.info h1 {
  color: #313d4a;
  margin: 0 0 15px 0;
  font-size: 1.5em;
  font-weight: 300;
}

.info p {
  color: #666;
  margin: 10px 0;
  font-size: 1em;
  line-height: 1.4;
}

.info ul {
  text-align: left;
  margin: 10px 0;
  padding-left: 20px;
}

.info li {
  color: #666;
  margin: 5px 0;
  font-size: 0.9em;
}

/* Responsive Design */
@media (max-width: 768px) {
  :root {
    --logo-base-size: 60px;
  }

  .info {
    padding: 15px;
    max-width: 400px;
  }

  .info h1 {
    font-size: 1.2em;
  }

  .info p, .info li {
    font-size: 0.9em;
  }
}

@media (max-width: 480px) {
  :root {
    --logo-base-size: 50px;
  }

  .info {
    padding: 10px;
    max-width: 300px;
  }

  .info h1 {
    font-size: 1em;
  }

  .info p, .info li {
    font-size: 0.8em;
  }
}

/* The ball in the final logo is always solid, no animation */
#final-logo .ball {
  opacity: 1 !important;
  animation: none !important;
}