/* ============================================================
   Hero — cinematic overrides
   Dramatic lighting, real-window chrome, film grain,
   slide transition between variants.
   ============================================================ */

/* Variant rotator — slide-in transition wrapper */
.bgh-rot, .bgh-visual, .hv-stage, .hv-chrome {
  --hv-glow-1: rgba(70,150,255,0.35);
  --hv-glow-2: rgba(120,80,255,0.25);
  --hv-glow-3: rgba(0,220,180,0.18);
}

/* Ambient lighting — large soft orbs behind the visual */
.bgh-visual, [data-hero-visual], .hero-engine .hero-right {
  position: relative;
  isolation: isolate;
}
.bgh-visual::before, [data-hero-visual]::before, .hero-engine .hero-right::before {
  content: "";
  position: absolute;
  inset: -10% -8% -10% -6%;
  background:
    radial-gradient(48% 60% at 78% 22%, var(--hv-glow-1) 0%, transparent 60%),
    radial-gradient(40% 55% at 18% 78%, var(--hv-glow-2) 0%, transparent 65%),
    radial-gradient(30% 40% at 60% 90%, var(--hv-glow-3) 0%, transparent 70%);
  filter: blur(28px) saturate(1.05);
  z-index: -2;
  opacity: 0.92;
  animation: hv-ambient 16s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes hv-ambient {
  0%   { transform: translate3d(0,0,0) scale(1);   opacity: 0.85; }
  50%  { transform: translate3d(-1.5%,1%,0) scale(1.04); opacity: 1; }
  100% { transform: translate3d(2%,-1.2%,0) scale(1.02); opacity: 0.9; }
}

/* Film grain — subtle real-world texture */
.bgh-visual::after, [data-hero-visual]::after, .hero-engine .hero-right::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
  opacity: 0.06;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* Variant slide-in — runs whenever the visual root re-keys */
.bgh-rot, .hv-chrome {
  animation: hv-slide-in 0.78s cubic-bezier(0.22, 0.86, 0.34, 1) both;
}
@keyframes hv-slide-in {
  0%   { opacity: 0; transform: translate3d(28px,0,0) scale(0.985); filter: blur(6px) saturate(0.9); }
  60%  { opacity: 1; filter: blur(0) saturate(1.05); }
  100% { opacity: 1; transform: translate3d(0,0,0) scale(1); filter: blur(0) saturate(1); }
}

/* Real-window chrome upgrade — depth, glass, traffic lights */
.hv-chrome {
  position: relative;
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(18,28,52,0.78) 0%, rgba(8,14,30,0.92) 100%),
    radial-gradient(120% 80% at 50% -10%, rgba(70,150,255,0.18) 0%, transparent 60%);
  border: 1px solid rgba(255,255,255,0.09);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.08) inset,
    0 0 0 1px rgba(0,0,0,0.4),
    0 30px 60px -20px rgba(0,0,0,0.65),
    0 60px 120px -40px rgba(40,80,180,0.35),
    0 0 80px -20px rgba(70,150,255,0.25);
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  overflow: hidden;
}

/* Top reflective edge highlight */
.hv-chrome::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
  z-index: 3;
}

/* Inner glass refraction layer */
.hv-chrome::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(80% 60% at 100% 0%, rgba(70,170,255,0.08) 0%, transparent 50%),
    linear-gradient(135deg, transparent 40%, rgba(255,255,255,0.025) 50%, transparent 60%);
  pointer-events: none;
  z-index: 1;
}

/* Title bar — macOS traffic lights */
.hv-chrome-bar {
  position: relative;
  padding: 14px 18px 12px 78px !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
  border-bottom: 1px solid rgba(255,255,255,0.07);
  z-index: 2;
}
.hv-chrome-bar::before {
  content: "";
  position: absolute;
  left: 18px; top: 50%;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: #ff5f57;
  box-shadow:
    0 0 0 0.5px rgba(0,0,0,0.3),
    20px 0 0 #febc2e, 20px 0 0 0.5px rgba(0,0,0,0.3),
    40px 0 0 #28c840, 40px 0 0 0.5px rgba(0,0,0,0.3);
  transform: translateY(-50%);
}

.hv-chrome-tag {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  color: rgba(220, 235, 255, 0.78);
  text-transform: uppercase;
}

.hv-chrome-status {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: #5be3a8;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.hv-chrome-status .hv-dot,
.hv-dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #5be3a8;
  box-shadow: 0 0 0 3px rgba(91,227,168,0.18), 0 0 12px rgba(91,227,168,0.7);
  animation: hv-livedot 1.6s ease-in-out infinite;
}
@keyframes hv-livedot {
  0%, 100% { opacity: 0.7; transform: scale(0.85); }
  50%      { opacity: 1;   transform: scale(1.1); }
}

.hv-chrome-body {
  position: relative;
  z-index: 2;
  padding: 18px 18px 16px !important;
}

/* Inner cards / modules — glassy micro-elevation */
.hv-sys-mod, .hv-agent, .hv-pipe-step,
.hv-vc-call, .hv-vc-chat, .hv-prod-seat,
.hv-surv-cam, .hv-pipe-detail, .hv-vc-chans,
.hv-prod-stats, .hv-feed, .hv-surv-events {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015)),
    rgba(8,14,28,0.5) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 8px 24px -10px rgba(0,0,0,0.6) !important;
  border-radius: 12px !important;
  backdrop-filter: blur(8px);
}

/* Active / on states get a real spotlight */
.hv-pipe-step.on,
.hv-pipe-step.done,
.hv-sys-mod.hv-c-mint,
.hv-sys-mod.hv-c-cyan,
.hv-agent.hv-c-mint,
.hv-agent.hv-c-cyan {
  position: relative;
}
.hv-pipe-step.on::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 12px;
  border: 1px solid rgba(91,180,255,0.55);
  box-shadow:
    0 0 0 3px rgba(91,180,255,0.1),
    0 0 24px rgba(91,180,255,0.35),
    inset 0 0 30px rgba(91,180,255,0.08);
  pointer-events: none;
  animation: hv-pulse 2.4s ease-in-out infinite;
}
@keyframes hv-pulse {
  0%, 100% { opacity: 0.85; }
  50%      { opacity: 1; }
}

/* Scanlines on surveillance feed — TV/CCTV vibe */
.hv-surv-cam {
  position: relative;
  background:
    radial-gradient(140% 100% at 50% 0%, rgba(255,180,80,0.08), transparent 60%),
    linear-gradient(180deg, #0a1424 0%, #060c18 100%) !important;
  overflow: hidden;
}
.hv-surv-cam::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 3px);
  pointer-events: none;
  mix-blend-mode: overlay;
}
.hv-surv-cam::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(100% 60% at 50% 50%, transparent 50%, rgba(0,0,0,0.45) 100%);
  pointer-events: none;
}
.hv-surv-box {
  border: 1.5px solid #ffb960 !important;
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.5),
    0 0 18px rgba(255,185,96,0.5) !important;
  animation: hv-bbox 2.2s ease-in-out infinite;
}
@keyframes hv-bbox {
  0%, 100% { opacity: 0.88; }
  50%      { opacity: 1; }
}

/* Voice waveform — make bars taller, glow */
.hv-vc-wave span {
  background: linear-gradient(180deg, #5be3a8, #2a9aff) !important;
  box-shadow: 0 0 8px rgba(91,227,168,0.55);
  border-radius: 2px;
}

/* Chat bubbles — iMessage-grade depth */
.hv-vc-msg.us {
  background: linear-gradient(180deg, #2a8eff, #1d5fd6) !important;
  color: #fff !important;
  box-shadow: 0 4px 14px -4px rgba(42,142,255,0.55), 0 1px 0 rgba(255,255,255,0.18) inset !important;
}
.hv-vc-msg.them {
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.04)) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  color: rgba(235, 240, 255, 0.95) !important;
}

/* Headline — cinematic kerning + subtle gradient */
.bgh-head, .hero-headline, .hero-engine h1 {
  text-wrap: balance;
  letter-spacing: -0.02em;
}
.bgh-head .accent, .hero-engine h1 em {
  background: linear-gradient(180deg, #6cc8ff 0%, #2a8eff 60%, #2a8eff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-style: normal;
}

/* Auto-rotate progress bar at top of visual — visible cue */
.bgh-rot::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  height: 2px;
  width: 100%;
  background: linear-gradient(90deg, #2a8eff, #5be3a8);
  transform-origin: left;
  animation: hv-progress 5s linear infinite;
  z-index: 5;
  border-radius: 2px;
  box-shadow: 0 0 12px rgba(42,142,255,0.6);
}
@keyframes hv-progress {
  from { transform: scaleX(0); opacity: 1; }
  to   { transform: scaleX(1); opacity: 0.85; }
}
/* Hide progress bar when manually locked (selector chip active) */
.bgh-locked .bgh-rot::before { display: none; }

/* Reduced motion — respect */
@media (prefers-reduced-motion: reduce) {
  .bgh-rot, .hv-chrome,
  .bgh-visual::before, .hero-engine .hero-right::before {
    animation: none !important;
  }
  .bgh-rot::before { animation: none !important; }
}