/* GoRout Flag Football — Splash Screen */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  width: 100%;
  background: #000000;
  overflow: hidden;
}

/* Flutter canvas sits behind the splash */
flt-glass-pane,
flt-scene-host,
canvas {
  background: #000000 !important;
}

/* ── Splash container ─────────────────────────────────────────── */
#splash {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100vh;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #000000;
  background-image:
    radial-gradient(ellipse at 20% 80%, rgba(59, 130, 246, 0.12) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(167, 139, 250, 0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 50%, rgba(16, 185, 129, 0.06) 0%, transparent 60%);
}

#splash.dismissing {
  transition: opacity 0.8s ease-out;
}

#splash.hidden {
  opacity: 0;
  pointer-events: none;
}


/* ── Frame animation container ───────────────────────────────── */
.play-anim {
  position: relative;
  width: 364px;
  height: 364px;
  margin-top: -125px;
}

.play-anim img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transform: scale(1.0);
  transition: opacity 0.35s ease-in-out, transform 0.35s ease-out;
}

/* Glow only on finalUnit when growing */

.play-anim img.active {
  opacity: 1;
  transform: scale(1.06);
}

/* ── Frame2 unfurls downward (banner drop) ───────────────────── */
@keyframes unfurlDown {
  from { clip-path: inset(0 0 100% 0); }
  to   { clip-path: inset(0 0 0% 0); }
}

.play-anim img.unfurl {
  animation: unfurlDown 0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  transition: transform 0.35s ease-out;
}

/* ── Final unit: frame3 + frame4 grow together ───────────────── */
.final-unit {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transform: scale(1.0);
  transition: opacity 0.35s ease-in-out;
  display: flex;
  align-items: center;
  justify-content: center;
}

.final-unit #frame3,
.final-unit #frame4 {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 1;
  transform: none;
  transition: none;
  filter: none;
}

@keyframes growUnit {
  from { transform: scale(1.0); }
  to   { transform: scale(1.4); }
}

@keyframes glowIn {
  from {
    filter:
      brightness(0) invert(1)
      sepia(1) saturate(4) hue-rotate(185deg)
      brightness(1.1)
      drop-shadow(0 0 0px rgba(74, 144, 226, 0));
  }
  to {
    filter:
      brightness(0) invert(1)
      sepia(1) saturate(4) hue-rotate(185deg)
      brightness(1.1)
      drop-shadow(0 0 28px rgba(74, 144, 226, 0.9));
  }
}

.final-unit.grow {
  opacity: 1;
  animation: growUnit 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.final-unit.glowing {
  animation: growUnit 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards,
             glowIn 0.5s ease-out forwards;
}