:root {
  --loading-color: #e61e53;
  --loader-dot-radius: 45%;
  --loader-dot-edge: calc(var(--loader-dot-radius) + 0.2%);
  --loader-vertical-cell: 16% 80%;
  --loader-horizontal-cell: 80% 16%;
  --loader-size: 230px;
}

/* Splash background */
body {
  margin: 0;
  background-color: #080C15; /*#141418;  /* replace with ColorSeed.tc8 hex */
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

#splash {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background-color: #080C15; /* same as above */
  opacity: 1;
  transition: opacity 0.5s ease-out;
}

#splash.hidden {
  opacity: 0;
}

.logo {
  margin-left: -10px;
}

.logo-container {
  position: relative;
  width: 220px;
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Animation Style 4 */
.logo-container.style4 {
  position: relative;
}

.loader-wrapper {
  position: absolute;
  width: var(--loader-size);
  height: var(--loader-size);
  display: grid;
  place-items: center;
  animation: spin 1.4s linear infinite;
  transform-origin: center;
}

.loader-wrapper .dot-layer {
  position: absolute;
  inset: 0;
  display: grid;
  -webkit-mask: conic-gradient(from 15deg, #0000, #000);
  mask: conic-gradient(from 15deg, #0000, #000);
  background: radial-gradient(
        closest-side at 50% 12.5%,
        var(--loading-color) 0 var(--loader-dot-radius),
        transparent var(--loader-dot-edge)
      )
      50% 0 / var(--loader-vertical-cell) repeat-y,
    radial-gradient(
        closest-side at 12.5% 50%,
        var(--loading-color) 0 var(--loader-dot-radius),
        transparent var(--loader-dot-edge)
      )
      0 50% / var(--loader-horizontal-cell) repeat-x;
}

.loader-wrapper .dot-layer.rotate0 {
  transform: rotate(0deg);
}

.loader-wrapper .dot-layer.rotate22 {
  transform: rotate(22.5deg);
}

.loader-wrapper .dot-layer.rotate45 {
  transform: rotate(45deg);
}

.loader-wrapper .dot-layer.rotate67 {
  transform: rotate(67.5deg);
}

@keyframes l26 {
  100% {
    transform: rotate(1turn);
  }
}

@keyframes progress {
  0% {
    left: -30%;
  }
  50% {
    left: 100%;
  }
  100% {
    left: -30%;
  }
}

@keyframes spinLogo {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

#splash img {
  width: 160px;
  height: auto;
}

/* Override pulse animation for style4 */
.logo-container.style4 img {
  animation: none;
}

@keyframes pulse {
  0% {
    transform: scale(1);
    filter: brightness(0.95);
  }
  50% {
    transform: scale(1.2);
    filter: brightness(1.05);
  }
  100% {
    transform: scale(1);
    filter: brightness(0.95);
  }
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.phrases-container {
  position: absolute;
  bottom: 15%;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  width: 80%;
  max-width: 600px;
  font-family: Arial, Helvetica, sans-serif;
}

.phrase {
  color: white;
  margin: 10px 0;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 0.5s ease-out forwards;
}

.motivation {
  font-size: 24px;
  color: var(--loading-color);
  animation-delay: 0.5s;
}

.funfact {
  font-size: 16px;
  opacity: 0.8;
  animation-delay: 1s;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Hide the default Flutter loading progress bar */
.flutter-loader {
  display: none !important;
}