/* ==========================================================================
   F1 LOUNGE CLUB - ROYAL PALACE 3D PARALLAX PORTAL STYLES
   Cinematic multi-plane parallax architecture, glowing portal, and typography
   ========================================================================== */

.hero-parallax-section {
  position: relative;
  width: 100vw;
  height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  background-color: #030303;
  z-index: 16;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Layer 1: Palace Background */
.parallax-bg-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
  transform-origin: center center;
  will-change: transform, filter;
}

.parallax-palace-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  filter: brightness(0.88) contrast(1.15) saturate(1.1);
  transform-origin: center 48%;
  will-change: transform, filter;
}

.parallax-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(3, 3, 3, 0.08) 0%, rgba(3, 3, 3, 0.45) 55%, rgba(2, 2, 2, 0.94) 95%);
  pointer-events: none;
  z-index: 2;
}

.parallax-fog {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 38%;
  background: linear-gradient(to top, #020202 0%, rgba(2, 2, 2, 0.75) 45%, transparent 100%);
  pointer-events: none;
  z-index: 3;
}

/* Layer 2: Central Archway Glowing F1 Royal Branding Portal */
.parallax-brand-portal {
  position: absolute;
  top: 46%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transform-origin: center center;
  will-change: transform, opacity;
}

.portal-light-aura {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) translateZ(0);
  width: clamp(260px, 42vw, 580px);
  height: clamp(260px, 42vw, 580px);
  border-radius: 50%;
  background: radial-gradient(circle at center, rgba(245, 211, 130, 0.42) 0%, rgba(212, 175, 55, 0.22) 25%, rgba(212, 175, 55, 0.08) 50%, transparent 72%);
  pointer-events: none;
  animation: auraBreath 4.2s ease-in-out infinite alternate;
  will-change: transform, opacity;
}

@keyframes auraBreath {
  0% { transform: translate(-50%, -50%) scale(0.94) translateZ(0); opacity: 0.7; }
  100% { transform: translate(-50%, -50%) scale(1.08) translateZ(0); opacity: 1; }
}

.portal-sunburst-rays {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) translateZ(0);
  width: clamp(340px, 58vw, 760px);
  height: clamp(340px, 58vw, 760px);
  border-radius: 50%;
  background: conic-gradient(
    from 0deg at 50% 50%,
    rgba(212, 175, 55, 0.12) 0deg,
    transparent 22deg,
    rgba(245, 211, 130, 0.15) 45deg,
    transparent 68deg,
    rgba(212, 175, 55, 0.12) 90deg,
    transparent 135deg,
    rgba(245, 211, 130, 0.16) 180deg,
    transparent 225deg,
    rgba(212, 175, 55, 0.12) 270deg,
    transparent 315deg,
    rgba(245, 211, 130, 0.15) 360deg
  );
  opacity: 0.65;
  pointer-events: none;
  animation: raysRotate 42s linear infinite;
  transform-origin: center center;
  will-change: transform;
}

@keyframes raysRotate {
  0% { transform: translate(-50%, -50%) rotate(0deg) translateZ(0); }
  100% { transform: translate(-50%, -50%) rotate(360deg) translateZ(0); }
}

.portal-brand-crest {
  position: relative;
  width: clamp(140px, 20vw, 220px);
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.portal-emblem-img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 0 25px rgba(245, 211, 130, 0.75)) drop-shadow(0 0 55px rgba(212, 175, 55, 0.4));
  transform: translateZ(0);
}

.portal-crest-glow {
  position: absolute;
  inset: 15%;
  background: radial-gradient(circle, rgba(245, 211, 130, 0.6) 0%, transparent 75%);
  filter: blur(20px);
  z-index: -1;
}

.portal-wordmark {
  margin-top: 14px;
  text-align: center;
}

.portal-badge-text {
  display: inline-block;
  font-family: var(--font-serif-display, 'Cinzel Decorative', serif);
  font-size: clamp(0.72rem, 1.2vw, 1.05rem);
  font-weight: 700;
  letter-spacing: 0.38em;
  color: #F5D382;
  text-transform: uppercase;
  text-shadow: 0 0 16px rgba(212, 175, 55, 0.8), 0 2px 8px rgba(0, 0, 0, 0.95);
}

/* Layer 3: Particles Canvas */
.parallax-particles-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  pointer-events: none;
}

/* Layer 4: Foreground Grand Opening Content & Live Countdown */
.hero-parallax-content {
  position: relative;
  z-index: 10;
  width: 92%;
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  transform-origin: center center;
  will-change: transform, opacity, filter;
}

.parallax-caption {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Mobile Responsiveness & Flawless Symmetry */
@media (max-width: 768px) {
  .parallax-palace-img {
    object-position: center 36%;
    width: 100%;
    height: 100%;
  }

  .parallax-brand-portal {
    top: 43%;
  }

  .portal-brand-crest {
    width: clamp(110px, 28vw, 155px);
  }

  .portal-badge-text {
    font-size: 0.68rem;
    letter-spacing: 0.28em;
  }

  .hero-parallax-content {
    width: 94%;
    max-width: 390px;
    padding: 0 10px;
  }

  .hero-grand-date {
    font-size: clamp(1.15rem, 5.2vw, 1.45rem);
    letter-spacing: 0.04em;
    line-height: 1.35;
    margin-bottom: 0.5rem;
  }

  .hero-grand-slogan {
    font-size: 0.8rem;
    letter-spacing: 0.14em;
    margin-bottom: 0.75rem;
  }

  .hero-worlds-pills {
    gap: 6px;
    margin-bottom: 1rem;
  }

  .hero-world-pill {
    font-size: 0.64rem;
    padding: 3px 8px;
  }

  .opening-countdown-wrap {
    gap: 6px;
    margin-bottom: 1.2rem;
  }

  .countdown-box {
    min-width: 48px;
    padding: 6px 4px;
  }

  .countdown-num {
    font-size: 1.15rem;
  }

  .countdown-lbl {
    font-size: 0.52rem;
  }

  .hero-cta-actions {
    flex-direction: column;
    width: 100%;
    max-width: 250px;
    gap: 8px;
    margin: 0 auto;
  }

  .hero-action-btn {
    width: 100%;
    padding: 9px 18px;
    font-size: 0.74rem;
  }
}