/* Keep decoded photos visible while waiting to start their retained 1200ms motion. */
.aman-reference img.spring-pending, .detail-refined img.spring-pending { opacity: 1 !important; transform: none !important; }
/* Establish the first pose before the deferred controller loads, then hand it
   to the retained animation. Do not move an already painted photo backwards. */
@media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
  .has-site-js:not(.detail-motion-fallback) .detail-refined img[data-intro-image]:not([data-phone-static]):not(.spring-entered) { opacity: .65 !important; transform: translateY(20px) !important; }
  .has-site-js:not(.detail-motion-fallback) .detail-refined img[data-intro-image][data-motion-direction="from-right"]:not([data-phone-static]):not(.spring-entered) { transform: translateX(24px) !important; }
}
/* Only the seven marked phone photos. Their desktop entrance stays intact. */
@media (max-width: 767px), (max-width: 1024px) and (max-height: 500px) and (hover: none) and (pointer: coarse) {
  .detail-refined img[data-phone-static] { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; will-change: auto !important; }
  /* Keep the existing preview as image content until the full bitmap is ready. */
  .has-site-js:not(.detail-motion-fallback):not([data-site-ipad]) .detail-refined img[data-phone-static][data-delivery-preview] { content: var(--phone-static-preview); aspect-ratio: var(--phone-static-ratio); }
}
/* The annotated copy expands on desktop; phones and tablets keep the original. */
.detail-refined p[data-desktop-copy] { display: none; }
@media (min-width: 768px) and (hover: hover) and (pointer: fine) {
  .detail-refined p[data-copy-original] { display: none; }
  .detail-refined p[data-desktop-copy] { display: block; }
}
/* The entrance now has a visible, continuous small-to-large movement. */
.site-entrance img { will-change: transform, opacity; animation-duration: 1.3s; }
@keyframes entrance-logo {
  0% { opacity: 0; transform: scale(.55); }
  65%, 80% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.04); }
}
@media (max-width: 767px) {
  /* Same verified font bytes as detail prose; visit module and its controls keep their style. */
  body.resort-page:not(.detail-refined):not(.photos-page) :is(.aman-reference, .landscape-hero, .site-header__brand, .site-footer, .menu-panel) { font-family: var(--serif); }
  body.resort-page:not(.detail-refined):not(.photos-page) .aman-reference :is(h1,h2,h3,p,a,button) { font-family: var(--serif); }
  .aman-reference :is(.rail, #intro, #dining) .aman-block__cards { grid-auto-columns: 100%; gap: 24px; scroll-snap-type: x mandatory; }
  .aman-reference :is(.rail, #intro, #dining) .aman-card { scroll-snap-align: start; scroll-snap-stop: always; }
  .aman-reference .aman-card img { aspect-ratio: var(--mobile-frame-ratio, 4 / 3) !important; height: auto !important; object-fit: cover !important; }
  .detail-refined .refined-group__track { scroll-snap-type: x mandatory; }
  .detail-refined .refined-group__track .refined-card { scroll-snap-stop: always; }
  .detail-refined .refined-card__image { aspect-ratio: var(--mobile-frame-ratio, 4 / 3); max-height: none; }
  .detail-refined .refined-card__image img { height: 100%; object-fit: cover; }
  .detail-refined .refined-group__track { align-items: stretch; }
  .detail-refined .refined-group__track .refined-card figure { height: 100%; display: flex; flex-direction: column; }
  .detail-refined .refined-group__track .refined-card figcaption { flex: 1; }
}
@media (prefers-reduced-motion: reduce) { .site-entrance img { animation: none; will-change: auto; } }

/* Natural landscape frames keep the pavilion and bookshelf intact; the portrait
   retains the established maximum height, with a small real crop instead of matte. */
@media (min-width: 768px) {
  .aman-reference #intro .aman-card img { height: auto !important; max-height: min(600px, calc(100svh - 236px)); object-fit: cover !important; }
}
/* This source has a 2–3px baked edge. Independent scale composes with the
   retained translate animation, while the existing frame clips only that edge. */
.detail-refined .refined-card__image img[src$="hhzz-115.webp"] { scale: 1.012; }

/* Detail routes give the brand a short entrance on phones and desktops. */
@media (max-width: 767px), (min-width: 768px) and (hover: hover) and (pointer: fine) {
  .detail-page .site-header__brand img,
  .detail-page .site-header__brand span {
    animation: detail-brand-arrival 900ms cubic-bezier(.22,.61,.36,1) both;
  }
  .detail-page .site-header__brand span { animation-delay: 90ms; }
}
@keyframes detail-brand-arrival {
  from { opacity: 0; transform: translateY(8px) scale(.94); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .detail-page .site-header__brand img,
  .detail-page .site-header__brand span { animation: none; }
}