/* Soft-rise motion (destinations grids; gallery uses the "frame" variant below).
   Different from the homepage slide-in: the card rises and settles, then the
   photo unveils from the bottom like a curtain while easing out of a zoom.
   Cards stagger row by row and play only once. Armed only once mt-motion.js
   runs, so content stays visible without JS. */
.mt-motion {
  --mt-motion-rise: 48px;
  --mt-motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

.mt-motion.is-motion-ready [data-motion] {
  opacity: 0;
  translate: 0 var(--mt-motion-rise);
  scale: 0.96;
  animation: none;
}

.mt-motion.is-motion-ready [data-motion].is-in {
  opacity: 1;
  translate: 0 0;
  scale: 1;
  transition:
    opacity 0.9s ease-out var(--mt-motion-delay, 0s),
    translate 1.1s var(--mt-motion-ease) var(--mt-motion-delay, 0s),
    scale 1.1s var(--mt-motion-ease) var(--mt-motion-delay, 0s),
    transform 0.45s var(--mt-motion-ease),
    box-shadow 0.45s ease,
    border-color 0.3s ease;
}

/* Photo unveil: curtain wipe upward + zoom easing back to rest.
   The link must be a block box, or clip-path only covers one line of text. */
.mt-motion [data-motion] .images > a {
  display: block;
}

.mt-motion.is-motion-ready [data-motion] .images > a {
  clip-path: inset(100% 0 0 0);
  scale: 1.15;
}

.mt-motion.is-motion-ready [data-motion].is-in .images > a {
  clip-path: inset(0 0 0 0);
  scale: 1;
  transition:
    clip-path 1.1s var(--mt-motion-ease) calc(var(--mt-motion-delay, 0s) + 0.15s),
    scale 1.6s var(--mt-motion-ease) calc(var(--mt-motion-delay, 0s) + 0.15s);
}

/* Gallery variant — "frame open": the tile grows into place (no rise), the photo
   opens from the centre outward and develops from black & white into colour. */
.mt-motion.is-motion-ready [data-motion="frame"] {
  translate: 0 0;
  scale: 0.92;
}

.mt-motion.is-motion-ready [data-motion="frame"] .images > a {
  clip-path: inset(50% 50% 50% 50%);
  scale: 1.2;
  filter: grayscale(1) brightness(1.08);
}

.mt-motion.is-motion-ready [data-motion="frame"].is-in .images > a {
  clip-path: inset(0 0 0 0);
  scale: 1;
  filter: grayscale(0) brightness(1);
  transition:
    clip-path 1s var(--mt-motion-ease) calc(var(--mt-motion-delay, 0s) + 0.1s),
    scale 1.6s var(--mt-motion-ease) calc(var(--mt-motion-delay, 0s) + 0.1s),
    filter 1.4s ease-out calc(var(--mt-motion-delay, 0s) + 0.5s);
}

@media (prefers-reduced-motion: reduce) {
  .mt-motion [data-motion],
  .mt-motion [data-motion] .images > a {
    opacity: 1 !important;
    translate: none !important;
    scale: none !important;
    clip-path: none !important;
    filter: none !important;
  }
}