/* Soft photo blend for the hero section using the same opening portrait. */
.hero-photo-blend {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.8s ease;
}

.hero-photo-blend.is-ready { opacity: 1; }

.hero-photo-blend::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(90deg, rgba(252,245,237,.98) 0%, rgba(252,245,237,.88) 28%, rgba(252,245,237,.30) 55%, rgba(252,245,237,.02) 78%),
    linear-gradient(180deg, rgba(252,245,237,.48) 0%, transparent 22%, transparent 72%, rgba(247,228,223,.42) 100%);
}

.hero-photo-blend::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  width: min(54vw, 820px);
  height: 62%;
  z-index: 3;
  background: radial-gradient(ellipse at 72% 78%, rgba(133,13,37,.09), transparent 64%);
  filter: blur(28px);
}

.hero-photo-blend img {
  position: absolute;
  right: clamp(-64px, -2.5vw, -18px);
  bottom: -2%;
  width: min(52vw, 760px);
  height: 98%;
  object-fit: contain;
  object-position: right bottom;
  display: block;
  opacity: .27;
  mix-blend-mode: multiply;
  filter: grayscale(1) sepia(.08) contrast(.93) brightness(1.08);
  -webkit-mask-image: radial-gradient(ellipse at 65% 58%, #000 0 45%, rgba(0,0,0,.92) 57%, rgba(0,0,0,.42) 70%, transparent 86%);
  mask-image: radial-gradient(ellipse at 65% 58%, #000 0 45%, rgba(0,0,0,.92) 57%, rgba(0,0,0,.42) 70%, transparent 86%);
  transform-origin: 68% 60%;
  animation: heroPhotoBreath 16s ease-in-out infinite alternate;
}

@keyframes heroPhotoBreath {
  from { transform: scale(1); }
  to { transform: scale(1.025); }
}

@media (max-width: 1100px) {
  .hero-photo-blend img {
    width: min(58vw, 690px);
    opacity: .22;
    right: -70px;
  }

  .hero-photo-blend::before {
    background:
      linear-gradient(90deg, rgba(252,245,237,.98) 0%, rgba(252,245,237,.91) 34%, rgba(252,245,237,.30) 62%, rgba(252,245,237,.04) 82%),
      linear-gradient(180deg, rgba(252,245,237,.5) 0%, transparent 25%, transparent 70%, rgba(247,228,223,.4) 100%);
  }
}

/* Portrait phones and smaller tablets. */
@media (max-width: 767px) and (orientation: portrait) {
  .hero-photo-blend::before {
    background:
      linear-gradient(180deg,
        rgba(252,245,237,.96) 0%,
        rgba(252,245,237,.84) 17%,
        rgba(252,245,237,.42) 36%,
        rgba(252,245,237,.12) 58%,
        rgba(247,228,223,.28) 100%),
      radial-gradient(circle at 50% 34%, rgba(255,255,255,.26), transparent 46%);
  }

  .hero-photo-blend::after {
    width: 100%;
    height: 52%;
    right: 0;
    background: radial-gradient(ellipse at 50% 82%, rgba(133,13,37,.08), transparent 72%);
  }

  .hero-photo-blend img {
    right: 0;
    bottom: -2%;
    width: 100%;
    height: 82%;
    object-fit: cover;
    object-position: 50% 34%;
    opacity: .24;
    filter: grayscale(1) sepia(.05) contrast(1.02) brightness(1.0);
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.42) 10%, rgba(0,0,0,.86) 24%, #000 40%, #000 86%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.42) 10%, rgba(0,0,0,.86) 24%, #000 40%, #000 86%, transparent 100%);
    transform-origin: 50% 58%;
  }
}

@media (max-width: 420px) and (orientation: portrait) {
  .hero-photo-blend img {
    height: 84%;
    opacity: .22;
    object-position: 50% 35%;
  }
}

/* Any phone/tablet held sideways: cover the whole hero and keep the couple visible. */
@media (orientation: landscape) and (max-height: 760px) {
  .hero-photo-blend {
    inset: 0;
  }

  .hero-photo-blend::before {
    background:
      linear-gradient(90deg, rgba(252,245,237,.86) 0%, rgba(252,245,237,.58) 26%, rgba(252,245,237,.20) 52%, rgba(252,245,237,.08) 74%, rgba(247,228,223,.18) 100%),
      linear-gradient(180deg, rgba(252,245,237,.72) 0%, rgba(252,245,237,.26) 28%, rgba(252,245,237,.08) 64%, rgba(247,228,223,.24) 100%);
  }

  .hero-photo-blend::after {
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at 76% 60%, rgba(133,13,37,.075), transparent 68%);
  }

  .hero-photo-blend img {
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 36%;
    opacity: .20;
    mix-blend-mode: multiply;
    filter: grayscale(1) contrast(1.02) brightness(1.02);
    -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.20) 0%, rgba(0,0,0,.70) 24%, #000 48%, #000 86%, rgba(0,0,0,.35) 100%);
    mask-image: linear-gradient(90deg, rgba(0,0,0,.20) 0%, rgba(0,0,0,.70) 24%, #000 48%, #000 86%, rgba(0,0,0,.35) 100%);
    transform-origin: 60% 50%;
  }
}

@media (orientation: landscape) and (max-height: 480px) {
  .hero-photo-blend img {
    object-position: 50% 32%;
    opacity: .17;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-photo-blend img { animation: none !important; }
}