/* ==========================================
   DME 07_3 WORLD EDITION
   Mobile Style
========================================== */

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

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
  font-family: Arial, Helvetica, sans-serif;
}

/* ==========================================
   Stadium Background
========================================== */

#bg {
  position: fixed;
  inset: 0;

  background-image: url("images/stadium_world.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  z-index: 1;

  animation: bgZoom 20s linear infinite alternate;

  filter: brightness(1.12) saturate(0.85) contrast(0.95);
}

/* ==========================================
   Light Overlay
========================================== */

#overlay {
  position: fixed;
  inset: 0;

  z-index: 2;

  pointer-events: none;

  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.15),
    rgba(255, 255, 255, 0) 65%
  );

  animation: pulse 4s ease-in-out infinite;
}

/* ==========================================
   Opening
========================================== */

#opening {
  position: fixed;
  inset: 0;

  z-index: 100;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  background: transparent;

  transition: opacity 1s;
}

#openingLogo {
  width: 45vw;
  max-width: 260px;

  margin-bottom: 30px;
}

#opening h1 {
  color: #ffffff;

  font-size: 8vw;

  letter-spacing: 3px;

  text-shadow:
    0 0 12px gold,
    0 0 24px gold;
}

/* ==========================================
   Corner Logo
========================================== */

#cornerLogo {
  position: fixed;

  top: 20px;
  right: 20px;

  width: 22vw;
  max-width: 120px;

  opacity: 0.45;

  z-index: 50;
}

/* ==========================================
   Lyrics
========================================== */

#lyrics {
  position: fixed;

  left: 50%;
  top: 50%;

  transform: translate(-50%, -50%);

  width: 90%;

  text-align: center;

  color: #ffffff;

  font-size: 10vw;

  font-weight: bold;

  line-height: 1.4;

  z-index: 20;

  opacity: 0;

  transition: opacity 0.6s ease;

  text-shadow:
    0 0 4px #ffffff,
    0 0 10px #ffd27a,
    0 0 18px #ffb347,
    0 0 30px #ff8c00,
    0 0 42px #e66a00,
    0 0 56px #cc5500;
}

/* ==========================================
   Brand
========================================== */

#brand {
  position: fixed;

  bottom: 28px;

  left: 50%;

  transform: translateX(-50%);

  z-index: 30;

  font-family: "Corbel Light", Corbel, sans-serif;

  font-size: 28px;

  font-weight: 300;

  color: #ffffff;

  letter-spacing: 2px;

  text-shadow:
    0 0 2px #ffffff,
    0 0 4px rgba(255, 255, 255, 0.6);

  pointer-events: none;

  user-select: none;
}

/* ==========================================
   Animation
========================================== */

@keyframes bgZoom {
  from {
    transform: scale(1);
  }

  to {
    transform: scale(1.1);
  }
}

@keyframes pulse {
  0% {
    opacity: 0.15;
    transform: scale(0.95);
  }

  50% {
    opacity: 0.45;
    transform: scale(1.08);
  }

  100% {
    opacity: 0.15;
    transform: scale(0.95);
  }
}