/* Onlybaie: a single silent film, with a static fallback and explicit playback. */
#onlybaie-perspective .op-hero.op-hero-film { background: #101e18; }
#onlybaie-perspective .op-villa-media {
  position: absolute; top: 0; right: 0; width: 81%; height: 100%; margin: 0;
}
#onlybaie-perspective .op-villa-poster,
#onlybaie-perspective .op-villa-video {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  object-fit: cover; object-position: 50% 50%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%);
  mask-image: linear-gradient(90deg, transparent, #000 14%);
}
#onlybaie-perspective .op-villa-video { opacity: 0; transition: opacity .25s; }
#onlybaie-perspective .op-villa-media[data-ready="true"] .op-villa-video { opacity: 1; }
#onlybaie-perspective .op-hero-film:after {
  z-index: 1;
  background: linear-gradient(90deg,#101e18 0%,#101e18ed 18%,#101e1896 33%,#101e1814 51%,transparent 65%),linear-gradient(0deg,#101e184d,transparent 32%);
}
#onlybaie-perspective .op-hero-film .op-hero-content { z-index: 2; }
#onlybaie-perspective .op-hero-film h1 { font-size: clamp(54px,5.25vw,96px); }
#onlybaie-perspective .op-villa-toggle {
  position: absolute; top: 22px; right: clamp(22px,4vw,60px); z-index: 3;
  display: inline-flex; align-items: center; gap: 9px; min-height: 42px;
  padding: 10px 15px; border: 1px solid #ffffff6b; border-radius: 30px;
  background: #101e18c9; color: #fff; font: inherit; font-size: 12px;
  cursor: pointer; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
#onlybaie-perspective .op-villa-toggle[hidden] { display: none; }
#onlybaie-perspective .op-villa-toggle:hover { background: #101e18; }
#onlybaie-perspective .op-villa-toggle:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
#onlybaie-perspective .op-villa-symbol { width: 13px; height: 14px; position: relative; display: block; }
#onlybaie-perspective .op-villa-symbol:before {
  content: ''; position: absolute; top: 1px; left: 3px;
  border-left: 9px solid currentColor; border-top: 6px solid transparent; border-bottom: 6px solid transparent;
}
#onlybaie-perspective .op-villa-toggle[data-playing="true"] .op-villa-symbol:before {
  top: 1px; left: 1px; width: 3px; height: 12px; border: 0; background: currentColor; box-shadow: 7px 0 currentColor;
}
@media (min-width:1700px) {
  #onlybaie-perspective .op-villa-media { width: 76%; }
}
@media (max-width:1100px) {
  #onlybaie-perspective .op-hero.op-hero-film {
    display: flex; flex-direction: column; align-items: stretch; min-height: 0; padding-bottom: 24px;
  }
  #onlybaie-perspective .op-hero-film:after { display: none; }
  #onlybaie-perspective .op-hero-film .op-hero-content {
    order: 0; width: 100%; max-width: none; padding-block: 38px 27px;
  }
  #onlybaie-perspective .op-hero-film h1 { font-size: clamp(42px,11.5vw,68px); margin-block: 22px 21px; }
  #onlybaie-perspective .op-hero-film .op-hero-content > p { max-width: 450px; }
  #onlybaie-perspective .op-villa-media {
    order: 1; flex: none; position: relative; inset: auto; width: 100%; height: auto; aspect-ratio: 16 / 9;
  }
  #onlybaie-perspective .op-villa-poster,
  #onlybaie-perspective .op-villa-video { object-fit: contain; mask-image: none; -webkit-mask-image: none; }
  #onlybaie-perspective .op-villa-toggle {
    top: auto; bottom: 12px; right: 16px; min-height: 40px; padding: 8px 12px;
  }
  #onlybaie-perspective .op-hero-film .op-hero-bottom {
    order: 2; position: relative; inset: auto; width: 100%; margin-top: 20px;
  }
  #onlybaie-perspective .op-hero-film .op-photo-signature { display: none; }
  #onlybaie-perspective .op-hero-film .op-hero-product { width: 100%; max-width: none; }
}
@media (prefers-reduced-motion:reduce) {
  #onlybaie-perspective .op-villa-video { transition: none; }
}