/* Reset and base styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  overflow: hidden;
  width: 100%;
  height: 100%;
  position: fixed;
}

body {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #e8e8e8;
  position: fixed;
  top: 0;
  left: 0;
}

body::before,
body::after {
  content: "";
  position: absolute;
  width: 200%;
  height: 200%;
  top: -50%;
  left: -50%;
  z-index: -1;
  opacity: 0.4;
}

body::before {
  background: 
    repeating-radial-gradient(
      circle at 30% 40%,
      transparent 0,
      transparent 40px,
      rgba(180, 180, 180, 0.3) 40px,
      rgba(180, 180, 180, 0.3) 42px
    ),
    repeating-radial-gradient(
      circle at 70% 60%,
      transparent 0,
      transparent 35px,
      rgba(160, 160, 160, 0.25) 35px,
      rgba(160, 160, 160, 0.25) 37px
    ),
    repeating-radial-gradient(
      circle at 50% 80%,
      transparent 0,
      transparent 45px,
      rgba(170, 170, 170, 0.28) 45px,
      rgba(170, 170, 170, 0.28) 47px
    );
  animation: swirlMove1 52s ease-in-out infinite;
}

body::after {
  background: 
    repeating-radial-gradient(
      circle at 60% 30%,
      transparent 0,
      transparent 38px,
      rgba(190, 190, 190, 0.25) 38px,
      rgba(190, 190, 190, 0.25) 40px
    ),
    repeating-radial-gradient(
      circle at 20% 70%,
      transparent 0,
      transparent 42px,
      rgba(175, 175, 175, 0.3) 42px,
      rgba(175, 175, 175, 0.3) 44px
    ),
    repeating-radial-gradient(
      circle at 80% 50%,
      transparent 0,
      transparent 36px,
      rgba(165, 165, 165, 0.27) 36px,
      rgba(165, 165, 165, 0.27) 38px
    );
  animation: swirlMove2 67s ease-in-out infinite;
}

@keyframes swirlMove1 {
  0% {
    transform: translate(0, 0) rotate(0deg) scale(1);
  }
  7% {
    transform: translate(-30px, -20px) rotate(25deg) scale(1.15);
  }
  14% {
    transform: translate(-15px, 45px) rotate(65deg) scale(0.9);
  }
  19% {
    transform: translate(20px, 60px) rotate(85deg) scale(1.08);
  }
  27% {
    transform: translate(-40px, 35px) rotate(120deg) scale(1.22);
  }
  34% {
    transform: translate(-70px, -10px) rotate(155deg) scale(0.85);
  }
  41% {
    transform: translate(-50px, 70px) rotate(180deg) scale(1.12);
  }
  48% {
    transform: translate(10px, 90px) rotate(210deg) scale(1.3);
  }
  55% {
    transform: translate(-80px, 50px) rotate(245deg) scale(0.95);
  }
  62% {
    transform: translate(-30px, 100px) rotate(275deg) scale(1.18);
  }
  69% {
    transform: translate(25px, 75px) rotate(305deg) scale(0.88);
  }
  76% {
    transform: translate(-55px, 20px) rotate(330deg) scale(1.25);
  }
  83% {
    transform: translate(15px, -30px) rotate(350deg) scale(1.05);
  }
  91% {
    transform: translate(-20px, 40px) rotate(370deg) scale(0.92);
  }
  100% {
    transform: translate(0, 0) rotate(395deg) scale(1);
  }
}

@keyframes swirlMove2 {
  0% {
    transform: translate(0, 0) rotate(0deg) scale(1);
  }
  9% {
    transform: translate(40px, 30px) rotate(-30deg) scale(0.92);
  }
  16% {
    transform: translate(-20px, -50px) rotate(-55deg) scale(1.2);
  }
  23% {
    transform: translate(65px, -25px) rotate(-90deg) scale(1.08);
  }
  31% {
    transform: translate(30px, 60px) rotate(-125deg) scale(0.88);
  }
  38% {
    transform: translate(-45px, 40px) rotate(-160deg) scale(1.28);
  }
  45% {
    transform: translate(70px, -60px) rotate(-190deg) scale(0.95);
  }
  53% {
    transform: translate(-10px, -80px) rotate(-220deg) scale(1.15);
  }
  60% {
    transform: translate(50px, 20px) rotate(-255deg) scale(1.32);
  }
  67% {
    transform: translate(-60px, -35px) rotate(-285deg) scale(0.85);
  }
  74% {
    transform: translate(35px, 75px) rotate(-315deg) scale(1.1);
  }
  81% {
    transform: translate(80px, -15px) rotate(-340deg) scale(0.9);
  }
  88% {
    transform: translate(-25px, 55px) rotate(-365deg) scale(1.22);
  }
  95% {
    transform: translate(45px, -40px) rotate(-385deg) scale(1.05);
  }
  100% {
    transform: translate(0, 0) rotate(-405deg) scale(1);
  }
}

.logo-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 100vw;
  padding: 40px;
  position: relative;
  z-index: 1;
}

.logo {
  max-width: 400px;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.1));
  margin-bottom: 30px;
}

.coming-soon {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, sans-serif;
  font-size: 1.2rem;
  font-weight: 400;
  color: #666;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .logo {
    max-width: 300px;
  }

  .coming-soon {
    font-size: 1rem;
  }
}

@media (max-width: 480px) {
  .logo-container {
    padding: 20px;
  }

  .logo {
    max-width: 250px;
    margin-bottom: 20px;
  }

  .coming-soon {
    font-size: 0.9rem;
  }
}