@charset "utf-8";
/* CSS Document */

/***************** Opening Screen ************/
:root {
  --brand-red: #db1c21;
  --reveal-radius: 0px;
}

.opening-screen {
  position: fixed;
  inset: 0;
  z-index: 9999;

  display: grid;
  place-items: center;

  /*
	Der transparente Kreis in der Mitte wächst später per JS.
	Außerhalb dieses Kreises bleibt der Screen rot.
  */
  background:
	radial-gradient(
	  circle at center,
	  transparent 0 var(--reveal-radius),
	  var(--brand-red) calc(var(--reveal-radius) + 1px)
	);

  overflow: hidden;
}

.opening-screen__logo {
  position: relative;
  z-index: 2;

  width: min(320px, 55vw);
  height: auto;
  display: block;

  transition:
	opacity 350ms ease,
	transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

.opening-screen.is-opening .opening-screen__logo {
  opacity: 0;
  transform: scale(0.94);
}

/* Optional: Animation für Nutzer mit reduzierter Bewegung verkürzen */
@media (prefers-reduced-motion: reduce) {
  .opening-screen__logo {
	transition: opacity 150ms linear;
  }
}