/* INTRO CONTAINER */
.intro-intro {
  position: fixed;
  inset: 0;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  z-index: 9999;
  opacity: 1;
  transition: opacity 1s ease, visibility 0s linear 1s;
}

.intro-intro.intro-hidden {
  opacity: 0;
  visibility: hidden;
}

/* VIDEO */
.intro-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* FEUERLOCH */
.logo-burst {
  position: relative;
  z-index: 5;
  width: 260px;
  height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: holeOpen 1.3s ease-out forwards;
}

@keyframes holeOpen {
  0%   { transform: scale(0.1); filter: brightness(0.2) blur(25px); }
  40%  { transform: scale(0.4); filter: brightness(0.5) blur(18px); }
  70%  { transform: scale(1.2); filter: brightness(1.2) blur(8px); }
  100% { transform: scale(1); filter: brightness(1) blur(0); }
}

/* FLAMMENANIMATION – läuft dauerhaft, unabhängig vom Logo */
.logo-wrapper {
  animation: flamePulse 2s ease-in-out infinite;
}

/* LOGO */
.logo-img {
  width: 180px;
  opacity: 0;
  transform: scale(0.4);
  animation: logoRise 1.3s ease-out 0s forwards;
}

/* LOGO-ERSCHEINEN (DOPPELTE + TRIPLE GRÖßE) */
@keyframes logoRise {
  0%   { opacity: 0; transform: scale(2) rotate(-6deg); filter: brightness(0.5) blur(6px); }
  40%  { opacity: 1; transform: scale(2.8) rotate(2deg); filter: brightness(1.3) blur(2px); }
  100% { opacity: 1; transform: scale(3) rotate(0deg); filter: brightness(1) blur(0); }
}

/* FEUER-PULSEN (BLEIBT AUF DEM WRAPPER SICHTBAR) */
@keyframes flamePulse {
  0%   { filter: drop-shadow(0 0 6px #ff6300); }
  50%  { filter: drop-shadow(0 0 18px #ff2b00); }
  100% { filter: drop-shadow(0 0 6px #ff6300); }
}

/* ZOOM-IN KAMERAÜBERGANG */
.zoom-in {
  animation: zoomIn 1.0s ease-in forwards;
}

@keyframes zoomIn {
  0%   { transform: scale(3); opacity: 1; }
  100% { transform: scale(12); opacity: 0; }
}

/* MOBILE */
@media (max-width: 600px) {
  .logo-img { width: 140px; }
  .logo-burst { width: 200px; height: 200px; }
}