/* Motion layer only. No changes to the approved grid, type scale, palette or spacing. */
:root {
  --motion-ease: cubic-bezier(.16, 1, .3, 1);
  --motion-hover: cubic-bezier(.22, .68, .2, 1);
}

/* Transforms stay inside the original photograph frames. */
.motion-on .hero__stage { transform-origin: center; }
.motion-on .hero__image { transform-origin: 55% 48%; }
.motion-on .destination-card__image,
.motion-on .hotel-feature__photo img,
.motion-on .service-card img {
  transition: transform 1.05s var(--motion-ease);
}
.motion-on .hero__cta {
  isolation: isolate;
  overflow: hidden;
  transition: transform .45s var(--motion-ease), background .4s ease;
}
.motion-on .hero__cta > * { position: relative; z-index: 1; }
.motion-on .hero__cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(108deg, transparent 18%, rgb(5 104 124 / .065) 48%, transparent 76%);
  transform: translateX(-130%);
  pointer-events: none;
}
.motion-on .hero__cta.motion-sheen::before {
  animation: motion-button-light .85s var(--motion-hover) 1;
}
@keyframes motion-button-light {
  from { transform: translateX(-130%); }
  to { transform: translateX(130%); }
}
.motion-on .primary-nav a::after,
.motion-on .footer-nav a::after {
  transform-origin: right;
  transition: transform .48s var(--motion-ease);
}
.motion-on .primary-nav a:is(:hover, :focus-visible)::after,
.motion-on .footer-nav a:is(:hover, :focus-visible)::after {
  transform: scaleX(1);
  transform-origin: left;
}
.motion-on .hero__dot::before {
  transition: background .3s ease, transform .45s var(--motion-ease), border-color .3s ease;
}
.motion-on .hero__dot:is(:hover, :focus-visible)::before { transform: scale(1.34); }
.motion-on .hero__dot:active::before { transform: scale(.88); }
.motion-on .circle-arrow {
  transition: background .45s var(--motion-ease), color .45s ease;
}
.motion-on .circle-arrow svg,
.motion-on .service-card__caption > svg,
.motion-on .hero__cta svg {
  transition: transform .55s var(--motion-ease);
}
.motion-on .service-card h3 {
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 1px;
  transition: background-size .55s var(--motion-ease);
}
.motion-on .site-footer.motion-rule-running { position: relative; border-top-color: transparent; }
.motion-footer-rule {
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: 1px;
  background: var(--line);
  transform-origin: left;
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .motion-on a.destination-card:hover .destination-card__image { transform: scale(1.052); }
  .motion-on .hotel-feature__photo:hover img,
  .motion-on .hotel-feature.motion-hotel-engaged .hotel-feature__photo img { transform: scale(1.045); }
  .motion-on .service-card:hover img { transform: scale(1.065); }
  .motion-on .hero__cta:hover { transform: translateY(-2px); }
  .motion-on .hero__cta:hover svg,
  .motion-on a.destination-card:hover .circle-arrow svg,
  .motion-on .service-card:hover .service-card__caption > svg { transform: translateX(3px); }
  .motion-on a.destination-card:hover .circle-arrow { background: rgb(255 255 255 / .13); }
  .motion-on .service-card:hover h3 { text-decoration: none; background-size: 100% 1px; }
  .motion-on .back-to-top:hover svg { transform: translateY(-3px) rotate(-90deg); }
}
@media (hover: none) and (prefers-reduced-motion: no-preference) {
  .motion-on .service-card:active img,
  .motion-on a.destination-card:active img { transform: scale(1.025); transition-duration: .18s; }
  .motion-on .hero__cta:active { transform: translateY(1px); transition-duration: .18s; }
}

/* A keyboard user receives the same feedback, without hiding the focus ring. */
.motion-on .service-card:focus-visible h3 { background-size: 100% 1px; }
.motion-on .hero__cta:focus-visible svg,
.motion-on a.destination-card:focus-visible .circle-arrow svg { transform: translateX(3px); }

/* No content is hidden by this stylesheet. JS failure must leave a complete page. */
html[data-motion="off"] { scroll-behavior: auto; }
html[data-motion="off"] *, html[data-motion="off"] *::before,
html[data-motion="off"] *::after { animation: none !important; transition: none !important; }
html[data-motion="off"] .hero__stage,
html[data-motion="off"] .hero__cta,
html[data-motion="off"] .destination-card__image,
html[data-motion="off"] .hotel-feature__photo img,
html[data-motion="off"] .service-card img { transform: none !important; }
html[data-motion="off"] .hero__cta svg,
html[data-motion="off"] .service-card__caption > svg,
html[data-motion="off"] .circle-arrow:not(.back-to-top) svg { transform: none !important; }
html[data-motion="off"] .back-to-top svg { transform: rotate(-90deg) !important; }
@media (prefers-reduced-motion: reduce) {
  .hero__stage { transform: none !important; }
  .motion-on .hero__cta::before, .motion-footer-rule { display: none; }
}
@media print {
  .hero__stage, .hero__image, .destination-card__image,
  .hotel-feature__photo img, .service-card img { transform: none !important; }
  .motion-footer-rule { display: none !important; }
  .site-footer.motion-rule-running { border-top-color: var(--line) !important; }
}