/*
Author: IT Deutschland – Maintenance Page
*/
@import url(https://fonts.googleapis.com/css2?family=Audiowide&family=Open+Sans:wght@300;400;600;800&display=swap);

/* ===== BASE ===== */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  background: #000;
  color: #fff;
  font-family: 'Open Sans', sans-serif;
}

/* ===== BACKGROUND CANVAS ===== */
.large-header {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background: #333 url('../img/Background.png') center center / cover no-repeat;
  z-index: 0;
  overflow: hidden;
}

#demo-canvas {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
}

/* ===== FLOATING PARTICLES CANVAS ===== */
#particles-canvas {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

/* ===== MAIN CONTENT ===== */
#Content {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.maintenance-container {
  text-align: center;
  padding: 30px 20px 110px;
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
}

/* ===== ROUND LOGO (spin on load) ===== */
#round-logo-wrapper {
  margin-bottom: 20px;
}

#runde-logo {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  animation: spinIn 1.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  filter: drop-shadow(0 0 18px rgba(220, 30, 30, 0.7));
}

@keyframes spinIn {
  0%   { transform: rotate(0deg) scale(0); opacity: 0; }
  60%  { transform: rotate(540deg) scale(1.15); opacity: 1; }
  100% { transform: rotate(720deg) scale(1); opacity: 1; }
}

/* ===== MAIN LOGO (pulse / breathe) ===== */
#main-logo-wrapper {
  margin: 10px auto 30px;
}

#main-logo {
  max-width: 420px;
  width: 90%;
  animation: logoPulse 3s ease-in-out infinite;
  filter: drop-shadow(0 0 24px rgba(17, 162, 230, 0.55));
  opacity: 0;
  animation-fill-mode: forwards;
  animation-delay: 1s;
}

@keyframes logoPulse {
  0%   { transform: scale(1);    opacity: 1; filter: drop-shadow(0 0 18px rgba(30, 135, 220, 0.5)); }
  50%  { transform: scale(1.07); opacity: 1; filter: drop-shadow(0 0 36px rgba(4, 116, 190, 0.9)); }
  100% { transform: scale(1);    opacity: 1; filter: drop-shadow(0 0 18px rgba(30, 65, 220, 0.5)); }
}

/* ===== MAINTENANCE TEXT ===== */
.maintenance-title {
  font-family: 'Audiowide', cursive;
  font-size: clamp(1rem, 3vw, 2rem);
  letter-spacing: 4px;
  text-transform: uppercase;
  margin: 0 0 16px;
  color: #fff;
  text-shadow:
    0 0 10px rgba(30, 135, 220, 0.5),
    0 0 30px rgba(4, 116, 190, 0.9),
    0 0 60px rgba(30, 65, 220, 0.5);
  animation: glowPulse 2.5s ease-in-out infinite;
}

@keyframes glowPulse {
  0%, 100% { text-shadow: 0 0 10px rgba(4, 116, 190, 0.9), 0 0 30px rgba(30, 135, 220, 0.5); }
  50%       { text-shadow: 0 0 20px rgba(4, 116, 190, 0.9),   0 0 60px rgba(4, 116, 190, 0.9), 0 0 100px rgba(30, 65, 220, 0.5); }
}

.maintenance-sub {
  font-size: clamp(1rem, 2.5vw, 1.4rem);
  font-weight: 300;
  line-height: 1.7;
  color: rgba(255,255,255,0.9);
  margin-bottom: 20px;
}

.maintenance-divider {
  width: 80px;
  height: 3px;
  background: linear-gradient(90deg, transparent, #1e41dc, transparent);
  margin: 20px auto;
  animation: dividerGlow 2s ease-in-out infinite;
}

@keyframes dividerGlow {
  0%, 100% { box-shadow: 0 0 6px #1ec0dc; width: 80px; }
  50%       { box-shadow: 0 0 20px #0959ee; width: 140px; }
}

.maintenance-info {
  font-size: clamp(0.85rem, 2vw, 1rem);
  color: rgba(255,255,255,0.65);
  line-height: 1.8;
}

/* ===== SOCIAL LINKS & FOOTER ===== */
.social-links {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 26px;
}

.social-btn {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: rgba(17, 35, 82, 0.65);
  border: 1px solid rgba(77, 161, 255, 0.6);
  box-shadow: 0 0 18px rgba(30, 119, 220, 0.6);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.social-btn i { font-size: 1.4rem; }

.social-btn:hover {
  color: #fff;
  transform: translateY(-3px) scale(1.05);
  background: rgba(28, 64, 150, 0.8);
  box-shadow: 0 0 30px rgba(30, 119, 220, 0.9);
}

.site-footer {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.footer-discord {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: rgba(26, 35, 85, 0.72);
  border: 2px solid rgba(84, 155, 255, 0.7);
  box-shadow: 0 0 30px rgba(37, 119, 225, 0.85);
  transition: transform .2s ease, box-shadow .2s ease;
}

.footer-discord i { font-size: 2.4rem; }

.footer-discord:hover {
  color: #fff;
  transform: scale(1.08);
  box-shadow: 0 0 38px rgba(37, 119, 225, 1);
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 18px;
  font-size: .9rem;
  color: rgba(255,255,255,.82);
}

.footer-link-button {
  padding: 0;
  background: none;
  border: none;
  color: #b7d8ff;
  text-decoration: underline;
  cursor: pointer;
  transition: color .2s ease;
}

.footer-link-button:hover { color: #fff; }

.whatsapp-float {
  position: fixed;
  left: 16px;
  bottom: 16px;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: #25d366;
  box-shadow: 0 0 20px rgba(37, 211, 102, 0.9);
  animation: whatsappPulse 1.8s infinite;
}

.whatsapp-float i { font-size: 1.8rem; }

@keyframes whatsappPulse {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7); }
  70% { transform: scale(1.08); box-shadow: 0 0 0 18px rgba(37, 211, 102, 0); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

.legal-modal {
  background: rgba(8, 18, 42, 0.96);
  color: #f5f8ff;
  border: 1px solid rgba(84, 155, 255, 0.4);
}

.legal-modal .modal-header { border-bottom-color: rgba(84, 155, 255, 0.35); }

/* ===== FADE-IN ANIMATIONS ===== */
.fade-in-up {
  opacity: 0;
  transform: translateY(30px);
  animation: fadeInUp 0.9s ease forwards;
  animation-delay: 1.4s;
}
.fade-in-up.delay-3 { animation-delay: 2s; }
.fade-in-up.delay-4 { animation-delay: 2.6s; }

@keyframes fadeInUp {
  to { opacity: 1; transform: translateY(0); }
}

/* ===== RESPONSIVE ===== */
@media (max-width: 576px) {
  .large-header { background-position: center top; }
  #main-logo    { max-width: 280px; }
  .maintenance-sub { font-size: .95rem; }
  .maintenance-info { font-size: .85rem; }
  .footer-discord { width: 72px; height: 72px; }
  .footer-discord i { font-size: 2rem; }
  .whatsapp-float { width: 56px; height: 56px; left: 12px; bottom: 12px; }
}