/* ============================================================
   Ontdek Stadswandelingen — geluidsknop in de hero.
   Bewust klein: styles.css blijft onaangeroerd.
   Laad dit ná styles.css.
   ============================================================ */

/* ------------------------------------------------------------
   Soepele overgangen tussen video's.
   Het hero-vlak krijgt de poster als achtergrond, zodat een
   wissel wegvloeit naar een beeld in plaats van naar zwart.
   ------------------------------------------------------------ */
.hero {
  background-image: url("../img/poster-ontdek.jpg");
  background-size: cover;
  background-position: center;
  background-color: #0f1a2b;
}

#heroVideo {
  opacity: 1;
  transition: opacity .3s ease;
}

.hero.is-fading #heroVideo { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  #heroVideo { transition: none; }
}

/* ------------------------------------------------------------
   Geluidsknop
   ------------------------------------------------------------ */
.hero__sound {
  position: absolute;
  z-index: 3;                       /* boven .overlay (1), naast .content (2) */
  right: clamp(14px, 3vw, 34px);
  bottom: clamp(14px, 3vw, 34px);

  display: inline-flex;
  align-items: center;
  gap: .55rem;

  margin: 0;
  padding: 10px 16px 10px 13px;
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 999px;

  font: inherit;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .02em;
  line-height: 1;
  color: #fff;

  background: rgba(12, 16, 30, .38);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  cursor: pointer;
  transition: background-color .22s ease, border-color .22s ease, transform .22s ease;
}

.hero__sound:hover,
.hero__sound:focus-visible {
  background: rgba(12, 16, 30, .66);
  border-color: #fff;
  transform: translateY(-1px);
}

.hero__sound:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.hero__sound-ico { display: inline-flex; width: 20px; height: 20px; }
.hero__sound-ico svg { width: 20px; height: 20px; }

/* icoon wisselt mee met de status */
.hero__sound .ico-on { display: none; }
.hero.is-sound-on .hero__sound .ico-off { display: none; }
.hero.is-sound-on .hero__sound .ico-on  { display: block; }

/* Zachte puls zolang het geluid uitstaat: slaat drie keer aan en stopt dan. */
@media (prefers-reduced-motion: no-preference) {
  .hero:not(.is-sound-on) .hero__sound::after {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: inherit;
    border: 1px solid rgba(255, 255, 255, .55);
    animation: odPulse 2.4s ease-out 3;
    pointer-events: none;
  }
}

@keyframes odPulse {
  0%   { transform: scale(1);    opacity: .75; }
  70%  { transform: scale(1.14); opacity: 0;   }
  100% { transform: scale(1.14); opacity: 0;   }
}

/* Overlay iets lichter zodra het geluid aanstaat: de film is dan het onderwerp. */
.hero.is-sound-on .overlay { opacity: .6; }

@media (max-width: 640px) {
  .hero__sound { padding: 9px 13px 9px 11px; font-size: 12px; }
  .hero__sound-ico, .hero__sound-ico svg { width: 18px; height: 18px; }
}