/* ===================== Base Reset ===================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  width: 100%;
  overflow-x: hidden;
}

body {
  font-family: 'Poppins', sans-serif;
  min-height: 100vh;
  position: relative;
  display: flex;
  flex-direction: column;
  color: #5c1017;
}

/* ===================== Animated Gradient Background ===================== */
.bg-animated {
  position: fixed;
  inset: 0;
  z-index: -3;
  background: linear-gradient(120deg, #fff8f3, #ffeee6, #ffe3d6, #fff0e8, #fdf6ef, #ffeee6);
  background-size: 400% 400%;
  animation: gradientMove 16s ease infinite;
}

@keyframes gradientMove {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Soft glowing orbs floating in the background for extra depth */
.glow-orb {
  position: fixed;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.5;
  z-index: -2;
  pointer-events: none;
}

.orb1 {
  width: 380px;
  height: 380px;
  background: radial-gradient(circle, rgba(255,190,150,0.55), transparent 70%);
  top: -100px;
  left: -100px;
  animation: floatOrb 12s ease-in-out infinite;
}

.orb2 {
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(255,150,140,0.45), transparent 70%);
  bottom: -80px;
  right: -80px;
  animation: floatOrb 15s ease-in-out infinite reverse;
}

.orb3 {
  width: 260px;
  height: 260px;
  background: radial-gradient(circle, rgba(255,215,180,0.4), transparent 70%);
  top: 40%;
  left: 60%;
  animation: floatOrb 10s ease-in-out infinite;
}

@keyframes floatOrb {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(40px, -30px) scale(1.15); }
}

/* Subtle floating particles */
.particles {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

.particle {
  position: absolute;
  bottom: -20px;
  background: rgba(200, 40, 50, 0.35);
  border-radius: 50%;
  animation: riseUp linear infinite;
}

@keyframes riseUp {
  0% {
    transform: translateY(0) translateX(0);
    opacity: 0;
  }
  10% {
    opacity: 0.8;
  }
  90% {
    opacity: 0.4;
  }
  100% {
    transform: translateY(-110vh) translateX(20px);
    opacity: 0;
  }
}

/* ===================== Hero Section ===================== */
.hero {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 20px;
  padding-bottom: 12vh;
  gap: 14px;
  min-height: 100vh;
}

/* Logo wrapper - handles the entrance transition container */
.logo-wrapper {
  width: min(90%, 560px);
  opacity: 0;
  transform: translateX(160%) scale(0.85);
  filter: drop-shadow(0 0 20px rgba(180, 20, 30, 0.2));
  animation: slideInLogo 1.6s cubic-bezier(0.19, 1, 0.22, 1) 0.2s forwards;
  margin-bottom: -10px;
}

.logo-img {
  width: 100%;
  height: auto;
  display: block;
  background: transparent;
  mix-blend-mode: normal;
}

@keyframes slideInLogo {
  0% {
    opacity: 0;
    transform: translateX(160%) scale(0.85) rotate(6deg);
  }
  60% {
    opacity: 1;
    transform: translateX(-4%) scale(1.03) rotate(0deg);
  }
  80% {
    transform: translateX(2%) scale(0.99);
  }
  100% {
    opacity: 1;
    transform: translateX(0) scale(1) rotate(0deg);
  }
}

/* Gentle continuous float once it has arrived */
.logo-wrapper {
  animation-fill-mode: forwards;
}

.logo-wrapper.settled {
  animation: none;
  opacity: 1;
  transform: translateX(0) scale(1);
  animation: floatLogo 4s ease-in-out infinite;
}

@keyframes floatLogo {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* ===================== Coming Soon Text ===================== */
.coming-soon-wrap {
  opacity: 0;
  transform: translateY(30px);
  animation: fadeUpText 1s ease-out 1.7s forwards;
  margin-top: -6px;
}

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

.coming-soon-text {
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  font-size: clamp(1.6rem, 5vw, 3rem);
  letter-spacing: 2px;
  color: #b4001e;
  text-shadow: 0 2px 18px rgba(180, 0, 30, 0.18);
  background: linear-gradient(90deg, #7a0011, #d6122f, #a10f26, #d6122f, #7a0011);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer 4s linear infinite;
}

@keyframes shimmer {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

.sub-text {
  margin-top: 14px;
  font-size: clamp(0.85rem, 2vw, 1.1rem);
  font-weight: 400;
  color: rgba(90, 20, 25, 0.75);
  letter-spacing: 0.5px;
}

/* ===================== Footer ===================== */
.site-footer {
  text-align: center;
  padding: 16px;
  font-size: 0.8rem;
  color: rgba(90, 20, 25, 0.55);
  position: relative;
  z-index: 1;
}

/* ===================== Responsive ===================== */
@media (max-width: 768px) {
  .hero {
    gap: 10px;
    padding: 30px 16px;
    padding-bottom: 15vh;
  }
  .logo-wrapper {
    width: min(92%, 400px);
  }
}

@media (max-width: 480px) {
  .logo-wrapper {
    width: 88%;
  }
}

@media (min-width: 1400px) {
  .logo-wrapper {
    width: 600px;
  }
}