html, body { height: 100%; margin: 0; }
body { background: #000; overflow: hidden; }

.splash {
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 9999;
}

.stage {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
}

.center {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0);
  z-index: 10;
  text-align: center;
  color: #fff;
  white-space: nowrap;
  font-size: clamp(18px, 6.2vw, 32px);
  letter-spacing: clamp(0.06em, 1.2vw, 0.15em);
  font-weight: 300;
  pointer-events: none;
  opacity: 1;
}

.center.hidden {
  transform: translate(-50%, -40%) scale(0);
}

.center.play {
  animation: textCycle 3s ease forwards;
}

.logo {
  width: 120px;
  height: 120px;
  object-fit: contain;
  display: block;
  margin: 0 auto 16px;
  filter: drop-shadow(0 0 10px rgba(255,255,255,.35));
}
@keyframes textCycle {

  0%   { opacity: 1; transform: translate(-50%,-50%) scale(0); }
  24%  { opacity: 1; transform: translate(-50%,-50%) scale(1.08); }
  33%  { opacity: 1; transform: translate(-50%,-50%) scale(0.98); }


  66%  { opacity: 1; transform: translate(-50%,-50%) scale(1.00); }


  100% { opacity: 0; transform: translate(-50%,-60%) scale(1.00); }
}

flt-glass-pane,
body > flt-glass-pane,
#flutter_host,
#flutter_view {
  opacity: 0;
  transition: opacity 500ms ease;
}
body.flutter-show flt-glass-pane,
body.flutter-show #flutter_host,
body.flutter-show #flutter_view {
  opacity: 1;
}