/* ============================================================
   PROMO VIDEO (homepage, under the hero)
   A framed video that plays on its own and loops. The only control
   is sound on/off. Script: /js/promo-video.js
   ============================================================ */
.video-section { background: var(--bg); padding-block: 88px 96px; }
.video-section .section-header { margin-bottom: 40px; }

.pv {
  position: relative; isolation: isolate;
  max-width: 1040px; margin-inline: auto;
  padding: 3px;
  border-radius: var(--radius-xl);
  background: var(--grad-main);
  box-shadow: var(--shadow-xl);
  /* z-index drops back only after the spotlight fades (see .pv-lit) */
  transition: transform .5s var(--ease), box-shadow .5s, z-index 0s .5s;
}
.pv::before {  /* soft brand glow behind the frame */
  content: ''; position: absolute; inset: 8% 4% -5%; z-index: -1;
  border-radius: inherit;
  background: var(--grad-main);
  filter: blur(50px); opacity: .45;
}
.pv-frame {
  position: relative; overflow: hidden; aspect-ratio: 16 / 9;
  border-radius: calc(var(--radius-xl) - 3px);
  background: #050a14;
}
.pv-video { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Sound button: "Tap for sound" until there is sound or the visitor chooses,
   then just the speaker icon, which fades back so the video stays clear. */
.pv-sound {
  position: absolute; right: clamp(.6rem, 1.6vw, 1.1rem); bottom: clamp(.6rem, 1.6vw, 1.1rem);
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  min-height: 42px; min-width: 42px; padding: .5rem 1rem .5rem .8rem;
  border-radius: var(--radius-full);
  border: 1px solid rgba(255,255,255,.3);
  background: rgba(6,12,24,.55);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: #fff; font: 600 .84rem "Inter", sans-serif;
  cursor: pointer;
  transition: background-color .2s, transform .2s, opacity 1.2s ease, padding .35s var(--ease), gap .35s;
}
.pv-sound:hover { background: rgba(6,12,24,.75); transform: translateY(-1px); }
.pv-sound i { width: 18px; font-size: 1rem; text-align: center; }
.pv-sound .pv-i-on, .pv-on .pv-sound .pv-i-off { display: none; }
.pv-on .pv-sound .pv-i-on { display: inline-block; }
.pv-sound span { max-width: 9em; overflow: hidden; white-space: nowrap; transition: max-width .35s var(--ease), opacity .25s; }
.pv-quiet .pv-sound { gap: 0; padding: 0; }
.pv-quiet .pv-sound span { max-width: 0; opacity: 0; }
.pv-faded .pv-sound { opacity: .45; }
.pv-faded .pv-sound:hover, .pv-faded .pv-sound:focus-visible { opacity: 1; transition-duration: .2s; }
/* Gentle pulse while the video waits for its first tap. */
.pv:not(.pv-on):not(.pv-quiet) .pv-sound { animation: pvPulse 2.4s ease-out infinite; }
@keyframes pvPulse {
  0%       { box-shadow: 0 0 0 0 rgba(129,140,248,.6); }
  70%,100% { box-shadow: 0 0 0 14px rgba(129,140,248,0); }
}

.pv-play {
  position: absolute; inset: 0; margin: auto;
  width: clamp(64px, 9vw, 92px); height: clamp(64px, 9vw, 92px);
  display: grid; place-items: center;
  border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255,255,255,.92); color: var(--primary-dark);
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  box-shadow: 0 18px 40px -12px rgba(0,0,0,.6);
}
.pv-play[hidden] { display: none; }
.pv-play i { margin-left: 6%; }

/* Phones: when a downward scroll stops with the whole video on screen, the
   page dims around it until the next scroll (set by the script). */
.pv-dim {
  position: fixed; inset: 0; z-index: 1100; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 45%, rgba(3,8,18,.55), rgba(3,8,18,.85));
  opacity: 0; visibility: hidden;
  transition: opacity .45s ease, visibility 0s linear .45s;
}
.pv-dim.on { opacity: 1; visibility: visible; transition: opacity .45s ease; }
.pv.pv-lit {
  z-index: 1101; transform: scale(1.05);
  box-shadow: 0 0 0 1px rgba(255,255,255,.22), 0 40px 90px -30px rgba(99,102,241,.8);
  transition: transform .5s var(--ease), box-shadow .5s, z-index 0s;
}

@media (max-width: 760px) {
  .video-section { padding-block: 56px 64px; }
  .video-section .section-header { margin-bottom: 28px; }
  .pv { border-radius: var(--radius-lg); }
  .pv-frame { border-radius: calc(var(--radius-lg) - 3px); }
}
@media (max-width: 560px) {
  .pv { margin-inline: -14px; }  /* a little wider than the text on phones */
  .pv-sound { min-height: 38px; min-width: 38px; padding: .4rem .8rem .4rem .65rem; font-size: .78rem; }
}
@media (prefers-reduced-motion: reduce) {
  .pv:not(.pv-on) .pv-sound { animation: none; }
  .pv.pv-lit { transform: none; }
}