/* Generated editorial imagery and its restrained atmospheric motion layer. */
.home-hero {
  background-image:
    linear-gradient(90deg, rgba(244, 240, 228, 0.93) 0%, rgba(244, 240, 228, 0.77) 33%, rgba(244, 240, 228, 0.25) 62%, rgba(244, 240, 228, 0.58) 100%),
    linear-gradient(180deg, rgba(255, 253, 246, 0.22), rgba(225, 218, 196, 0.18)),
    url("/generated/hero-morning-room.png") !important;
  background-position: center center !important;
  background-size: cover !important;
}

.home-hero::before {
  background: radial-gradient(circle at 48% 31%, rgba(255, 255, 255, 0.34), transparent 42%), linear-gradient(180deg, transparent 62%, rgba(18, 48, 43, 0.12)) !important;
}

/* A clipped duplicate of the real landscape creates slow refraction only over the distant water. */
.home-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: url("/generated/hero-morning-room.png") center center / cover no-repeat;
  clip-path: polygon(0 42%, 65% 41%, 69% 80%, 48% 88%, 0 87%);
  -webkit-mask-image: radial-gradient(ellipse 62% 39% at 28% 66%, #000 0 48%, transparent 78%);
  mask-image: radial-gradient(ellipse 62% 39% at 28% 66%, #000 0 48%, transparent 78%);
  opacity: 0.18;
  filter: blur(0.45px) brightness(1.035) saturate(0.74);
  mix-blend-mode: soft-light;
  transform: translate3d(-0.34%, 0.03%, 0) scale(1.012, 1.006);
  transform-origin: 28% 67%;
  will-change: transform, opacity, filter;
  animation: river-breath 18s cubic-bezier(0.45, 0.05, 0.24, 0.96) infinite alternate;
}

@keyframes river-breath {
  0% {
    transform: translate3d(-0.34%, 0.03%, 0) scale(1.012, 1.006);
    opacity: 0.13;
    filter: blur(0.4px) brightness(1.02) saturate(0.72);
  }
  38% {
    transform: translate3d(0.12%, -0.035%, 0) scale(1.015, 1.004);
    opacity: 0.19;
    filter: blur(0.55px) brightness(1.045) saturate(0.76);
  }
  72% {
    transform: translate3d(0.3%, 0.055%, 0) scale(1.01, 1.008);
    opacity: 0.15;
    filter: blur(0.35px) brightness(1.025) saturate(0.7);
  }
  100% {
    transform: translate3d(-0.09%, -0.02%, 0) scale(1.014, 1.005);
    opacity: 0.2;
    filter: blur(0.5px) brightness(1.05) saturate(0.75);
  }
}

@keyframes river-breath-mobile {
  0% { transform: translate3d(-0.12%, 0, 0) scale(1.006); opacity: 0.055; filter: blur(0.3px) brightness(1.015) saturate(0.72); }
  50% { transform: translate3d(0.1%, -0.02%, 0) scale(1.008, 1.004); opacity: 0.1; filter: blur(0.4px) brightness(1.035) saturate(0.75); }
  100% { transform: translate3d(-0.04%, 0.025%, 0) scale(1.007); opacity: 0.07; filter: blur(0.28px) brightness(1.02) saturate(0.72); }
}

@media (max-width: 768px) {
  .home-hero {
    background-image:
      linear-gradient(180deg, rgba(244, 240, 228, 0.92) 0%, rgba(244, 240, 228, 0.76) 47%, rgba(244, 240, 228, 0.48) 100%),
      url("/generated/hero-morning-room.png") !important;
    background-position: 39% center !important;
  }

  .home-hero::after {
    background-position: 39% center;
    clip-path: polygon(0 43%, 100% 42%, 100% 72%, 0 76%);
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 25%, #000 70%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 25%, #000 70%, transparent 100%);
    animation-name: river-breath-mobile;
    animation-duration: 24s;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-hero::after { animation: none; transform: none; opacity: 0.08; }
}

html[data-reduced-motion="true"] .home-hero::after {
  animation: none;
  transform: none;
  opacity: 0.08;
}

@media (prefers-reduced-data: reduce) {
  .home-hero { background-image: linear-gradient(145deg, #f4f0e4, #ded7c4) !important; }
  .home-hero::after { display: none; }
}