/* Souffle: one entrance on the home photo; contained hover on photography. */
.souffle-frame {
  display: block;
  min-width: 0;
  overflow: hidden;
}
.souffle-frame > img.souffle-photo {
  transform: none;
  filter: none;
  transition: transform 650ms cubic-bezier(.2, .6, .2, 1);
}

/* Keep grid ordering and sticky behaviour on the image frame. */
.offer-row:nth-child(even) > .souffle-frame { order: 2; }
.feature-split > .souffle-frame { position: sticky; top: 130px; }
.feature-split > .souffle-frame > img { position: static; }
.moments-section .moment-card > .souffle-frame { flex: none; }

/* Existing frames with a percentage or absolute image height. */
.journal-card-image > .souffle-frame { width: 100%; height: 100%; }
.journal-article-hero figure > .souffle-frame { position: absolute; inset: 0; }
.booking-panel > div:first-child > .souffle-frame { height: 100%; }
.gallery-item.g3 > .souffle-frame { height: calc(100% - 54px); min-height: 320px; }
.gallery-item.g3 > .souffle-frame > img { height: 100%; min-height: 0; }

/* The map, wordmark, lightbox and home hero are outside these frames. */
@media (min-width: 751px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .souffle-frame:hover > img.souffle-photo,
  .breakfast-photo:hover > .souffle-frame > img.souffle-photo,
  .pause-product-photo:hover > .souffle-frame > img.souffle-photo,
  a:focus-visible > .souffle-frame > img.souffle-photo,
  button:focus-visible > .souffle-frame > img.souffle-photo,
  .journal-card-image:focus-visible > .souffle-frame > img.souffle-photo {
    transform: scale(1.025);
  }
}

/* The photograph stays visible while its own loading completes. */
@media (prefers-reduced-motion: no-preference) {
  .hero--refined > img.souffle-enter {
    animation: souffle-home-enter 1600ms cubic-bezier(.15, .55, .25, 1) both;
  }
}
@keyframes souffle-home-enter {
  from { transform: scale(1.055); }
  to { transform: scale(1); }
}
@keyframes souffle-home-enter-mobile {
  from { transform: scale(1.03); }
  to { transform: scale(1); }
}
@media (max-width: 850px) {
  .feature-split > .souffle-frame { position: static; }
}
@media (max-width: 750px) and (prefers-reduced-motion: no-preference) {
  .hero--refined > img.souffle-enter {
    animation-name: souffle-home-enter-mobile;
    animation-duration: 1200ms;
  }
}
@media (max-width: 600px) {
  .offer-row:nth-child(even) > .souffle-frame { order: 0; }
  .gallery-item.g3 > .souffle-frame { height: 190px; min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hero--refined > img.souffle-enter,
  .souffle-frame > img.souffle-photo {
    animation: none;
    transition: none;
    transform: none;
  }
}