#app-splash {
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  z-index: 9999;
  transition: opacity 300ms ease;
  --circle-animation-time: 500ms;
  --logo-draw-animation-time: 800ms;
  --logo-fillAndBreath-animation-time: 100ms;
  --logo-fillAndBreath-animation-delay: 405ms;
  --text-animation-time: 500ms;
  --text-animation-delay: 405ms;
  --background-color: transparent;
  --circle-fill: #f7f8fb;
}
#app-splash.fade-out { opacity: 0; }
#app-splash .animation-blue {
  --background-color: #e9f1ff;
  --circle-fill: #e2ecff;
}
#app-splash .icon-container {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  position: relative;
  background-color: var(--background-color);
}
#app-splash .background-circle {
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  fill: var(--circle-fill);
  animation: splashGrowCircle var(--circle-animation-time) cubic-bezier(0.46, 0.03, 0.52, 0.96) forwards;
}
#app-splash .icon-edutin {
  width: 80px;
  transform-origin: center;
  overflow: unset;
  position: relative;
  z-index: 2;
}
#app-splash .icon-edutin path {
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  stroke: #0056bf;
  stroke-width: 2;
  fill: #ccdaf4;
  -webkit-animation: splashDraw var(--logo-draw-animation-time) ease forwards, splashFillAndBreath var(--logo-fillAndBreath-animation-time) ease-in-out var(--logo-fillAndBreath-animation-delay) forwards;
  animation: splashDraw var(--logo-draw-animation-time) ease forwards, splashFillAndBreath var(--logo-fillAndBreath-animation-time) ease-in-out var(--logo-fillAndBreath-animation-delay) forwards;
}
#app-splash .text-container {
  margin-top: 30px;
  overflow: hidden;
  width: 100%;
  text-align-last: center;
  white-space: nowrap;
  animation: splashRevealText var(--text-animation-time) ease-in-out var(--text-animation-delay) forwards;
}
#app-splash .text {
  font-size: clamp(30px, 3vw, 38px);
  font-weight: 600;
  color: #0056bf;
}
@keyframes splashGrowCircle {
  0%   { opacity: 0;   transform: translate(-50%, -50%) scale(0); }
  50%  { opacity: 1;   transform: translate(-50%, -50%) scale(6); }
  60%  { opacity: 0.5; transform: translate(-50%, -50%) scale(6); }
  80%  { opacity: 0.3; transform: translate(-50%, -50%) scale(6.1); }
  100% { opacity: 0;   transform: translate(-50%, -50%) scale(1); }
}
@-webkit-keyframes splashDraw { to { stroke-dashoffset: 0; } }
@keyframes splashDraw          { to { stroke-dashoffset: 0; } }
@-webkit-keyframes splashFillAndBreath {
  0%   { fill: #ccdaf4; -webkit-transform: scale(1);    transform: scale(1); }
  50%  { fill: #0056bf; -webkit-transform: scale(1.05); transform: scale(1.05); }
  100% { fill: #0056bf; -webkit-transform: scale(1);    transform: scale(1); }
}
@keyframes splashFillAndBreath {
  0%   { fill: #ccdaf4; transform: scale(1); }
  50%  { fill: #0056bf; transform: scale(1.05); }
  100% { fill: #0056bf; transform: scale(1); }
}
@keyframes splashRevealText {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.05); }
  100% { transform: scale(1); }
}