:root {
  --primary-color: #ffffff;
  --secondary-color: #e0e0e0;
  --accent-color: #ff8c00;
  --glass-background: rgba(0, 40, 80, 0.55); /* Blue glass */
}

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

html, body {
  height:100%;
  font-family:'Poppins', sans-serif;
  color: var(--primary-color);
  overflow:hidden;
}

/* Background */
.background-wrapper {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: -1;
  overflow: hidden;
}

.background-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.2) brightness(1.05);
  animation: zoomPan 40s ease-in-out infinite alternate,
             slowParallax 120s linear infinite alternate;
  transform: translateZ(0);
  will-change: transform;
}

/* Main container */
.coming-soon-container {
  display:flex;
  justify-content:center;
  align-items:center;
  height:100vh;
  width:100vw;
  text-align:center;
  padding:20px;
  animation: fadeIn 1.5s ease-in-out;
}

/* Content box */
.content-box {
  max-width:650px;
  width:100%;
  padding:35px 25px;
  background: var(--glass-background);
  border-radius:16px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.5), 0 0 20px rgba(0,150,255,0.2);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border:1px solid rgba(255,255,255,0.25);
  transform:translateY(20px);
  opacity:0;
  animation: slideUp 1s ease-out 0.5s forwards;
  max-height:90vh;  /* ensure it fits on mobile */
  overflow-y:auto;
}

h1 {
  font-size:3.5rem;
  font-weight:700;
  margin-bottom:10px;
  letter-spacing:1px;
  text-shadow:0 2px 12px rgba(0,0,0,0.5);
}

.tagline {
  font-size:1.25rem;
  font-weight:300;
  margin-bottom:20px;
  color: var(--secondary-color);
}

.update-text {
  font-size:1rem;
  margin-bottom:25px;
  line-height:1.5;
}

/* Form */
.subscribe-form {
  display:flex;
  justify-content:center;
  gap:10px;
  margin-bottom:25px;
}

.subscribe-form input[type="email"] {
  width:60%;
  padding:12px 18px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,0.3);
  background: rgba(255,255,255,0.1);
  color: var(--primary-color);
  font-size:1rem;
}

.subscribe-form input::placeholder { color: rgba(255,255,255,0.7); }
.subscribe-form input:focus { outline:none; background: rgba(255,255,255,0.2); border-color: var(--accent-color); }

.subscribe-form button {
  padding:12px 25px;
  border-radius:8px;
  border:none;
  background-color: var(--accent-color);
  color: var(--primary-color);
  font-weight:600;
  cursor:pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.subscribe-form button:hover { background-color:#ffa500; transform: translateY(-2px); }

/* Social links */
.social-links a {
  color: var(--secondary-color);
  font-size:1.5rem;
  margin:0 15px;
  text-decoration:none;
  transition: transform 0.3s ease, color 0.3s ease;
}

.social-links a:hover { color: var(--accent-color); transform: scale(1.2); }

/* Footer */
footer {
  position:absolute;
  bottom:15px;
  width:100%;
  text-align:center;
  font-size:.8rem;
  color: rgba(255,255,255,0.85);
  text-shadow:0 1px 4px rgba(0,0,0,0.6);
}

/* Animations */
@keyframes fadeIn { from {opacity:0;} to {opacity:1;} }
@keyframes slideUp { from {transform:translateY(20px); opacity:0;} to {transform:translateY(0); opacity:1;} }

@keyframes zoomPan {
  0%   { transform: scale(1) translate(0,0); }
  50%  { transform: scale(1.1) translate(-2%,-2%); }
  100% { transform: scale(1.15) translate(2%,2%); }
}

@keyframes slowParallax {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-15px); }
}

/* Responsive adjustments */
@media(max-width:768px){
  h1 { font-size:1.9rem; }
  .tagline { font-size:.95rem; margin-bottom:10px; }
  .update-text { font-size:.85rem; margin-bottom:15px; }

  .subscribe-form { flex-direction:column; align-items:center; gap:8px; }
  .subscribe-form input, .subscribe-form button { width:100%; max-width:300px; }

  .content-box {
    padding:15px 12px;
    max-height:85vh;
  }
}