/* ════════════════════════════════════════════════════════════════════════
   DOCK HERO — Single stunning hero photograph at golden-hour sunset
   Shore (marsh + live oaks + Spanish moss) on the RIGHT, open Intracoastal
   water and sunset sky on the LEFT, dock extending leftward from the right
   shore out over the water ending in a gazebo, boat lift, and family of
   four watching the sunset.

   Subtle Ken Burns motion (very slow zoom + drift) keeps the still image
   feeling alive without distracting from the editorial content layered
   on top.
   ════════════════════════════════════════════════════════════════════════ */

.dock-hero {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #0a1420;
}

.dock-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Anchor the focal point on the family/gazebo end of the dock
     (left-of-center vertically slightly below middle) */
  object-position: 40% 55%;
  display: block;
  will-change: transform;
  /* Very slow ~40s loop — barely perceptible motion, like a real
     cinematographer's tripod slowly creeping forward */
  animation: dockKenBurns 40s ease-in-out infinite alternate;
  transform-origin: 40% 60%;
}

/* Ken Burns: slow gentle zoom-in with a tiny leftward drift toward
   the gazebo/family. Reverses on alternate so it loops seamlessly. */
@keyframes dockKenBurns {
  0%   { transform: scale(1.04) translate(0, 0); }
  100% { transform: scale(1.10) translate(-1.2%, -0.6%); }
}

/* ════════════════════════════════════════════════════════════════════════
   CINEMATIC LETTERBOX BARS — Subtle "movie poster" feel
   ════════════════════════════════════════════════════════════════════════ */
.dock-hero__letterbox {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 5;
  pointer-events: none;
}

.dock-hero__letterbox--top {
  top: 0;
  height: 40px;
  background: linear-gradient(to bottom,
    rgba(0,0,0,0.55) 0%,
    rgba(0,0,0,0.15) 60%,
    rgba(0,0,0,0) 100%);
}

.dock-hero__letterbox--bottom {
  bottom: 0;
  height: 96px;
  background: linear-gradient(to top,
    rgba(0,0,0,0.65) 0%,
    rgba(0,0,0,0.20) 60%,
    rgba(0,0,0,0) 100%);
}

/* ════════════════════════════════════════════════════════════════════════
   REDUCED MOTION — Hold the image perfectly still
   ════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .dock-hero__img {
    animation: none !important;
    transform: scale(1.04);
  }
}

/* ════════════════════════════════════════════════════════════════════════
   MOBILE — Slightly shorter letterbox bars
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .dock-hero__letterbox--top    { height: 28px; }
  .dock-hero__letterbox--bottom { height: 64px; }
  /* On mobile, shift focus slightly more toward the gazebo/family */
  .dock-hero__img {
    object-position: 35% 55%;
  }
}