:root{
  --bg: #1a1a1a;
  --bg-deep: #0d0d0d;
  --flag-red: #C82027;
  --white: #ffffff;
}

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

html, body{
  width: 100%;
  height: 100%;
  background: var(--bg);
  overflow: hidden;
}

.stage{
  position: relative;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse at 50% 45%, #232323 0%, var(--bg) 55%, var(--bg-deep) 100%);
}

.stage::before{
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.018) 0px, rgba(255,255,255,0.018) 1px, transparent 1px, transparent 3px);
  pointer-events: none;
  opacity: 0.5;
}

.logo-wrap{
  position: relative;
  width: min(94vw, 94vh * 2.790698);
  aspect-ratio: 403.42 / 144.57;
}

.logo-wrap svg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(0 2px 0 rgba(0,0,0,0.4)) drop-shadow(0 30px 60px rgba(0,0,0,0.55));
}

.flag-plane{
  transition: transform 0.25s ease-out;
}

@media (max-width: 640px){
  .logo-wrap{
    width: min(96vw, 60vh * 2.790698);
  }
}

@media (prefers-reduced-motion: reduce){
  .flag-plane{
    transition: none;
    transform: none !important;
  }
}