/* ════════════════════════════════════════
   VSL — premium video card with breathing glow
════════════════════════════════════════ */

@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

.vsl {
  position: relative;
  z-index: 1;
  padding-block: clamp(0.5rem, 2vw, 1.5rem) clamp(0.5rem, 2vw, 1.5rem);
}

.vsl__wrap {
  max-width: 920px;
  margin-inline: auto;
  position: relative;
}

/* ── Breathing glow behind card ── */
.vsl__glow {
  position: absolute;
  inset: -8% -6%;
  background: radial-gradient(ellipse at center,
    rgba(216, 216, 221, 0.09) 0%,
    rgba(216, 216, 221, 0.03) 38%,
    transparent 72%
  );
  filter: blur(48px);
  z-index: -1;
  pointer-events: none;
  animation: vsl-breathe 4.5s var(--ease-sine) infinite;
}

@keyframes vsl-breathe {
  0%, 100% { opacity: 0.55; transform: scale(1);    }
  50%      { opacity: 1;    transform: scale(1.04); }
}

/* ── Card with rotating silver conic border ── */
.vsl__card {
  position: relative;
  border-radius: 14px;
  padding: 1.5px;
  isolation: isolate;
  overflow: hidden;
  background: var(--c-bg);
}

.vsl__card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: conic-gradient(
    from var(--angle, 0deg),
    rgba(245, 245, 247, 0)    0deg,
    rgba(216, 216, 221, 0.4)  60deg,
    rgba(245, 245, 247, 0.85) 90deg,
    rgba(154, 154, 163, 0.5)  110deg,
    rgba(245, 245, 247, 0)    180deg,
    rgba(216, 216, 221, 0.4)  250deg,
    rgba(245, 245, 247, 0.85) 270deg,
    rgba(154, 154, 163, 0.5)  290deg,
    rgba(245, 245, 247, 0)    360deg
  );
  animation: vsl-rotate 6s linear infinite;
  z-index: 0;
}

@keyframes vsl-rotate { to { --angle: 360deg; } }

/* ── Player ── */
.vsl__player {
  position: relative;
  z-index: 1;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: #000;
}

.vsl__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── Click-for-sound overlay ── */
.vsl__cta {
  position: absolute;
  inset: 0;
  background: transparent;
  border: 0;
  padding: 0 0 clamp(1rem, 4vw, 2rem);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  transition: opacity 0.45s var(--ease-expo);
  z-index: 2;
}

.vsl__cta--hidden { opacity: 0; pointer-events: none; }

.vsl__cta-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.15rem;
  background: rgba(10, 10, 10, 0.55);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border: 1px solid rgba(216, 216, 221, 0.25);
  border-radius: 999px;
  color: var(--c-text);
  font-family: var(--f-body);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  animation: vsl-pulse 2.4s var(--ease-sine) infinite;
}

.vsl__cta-pill svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

@keyframes vsl-pulse {
  0%, 100% { box-shadow: 0 0 0 0   rgba(216, 216, 221, 0.22); transform: translateY(0);    }
  50%      { box-shadow: 0 0 0 10px rgba(216, 216, 221, 0);    transform: translateY(-2px); }
}

/* ── Big centered play button — fallback when autoplay is blocked ── */
.vsl__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(64px, 9vw, 84px);
  height: clamp(64px, 9vw, 84px);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  color: #0a0a0a;
  border: 1px solid rgba(255, 255, 255, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 3;
  padding: 0;
  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(0, 0, 0, 0.05),
    inset 0 -2px 4px rgba(0, 0, 0, 0.06);
  transition:
    transform 0.35s var(--ease-expo),
    box-shadow 0.35s var(--ease-expo),
    opacity 0.4s var(--ease-expo);
  animation: vsl-play-pulse 2.4s var(--ease-sine) infinite;
}

.vsl__play:hover {
  transform: translate(-50%, -50%) scale(1.07);
  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.6),
    0 0 28px rgba(216, 216, 221, 0.4);
}

.vsl__play:active {
  transform: translate(-50%, -50%) scale(0.96);
}

.vsl__play svg {
  width: 38%;
  height: 38%;
  margin-left: 4px;       /* visually center the triangle */
  fill: currentColor;
}

.vsl__play--hidden {
  opacity: 0;
  pointer-events: none;
  animation: none;
}

@keyframes vsl-play-pulse {
  0%, 100% { box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.5),
    0 0 0 0 rgba(255, 255, 255, 0.45),
    0 0 0 1px rgba(0, 0, 0, 0.05); }
  60%      { box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.5),
    0 0 0 18px rgba(255, 255, 255, 0),
    0 0 0 1px rgba(0, 0, 0, 0.05); }
}

@media (prefers-reduced-motion: reduce) {
  .vsl__card::before, .vsl__glow, .vsl__cta-pill { animation: none; }
}