/* ============================================================
   LPR — CINEMATIC LAYER (production)
   Three features promoted from the epic preview:
   1. Scroll-driven hero exit (curtain lift)
   2. Vault teaser band on the home page
   3. Count-up stats with live transactions number
   ============================================================ */

/* ── 1. Hero scroll-exit ──────────────────────────────────── */
/* cinematic.js drives --hero-exit 0→1 across the first viewport */
#epicHero { overflow: hidden; }
#epicHero .hero-video,
#epicHero .hero-carousel {
  transform: scale(calc(1 + var(--hero-exit, 0) * 0.08));
  filter: brightness(calc(1 - var(--hero-exit, 0) * 0.5));
  will-change: transform, filter;
}
#epicHero .hero-content,
#epicHero .hero-agent-card {
  opacity: calc(1 - var(--hero-exit, 0) * 1.4);
  transform: translateY(calc(var(--hero-exit, 0) * -28px));
  will-change: opacity, transform;
}
/* subtle film vignette grounds the video */
#epicHero::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0) 55%, rgba(0,0,0,0.38) 100%);
}

/* ── 2. Vault teaser band ─────────────────────────────────── */
/* Deliberately literal dark colors — this band stays near-black in BOTH themes */
.vault-teaser {
  position: relative;
  background: #0a1628;
  padding: clamp(4rem, 9vw, 7rem) 0;
  overflow: hidden;
  border-top: 1px solid rgba(201, 168, 76, 0.16);
  border-bottom: 1px solid rgba(201, 168, 76, 0.16);
}
.vault-teaser-glow {
  position: absolute;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201,168,76,0.16) 0%, rgba(201,168,76,0) 65%);
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: opacity 0.5s ease;
  z-index: 1;
}
.vault-teaser:hover .vault-teaser-glow { opacity: 1; }
.vault-teaser-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}
@media (max-width: 860px) {
  .vault-teaser-inner { grid-template-columns: 1fr; }
  .vault-teaser-silhouettes { order: 2; margin-top: 1rem; }
}
.vault-teaser-silhouettes {
  position: relative;
  height: 300px;
}
.vt-card {
  position: absolute;
  width: 56%;
  height: 78%;
  border-radius: 8px;
  border: 1px solid rgba(201, 168, 76, 0.28);
  background-image: url('https://res.cloudinary.com/dzbkqhuwq/image/upload/e_blur:1800,c_fill,w_500,q_auto:low,f_auto/v1778853034/lpr-properties/hero/beauty_central_hero_poster.jpg');
  background-size: cover;
  background-position: center;
  filter: brightness(0.42) saturate(0.75);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.5);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.vt-card-1 { left: 0;   top: 10%; transform: rotate(-6deg); z-index: 1; }
.vt-card-2 { left: 22%; top: 0;   transform: rotate(2deg);  z-index: 2; background-position: left center; }
.vt-card-3 { left: 44%; top: 14%; transform: rotate(7deg);  z-index: 3; background-position: right center; }
.vault-teaser:hover .vt-card-1 { transform: rotate(-7.5deg) translateY(-6px); }
.vault-teaser:hover .vt-card-2 { transform: rotate(1deg)    translateY(-10px); }
.vault-teaser:hover .vt-card-3 { transform: rotate(8.5deg)  translateY(-5px); }
.vault-teaser-silhouettes::after {
  content: '🔒';
  position: absolute;
  left: 38%;
  top: 38%;
  font-size: 2rem;
  z-index: 4;
  filter: drop-shadow(0 4px 14px rgba(0,0,0,0.6));
}
.vault-teaser-headline {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.9rem, 4vw, 3rem);
  color: #f5f2ed;
  line-height: 1.18;
  margin: 0.7rem 0 1rem;
}
.vault-teaser-headline em { font-style: italic; color: #c9a84c; }
.vault-teaser-line {
  color: rgba(245, 242, 237, 0.72);
  font-size: 0.98rem;
  line-height: 1.7;
  max-width: 50ch;
  margin-bottom: 1.6rem;
}

/* ── 3. Count-up stats ────────────────────────────────────── */
.credibility-number { font-variant-numeric: tabular-nums; }
/* three stats share one row once the live transactions stat is added */
.promise-stats:has(#liveTxStat) { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 640px) {
  .promise-stats:has(#liveTxStat) { grid-template-columns: 1fr; }
}

/* ── Motion safety ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  #epicHero .hero-video, #epicHero .hero-carousel,
  #epicHero .hero-content, #epicHero .hero-agent-card {
    transform: none; filter: none; opacity: 1;
  }
  .vt-card, .vault-teaser:hover .vt-card-1,
  .vault-teaser:hover .vt-card-2, .vault-teaser:hover .vt-card-3 { transition: none; }
}