/* Portada de la cafetera: vídeo en bucle (café cayendo + humito) recortado a la zona de la taza, y la B de Bergue en la base.
   Todo va dentro de .hero__vapor, el contenedor que hero.js ya ajusta a la parte visible de la foto (1367 × 1151),
   así que las posiciones en % valen a cualquier tamaño. */

.hero__cafe-video {
  position: absolute;
  /* zona de la foto que cubre el vídeo: x 485–989, y 537–867 sobre 1367 × 1151 */
  left: 35.49%;
  top: 46.66%;
  width: 36.83%;
  height: 28.63%;
  display: block;
  object-fit: fill;
  /* Oculto hasta que está reproduciéndose de verdad: si el sistema bloquea el vídeo (ahorro de batería en iPhone)
     no se ve nada, ni su botón de play; la foto de debajo es idéntica. */
  opacity: 0;
  transition: opacity 0.5s ease;
  /* bordes difuminados: el vídeo se funde con la foto, que es idéntica fuera de lo que se mueve */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 9%, #000 78%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 9%, #000 78%, transparent 100%);
  mask-composite: intersect;
}

.hero__cafe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Firma visible, del mismo carácter tipográfico que la web. */
.cf-marca { opacity: 1; mix-blend-mode: multiply; }
.cf-firma { font-family: var(--font-display); font-size: 112px; font-weight: 800; letter-spacing: -5px; font-variation-settings: "opsz" 144, "SOFT" 30, "WONK" 0; }
/* El vídeo del café es decorativo: en iPhone con ahorro de batería el sistema bloquea el
   reproductor automático y mostraba un botón "play" encima de la taza. Se oculta siempre. */
.hero__cafe-video { pointer-events: none; }
.hero__cafe-video.is-reproduciendo { opacity: 1; }
.hero__cafe-video::-webkit-media-controls,
.hero__cafe-video::-webkit-media-controls-panel,
.hero__cafe-video::-webkit-media-controls-overlay-play-button,
.hero__cafe-video::-webkit-media-controls-start-playback-button,
.hero__cafe-video::-webkit-media-controls-enclosure {
  display: none !important;
  opacity: 0 !important;
  -webkit-appearance: none;
}