/*
 * Ethos Homepage R8.4.18
 * Fixed-mask cinemagraph treatment using the approved hero photographs.
 * The sky drifts gently. The center pool moves at a faster, more visible pace.
 * The architecture and landscaping remain on the untouched base photograph.
 */

.ethos-home-hero__media.home-hero__media {
  overflow: hidden;
  transform: none !important;
}

.ethos-home-hero__motion {
  clip-path: inset(0);
  inset: 0;
  mask-image: url("/wp-content/themes/ethos-r46/assets/images/cinemagraph/2026-07-28-ethos-hero-desktop-sky-water-alpha-mask-r1.png");
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: cover;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  position: absolute;
  transition: opacity 700ms ease;
  will-change: opacity;
  -webkit-mask-image: url("/wp-content/themes/ethos-r46/assets/images/cinemagraph/2026-07-28-ethos-hero-desktop-sky-water-alpha-mask-r1.png");
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: cover;
}

.ethos-home-hero__motion::before,
.ethos-home-hero__motion::after {
  content: "";
  inset: -4%;
  pointer-events: none;
  position: absolute;
}

.ethos-home-hero__motion::before {
  background-image: url("/wp-content/themes/ethos-r46/assets/images/2026-07-28-ethos-california-alabama-dual-estate-hero-desktop-r8.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  mask-image: url("/wp-content/themes/ethos-r46/assets/images/cinemagraph/2026-07-28-ethos-hero-desktop-sky-water-alpha-mask-r1.png");
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: cover;
  -webkit-mask-image: url("/wp-content/themes/ethos-r46/assets/images/cinemagraph/2026-07-28-ethos-hero-desktop-sky-water-alpha-mask-r1.png");
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: cover;
}

.ethos-home-hero__motion--sky {
  clip-path: inset(0 0 48% 0);
}

.ethos-home-hero__motion--sky::before {
  animation: ethos-hero-sky-drift 16s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate;
  filter: brightness(1.015) saturate(1.02);
  transform-origin: 50% 20%;
}

.ethos-home-hero__motion--water {
  clip-path: inset(66% 0 0 0);
}

.ethos-home-hero__motion--water::before {
  animation: ethos-hero-water-flow 2.7s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate;
  filter: brightness(1.055) contrast(1.04) saturate(1.065);
  transform-origin: 50% 82%;
}

.ethos-home-hero__motion--water::after {
  animation: ethos-hero-water-shimmer 2.2s linear infinite;
  background:
    repeating-linear-gradient(
      102deg,
      transparent 0,
      transparent 42px,
      rgba(238, 197, 128, 0.055) 58px,
      transparent 76px
    );
  background-size: 220px 100%;
  mix-blend-mode: screen;
  opacity: 0.5;
}

.ethos-home-hero.is-cinemagraph-ready .ethos-home-hero__motion {
  opacity: 1;
}

.ethos-home-hero.is-cinemagraph-paused .ethos-home-hero__motion::before,
.ethos-home-hero.is-cinemagraph-paused .ethos-home-hero__motion::after,
.ethos-home-hero.is-cinemagraph-offscreen .ethos-home-hero__motion::before,
.ethos-home-hero.is-cinemagraph-offscreen .ethos-home-hero__motion::after {
  animation-play-state: paused !important;
}

.ethos-home-hero.is-cinemagraph-fallback .ethos-home-hero__motion {
  display: none !important;
}

.ethos-home-hero__film-toggle.hero-film-toggle[hidden] {
  display: none !important;
}

.ethos-home-hero__film-toggle.hero-film-toggle {
  align-items: center;
  bottom: 38px;
  color: var(--paper);
  display: inline-flex;
  font-size: 10px;
  gap: 10px;
  letter-spacing: 0.16em;
  opacity: 0.62;
  right: 48px;
  z-index: 3;
}

.ethos-home-hero__film-toggle.hero-film-toggle::before {
  content: "Ⅱ";
  font-size: 13px;
  letter-spacing: -0.18em;
}

.ethos-home-hero__film-toggle.hero-film-toggle[aria-pressed="true"]::before {
  content: "▶";
  font-size: 10px;
  letter-spacing: 0;
}

.ethos-home-hero__film-toggle.hero-film-toggle:hover,
.ethos-home-hero__film-toggle.hero-film-toggle:focus-visible {
  opacity: 1;
}

@keyframes ethos-hero-sky-drift {
  0% {
    transform: translate3d(-1.35%, 0, 0) scale(1.025);
  }

  50% {
    transform: translate3d(0, -0.18%, 0) scale(1.032);
  }

  100% {
    transform: translate3d(1.35%, -0.35%, 0) scale(1.025);
  }
}

@keyframes ethos-hero-water-flow {
  0% {
    transform: translate3d(-2.15%, 0.42%, 0) scale(1.04, 1.025);
  }

  50% {
    transform: translate3d(0.4%, -0.32%, 0) scale(1.052, 1.04);
  }

  100% {
    transform: translate3d(2.15%, 0.28%, 0) scale(1.04, 1.025);
  }
}

@keyframes ethos-hero-water-shimmer {
  from {
    background-position: -220px 0;
    transform: translate3d(-1%, 0, 0);
  }

  to {
    background-position: 220px 0;
    transform: translate3d(1%, 0, 0);
  }
}

@media (max-width: 820px) {
  .ethos-home-hero__motion {
    mask-image: url("/wp-content/themes/ethos-r46/assets/images/cinemagraph/2026-07-28-ethos-hero-mobile-sky-water-alpha-mask-r1.png");
    mask-position: 50% center;
    -webkit-mask-image: url("/wp-content/themes/ethos-r46/assets/images/cinemagraph/2026-07-28-ethos-hero-mobile-sky-water-alpha-mask-r1.png");
    -webkit-mask-position: 50% center;
  }

  .ethos-home-hero__motion::before {
    background-image: url("/wp-content/themes/ethos-r46/assets/images/2026-07-28-ethos-california-alabama-dual-estate-hero-mobile-r8.jpg");
    background-position: center;
    mask-image: url("/wp-content/themes/ethos-r46/assets/images/cinemagraph/2026-07-28-ethos-hero-mobile-sky-water-alpha-mask-r1.png");
    mask-position: 50% center;
    -webkit-mask-image: url("/wp-content/themes/ethos-r46/assets/images/cinemagraph/2026-07-28-ethos-hero-mobile-sky-water-alpha-mask-r1.png");
    -webkit-mask-position: 50% center;
  }

  .ethos-home-hero__motion--sky {
    clip-path: inset(0 0 69% 0);
  }

  .ethos-home-hero__motion--water {
    clip-path: inset(56% 0 0 0);
  }

  .ethos-home-hero__motion--sky::before {
    animation-duration: 14.5s;
  }

  .ethos-home-hero__motion--water::before {
    animation-duration: 2.3s;
  }

  .ethos-home-hero__motion--water::after {
    animation-duration: 1.9s;
  }

  .has-js .ethos-home-hero__film-toggle.hero-film-toggle {
    background: rgba(8, 8, 8, 0.34);
    border: 1px solid rgba(255, 255, 255, 0.36);
    border-radius: 999px;
    bottom: auto;
    display: inline-flex;
    font-size: 8px;
    gap: 7px;
    letter-spacing: 0.14em;
    min-height: 34px;
    opacity: 0.72;
    padding: 0 12px;
    right: 16px;
    top: 88px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ethos-home-hero__motion,
  .ethos-home-hero__film-toggle.hero-film-toggle {
    display: none !important;
  }
}