/* ============================================================
   Landing page cinematic polish (2026-04-18)
   Parallax, animated hero reveal, grid upgrades, Pixar-depth
   ============================================================ */

/* Hero video full-bleed + darken overlay */
.hero-video-wrapper video {
  transform: scale(1.08);
  filter: saturate(1.1) brightness(0.65) contrast(1.05);
  transition: transform 6s ease-out;
  animation: heroKenBurns 20s ease-in-out infinite alternate;
}

@keyframes heroKenBurns {
  from { transform: scale(1.05) translate(0, 0); }
  to   { transform: scale(1.18) translate(-2%, -1%); }
}

.hero-video-wrapper::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 45%, transparent 20%, rgba(0,0,0,0.5) 60%, rgba(8,6,10,0.92) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.2) 0%, transparent 40%, rgba(8,6,10,0.6) 100%);
  pointer-events: none;
  z-index: 1;
}

/* Hero content reveal on load */
.hero-content {
  position: relative;
  z-index: 2;
  animation: heroReveal 1.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-content .hero-subtitle {
  animation: fadeUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.hero-content h1 {
  animation: fadeUp 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both;
  text-shadow: 0 2px 40px rgba(0,0,0,0.7), 0 0 80px rgba(232,148,74,0.15);
}
.hero-content .hero-description {
  animation: fadeUp 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.35s both;
}
.hero-content > div:nth-child(4) {
  animation: fadeUp 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.5s both;
}
.hero-content .flex-row {
  animation: fadeUp 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.65s both;
}

@keyframes heroReveal {
  from { opacity: 0; transform: translateY(30px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Gold gradient headline */
.hero-content h1 .text-gold {
  background: linear-gradient(135deg, #ffd07a 0%, #e8944a 40%, #d97638 70%, #f7c85b 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: goldShimmer 6s ease-in-out infinite;
  filter: drop-shadow(0 0 30px rgba(232,148,74,0.35));
}

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

/* CTA buttons - cinematic hover */
.btn.btn-gold {
  background: linear-gradient(135deg, #f0a55e 0%, #e8944a 40%, #d97638 100%) !important;
  box-shadow:
    0 4px 20px rgba(232,148,74,0.35),
    0 0 0 1px rgba(255,255,255,0.08) inset;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}

.btn.btn-gold::before {
  content: "";
  position: absolute;
  top: 0; left: -100%; height: 100%; width: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  transition: left 0.7s ease;
}

.btn.btn-gold:hover {
  transform: translateY(-3px) scale(1.04);
  box-shadow:
    0 10px 30px rgba(232,148,74,0.5),
    0 0 40px rgba(232,148,74,0.25),
    0 0 0 1px rgba(255,255,255,0.12) inset;
}

.btn.btn-gold:hover::before {
  left: 100%;
}

/* Card cinematic depth */
.model-card {
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.5s ease, border-color 0.5s ease;
}

.model-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow:
    0 30px 70px rgba(0,0,0,0.65),
    0 0 50px rgba(232,148,74,0.15),
    0 0 0 1px rgba(232,148,74,0.25) inset !important;
  border-color: rgba(232,148,74,0.45) !important;
  z-index: 10;
}

.model-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 100%, rgba(232,148,74,0.18) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
  z-index: 2;
}

.model-card:hover::after { opacity: 1; }

/* Section headers dramatic */
.section-title {
  font-weight: 800 !important;
  letter-spacing: -0.015em !important;
  background: linear-gradient(135deg, #fff 0%, #fff 60%, #e8944a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Online-now avatars pulse */
.online-avatar-ring {
  animation: onlinePulse 2.8s ease-in-out infinite;
}

@keyframes onlinePulse {
  0%, 100% {
    box-shadow:
      0 0 0 3px rgba(34,197,94,0.3),
      0 0 12px rgba(34,197,94,0.25),
      0 0 28px rgba(232,148,74,0.15);
  }
  50% {
    box-shadow:
      0 0 0 4px rgba(34,197,94,0.55),
      0 0 24px rgba(34,197,94,0.4),
      0 0 50px rgba(232,148,74,0.3);
  }
}

/* Scroll parallax effect hint */
@media (prefers-reduced-motion: no-preference) {
  .hero-video-wrapper {
    will-change: transform;
  }
}