/* Small interactions complement the scroll entrances in motion.js. */
:root {
  --motion-ease: cubic-bezier(.2, .7, .2, 1);
}

/* A separate crop prevents zooming card images from covering their text. */
.destination-media {
  overflow: hidden;
  aspect-ratio: 1.25;
  flex-shrink: 0;
  background: #e3f3ef;
}
.destination-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.intro-photo img, .story-art img { display: block; }

@media (max-width: 720px) {
  .destination-media { aspect-ratio: 1.7; }
}
@media (max-width: 400px) {
  .destination-media { aspect-ratio: 1.3; }
}

@media (prefers-reduced-motion: no-preference) {
  .button, .nav-contact, .menu-toggle {
    transition: transform .3s var(--motion-ease), background .3s,
      box-shadow .3s, border-color .3s;
  }
  .button > span, .text-link > span, .nav-contact > span,
  .experience-item > svg, .scroll-cue > span {
    transition: transform .35s var(--motion-ease);
  }
  .beach-photo img, .intro-photo img, .destination-media img, .story-art img {
    transition: transform 1.1s var(--motion-ease);
  }
  .destination-card, .contact-card {
    transition: box-shadow .4s var(--motion-ease), border-color .4s,
      transform .4s var(--motion-ease);
  }
  .experience-item[href] { transition: transform .35s var(--motion-ease); }
  .button:active, .nav-contact:active { transform: translateY(0) scale(.98); }

  @media (hover: hover) and (pointer: fine) {
    .button:hover > span, .text-link:hover > span, .nav-contact:hover > span {
      transform: translate(3px, -3px);
    }
    .scroll-cue:hover > span { transform: translateY(4px); }
    .experience-item:hover > svg { transform: rotate(-7deg) scale(1.08); }
    .beach-photo:hover img, .intro-photo:hover img, .destination-card:hover img {
      transform: scale(1.045);
    }
    .story-art:hover img { transform: scale(1.025) rotate(-1deg); }
    .destination-card:hover, .contact-card:hover {
      transform: translateY(-5px);
      border-color: #ff9900;
      box-shadow: 0 18px 42px #103e4212;
    }
  }

  @media (max-width: 960px) {
    .js .site-header.menu-open nav {
      animation: menu-entrance .28s var(--motion-ease) both;
    }
  }
}

@keyframes menu-entrance {
  from { opacity: 0; translate: 0 -8px; }
  to { opacity: 1; translate: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .js .site-header.menu-open nav { animation: none; }
  .beach-photo:hover img, .intro-photo:hover img, .destination-card:hover img,
  .story-art:hover img, .destination-card:hover, .contact-card:hover {
    transform: none;
  }
}