/* Vibe Package media: film section and motion-still containers.
   Loaded after styles.css. Does not modify any existing rule. */

/* ---- Film section ----
   The film reads as a mounted panel, not a full-bleed screen. It sits slightly
   shorter than the viewport so the trust bar below peeks above the fold, and is
   lifted off the warm-black ground by a mat, an edge highlight and a layered
   shadow stack. The ::before bloom reads as light thrown by the projection. */
.film-section {
  position: relative;
  min-height: 88vh;
  min-height: 88dvh;
  overflow: hidden;
  background: var(--warm-black);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(36px, 6vh, 88px) clamp(18px, 4vw, 64px);
}
.film-section::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 47%;
  width: min(1560px, 132%);
  aspect-ratio: 16 / 10;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    ellipse at center,
    rgba(184, 92, 63, 0.18) 0%,
    rgba(212, 160, 61, 0.08) 38%,
    transparent 68%
  );
  pointer-events: none;
  z-index: 0;
}

/* The mat. Padding is the visible frame; the shadow stack does the lifting —
   a hairline highlight along the top edge (light from above), a dark bottom
   edge, then contact, mid and ambient shadows at increasing blur. */
.film-frame {
  position: relative;
  z-index: 1;
  width: min(1160px, 100%);
  max-height: 100%;
  aspect-ratio: 16 / 9;
  padding: clamp(7px, 0.75vw, 13px);
  border-radius: 6px;
  background: linear-gradient(158deg, #3d2619 0%, #22130c 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 233, 209, 0.24),
    inset 0 -1px 0 rgba(0, 0, 0, 0.55),
    0 1px 2px rgba(0, 0, 0, 0.5),
    0 14px 34px rgba(0, 0, 0, 0.48),
    0 44px 92px rgba(0, 0, 0, 0.4);
}

/* The JS resolves the master on this same condition, so the frame's ratio must
   track it or object-fit would crop a portrait film into a landscape box. */
@media (orientation: portrait) {
  .film-frame {
    width: min(540px, 100%);
    aspect-ratio: 9 / 16;
  }
}

.film-video {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 3px;
  background: #000;
  z-index: 1;
}

.film-chrome {
  position: absolute;
  z-index: 2;
  left: clamp(7px, 0.75vw, 13px);
  right: clamp(7px, 0.75vw, 13px);
  bottom: clamp(7px, 0.75vw, 13px);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px 22px 20px;
  border-radius: 0 0 3px 3px;
  background: linear-gradient(
    to top,
    rgba(18, 10, 6, 0.8),
    rgba(18, 10, 6, 0.28) 58%,
    transparent
  );
}
.film-label {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
}
.film-controls {
  margin-left: auto;
  display: flex;
  gap: 12px;
}
.film-btn {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: rgba(0, 0, 0, 0.35);
  color: var(--white);
  border-radius: 999px;
  padding: 8px 18px;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition:
    background 0.25s ease,
    border-color 0.25s ease;
}
.film-btn:hover {
  background: rgba(0, 0, 0, 0.6);
  border-color: var(--white);
}
.film-btn:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 3px;
}
.film-progress {
  position: absolute;
  z-index: 3;
  left: clamp(7px, 0.75vw, 13px);
  right: clamp(7px, 0.75vw, 13px);
  bottom: clamp(7px, 0.75vw, 13px);
  height: 2px;
  border-radius: 0 0 3px 3px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.18);
}
.film-progress-bar {
  height: 100%;
  width: 0%;
  background: var(--terracotta);
  transition: width 0.2s linear;
}

/* ---- Motion stills in section photo slots ---- */
/* Mirrors each container's img rules so swapping img -> video does not shift
   layout. The homepage uses .image-split-photo and .amenity-feature-photo;
   amenities.html uses .split-image. The six clips land at three different
   heights (1280x720, 1280x710, 1280x798), so object-fit: cover is required —
   do not assume a uniform tile aspect. */
.image-split-photo video,
.amenity-feature-photo video,
.split-image video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 4px;
}

/* Specificity must beat styles.css's `.image-split-photo img { display: block }`
   and `.amenity-feature-photo img { display: block }` (both 0,1,1), or the
   poster stays in flow and adds ~440px of dead space to each section. */
.image-split-photo img.motion-poster,
.amenity-feature-photo img.motion-poster,
.split-image img.motion-poster {
  display: none;
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .hero-video {
    display: none !important;
  }
  .image-split-photo video,
  .amenity-feature-photo video,
  .split-image video {
    display: none !important;
  }
  /* Equal specificity (0,1,2) to the default rule above, but this block comes
     later in the file, so it wins the cascade without needing !important. */
  .image-split-photo img.motion-poster,
  .amenity-feature-photo img.motion-poster,
  .split-image img.motion-poster {
    display: block;
  }
}