/* ─── Display helpers (mobile/desktop) ───────────────── */
.d-only { display: none !important; }
.m-only { display: block !important; }
@media (min-width: 900px) {
  .d-only { display: block !important; }
  .m-only { display: none !important; }
}

/* Override for flex children */
@media (min-width: 900px) {
  .d-only.flex-d { display: flex !important; }
}

/* ─── Ken Burns (when GSAP not loaded fallback) ─── */
@keyframes ken-burns {
  0%   { transform: scale(1.02) translate3d(0, 0, 0); }
  50%  { transform: scale(1.08) translate3d(-1%, -1%, 0); }
  100% { transform: scale(1.02) translate3d(0, 0, 0); }
}
[data-ken-burns] { animation: ken-burns 30s ease-in-out infinite; }
.no-gsap [data-ken-burns] { animation: ken-burns 30s ease-in-out infinite; }

/* ─── Lazy fade-in fallback ─────────────────────────── */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* If GSAP didn't pick up reveal targets, force fallback fade */
html.no-gsap [data-reveal] {
  animation: fade-up 0.9s var(--ease-out) both;
}

/* ─── Lucide icon sizing ────────────────────────────── */
[data-lucide] { width: 1em; height: 1em; display: inline-block; vertical-align: middle; }
.trust-card__icon [data-lucide] { width: 32px; height: 32px; }
.nav__hamburger [data-lucide] { width: 24px; height: 24px; }
.drawer__close [data-lucide] { width: 28px; height: 28px; }
.footer__contact-item [data-lucide] { width: 16px; height: 16px; }
.review-card__stars [data-lucide] { width: 16px; height: 16px; fill: currentColor; }

/* ─── How section image grid fix ─────────────────────── */
@media (max-width: 899.98px) {
  .how-imgs .how-img-1, .how-imgs .how-img-2 { display: none; }
}
@media (min-width: 900px) {
  .how-imgs { display: grid; grid-template-rows: 1fr 200px; gap: 24px; min-height: 560px; }
  .how-imgs .how-img--mobile { display: none; }
}

/* ─── Booking note ───────────────────────────────────── */
.book-note { color: var(--text-secondary); }

/* ─── No-scroll body when modal/drawer open ───────────── */
body.no-scroll { overflow: hidden; }

/* ─── Skeleton/loading state ─────────────────────────── */
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
.skeleton {
  background: linear-gradient(90deg, var(--bg-sand) 25%, var(--bg-cream) 50%, var(--bg-sand) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s linear infinite;
  border-radius: var(--radius-sm);
}

/* ─── View Transitions ───────────────────────────────── */
@view-transition { navigation: auto; }
::view-transition-old(root) {
  animation: vt-fade-out 240ms var(--ease-in-out) both;
}
::view-transition-new(root) {
  animation: vt-fade-in 360ms var(--ease-in-out) both;
}
@keyframes vt-fade-out { to { opacity: 0; transform: translateY(-12px); } }
@keyframes vt-fade-in  { from { opacity: 0; transform: translateY(20px); } }