:root {
  color-scheme: dark;
  background: #8f1008;
}

* {
  box-sizing: border-box;
}

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

body {
  position: fixed;
  inset: 0;
  isolation: isolate;
}

body::before,
body::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
}

body::before {
  background: radial-gradient(circle at 32% 30%, rgba(255, 189, 100, 0.08), transparent 38%);
  mix-blend-mode: screen;
  animation: atmosphere 12s ease-in-out infinite alternate;
}

body::after {
  background: #320200;
  opacity: 1;
  animation: reveal 1800ms 120ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

#flag,
.flag-fallback {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.flag-fallback {
  overflow: hidden;
  background:
    radial-gradient(circle at 34% 42%, rgba(255, 102, 60, 0.2), transparent 33%),
    linear-gradient(116deg, #b6170a 0%, #ef2b16 42%, #c7190b 100%);
}

.flag-fallback::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(90deg, transparent 0 5px, rgba(255, 255, 255, 0.018) 6px, transparent 7px),
    radial-gradient(ellipse at center, transparent 48%, rgba(64, 0, 0, 0.26) 118%);
  pointer-events: none;
}

.star {
  position: absolute;
  display: block;
  width: min(20vw, 30vh);
  aspect-ratio: 1;
  background: #ffdf16;
  clip-path: polygon(50% 0%, 61.8% 36.2%, 100% 36.2%, 69.1% 58.8%, 80.9% 95.1%, 50% 72.7%, 19.1% 95.1%, 30.9% 58.8%, 0% 36.2%, 38.2% 36.2%);
  filter: drop-shadow(0 0.4vh 0.7vh rgba(98, 25, 0, 0.24));
}

.star-main {
  top: 10%;
  left: 6.7%;
}

.star-one,
.star-two,
.star-three,
.star-four {
  width: min(6.7vw, 10vh);
  transform-origin: center;
}

.star-one { top: 7%; left: 30%; transform: rotate(23deg); }
.star-two { top: 21%; left: 37%; transform: rotate(45deg); }
.star-three { top: 41%; left: 37%; transform: rotate(69deg); }
.star-four { top: 55%; left: 30%; transform: rotate(22deg); }

#flag {
  opacity: 0;
  touch-action: none;
  transform: scale(1.012);
  transition: opacity 1100ms cubic-bezier(0.22, 1, 0.36, 1), transform 1900ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

#flag.is-ready {
  opacity: 1;
  transform: scale(1);
}

@keyframes reveal {
  0%, 14% { opacity: 1; }
  100% { opacity: 0; visibility: hidden; }
}

@keyframes atmosphere {
  from { opacity: 0.55; transform: translate3d(-1%, -0.5%, 0) scale(1.02); }
  to { opacity: 1; transform: translate3d(1%, 0.5%, 0) scale(1.05); }
}

@media (prefers-reduced-motion: reduce) {
  #flag {
    transition: none;
  }

  body::before,
  body::after {
    animation: none;
  }

  body::after { display: none; }
}