/* ==========================================================================
   AD!KTED — motion.css
   Site-wide scroll reveals and hover transitions.

   Loaded LAST on every page so its reduced-motion block (at the bottom of
   this file) can override the hover rules above it — at equal specificity
   the later rule wins, so ordering is what makes the accessibility guard
   actually work.

   Reveals are driven by js/reveal.js, which adds .is-visible.
   ========================================================================== */

/* ---------- Scroll reveal ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}

[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* Directional variants. These sit AFTER the base rule on purpose: they have
   the same specificity, so the later declaration is the one that wins.
   Pair with data-reveal-repeat to have the element slide back out when it
   leaves the viewport, so scrolling up replays the entrance in reverse. */
[data-reveal="left"] {
  transform: translateX(-52px);
}

[data-reveal="right"] {
  transform: translateX(52px);
}

[data-reveal="down"] {
  transform: translateY(-40px);
}

[data-reveal="left"].is-visible,
[data-reveal="right"].is-visible,
[data-reveal="down"].is-visible {
  transform: none;
}

/* ---------- Shared photo zoom ----------
   Clipping lives on the frame so the scaled image never spills past its
   rounded corner. */
.zoom-frame {
  overflow: hidden;
  border-radius: var(--radius-md);
  display: block;
}

.zoom-frame img {
  transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.zoom-frame:hover img {
  transform: scale(1.06);
}

/* ---------- Card lifts ----------
   These containers already clip their media, so the inner image can scale
   without escaping the card. */
.product-card,
.news-card,
.location-card,
.job-card,
.value-card,
.category-tile {
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1),
    box-shadow 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.product-card:hover,
.news-card:hover,
.location-card:hover,
.job-card:hover,
.value-card:hover,
.category-tile:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
}

.product-card__media img,
.news-card__img img,
.location-card__img img,
.category-tile__img img {
  transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.product-card:hover .product-card__media img,
.news-card:hover .news-card__img img,
.location-card:hover .location-card__img img,
.category-tile:hover .category-tile__img img {
  transform: scale(1.06);
}

/* ---------- Small accents ---------- */
.category-tile__arrow,
.perk__icon,
.value-card__icon {
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1),
    box-shadow 0.35s cubic-bezier(0.22, 0.61, 0.36, 1),
    background-color 0.3s ease, color 0.3s ease;
}

/* The whole tile lifts now, so the arrow just nudges forward. */
.category-tile:hover .category-tile__arrow {
  transform: translateX(3px);
}

.perk:hover .perk__icon,
.value-card:hover .value-card__icon {
  transform: translateY(-4px) scale(1.06);
}

/* ---------- Buttons and links ---------- */
.btn,
.main-nav__link,
.footer-col__list a,
.news-card__link,
.section__link {
  transition: background-color 0.3s ease, color 0.3s ease,
    border-color 0.3s ease, opacity 0.3s ease;
}

/* ---------- Reduced motion ----------
   MUST stay last in this file. */
@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  [data-reveal].is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .zoom-frame img,
  .zoom-frame:hover img,
  .product-card,
  .product-card:hover,
  .news-card,
  .news-card:hover,
  .location-card,
  .location-card:hover,
  .job-card,
  .job-card:hover,
  .value-card,
  .value-card:hover,
  .product-card__media img,
  .product-card:hover .product-card__media img,
  .news-card__img img,
  .news-card:hover .news-card__img img,
  .location-card__img img,
  .location-card:hover .location-card__img img,
  .category-tile__img img,
  .category-tile:hover .category-tile__img img,
  .category-tile,
  .category-tile:hover,
  .perk__icon,
  .perk:hover .perk__icon,
  .value-card__icon,
  .value-card:hover .value-card__icon,
  .category-tile__arrow,
  .category-tile:hover .category-tile__arrow {
    transition: none;
    transform: none;
  }

  /* Colour changes are feedback, not motion — keep them, drop the fade. */
  .btn,
  .main-nav__link,
  .footer-col__list a,
  .news-card__link,
  .section__link {
    transition: none;
  }
}