/* Trips On The Sea — production home hero video layer.
   The existing image slideshow stays underneath as the full fallback. */
.hero-video-layer{
  position:absolute;
  inset:0;
  z-index:1;
  width:100%;
  height:100%;
  overflow:hidden;
  pointer-events:none;
  background:transparent;
  contain:paint;
}

.hero-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  border:0;
  object-fit:cover;
  object-position:50% 50%;
  opacity:0;
  visibility:hidden;
  transition:opacity 460ms cubic-bezier(.22,.61,.36,1);
  transform:translate3d(0,0,0) scale(1.002);
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  -webkit-user-select:none;
  user-select:none;
}

/* Reveal only after the browser confirms actual playback. */
.hero.is-video-ready .hero-video{
  opacity:1;
  visibility:visible;
}

/* Any playback/load issue instantly exposes the existing image slideshow. */
.hero.is-video-stalled .hero-video,
.hero.is-image-fallback .hero-video{
  opacity:0;
  visibility:hidden;
}

/* The four image-slide controls are meaningful only while images are visible. */
.hero .hero-slides-indicator{
  transition:opacity .3s ease;
}
.hero.is-video-ready .hero-slides-indicator{
  opacity:0;
  pointer-events:none;
}

/* Desktop/tablet landscape: retain the natural centered drone composition. */
@media (min-width:768px){
  .hero-video{object-position:50% 50%}
}

/* Portrait phones crop a 16:9 source heavily. Bias the frame to the right so
   the boat remains visible instead of being cut at the edge. */
@media (max-width:767.98px){
  .hero-video{object-position:61% 50%}
}

/* Extra-tall/narrow phones need a little more right bias. */
@media (max-width:430px) and (min-height:700px){
  .hero-video{object-position:64% 50%}
}

@media (prefers-reduced-motion:reduce){
  .hero-video-layer{display:none!important}
  .hero-video{transition:none!important}
}