/**
 * JA Voyara — Micro-interactions + gentle scroll-reveal layer
 * @package   JA_VOYARA
 *
 * A single, restrained interaction system injected globally from index.php
 * (mirrors chrome.css). ALL new interaction rules live here — no existing CSS
 * file is modified.
 *
 * Design contract:
 *   - Buttons: subtle lift (translateY -1px) + slightly stronger shadow on hover.
 *   - Cards:   lift (translateY -4px) + deeper shadow + primary-tinted border,
 *              matching the shared .voy-post-card hover already in taxonomy.css.
 *   - Images:  gentle 1.05 zoom inside their overflow:hidden frame on card hover.
 *   - Focus:   :focus-visible outline floor (keyboard users only).
 *   - Reveal:  content sections fade-up once on scroll (.ja-acm blocks below the
 *              hero). Header / sticky / megamenu / hero are NEVER revealed and
 *              never receive transform/will-change (protects the mega hit-test).
 *
 * All MOTION is guarded behind @media (prefers-reduced-motion: no-preference).
 * Colour + focus states remain instant and always active.
 */

/* =====================================================================
 * 5. Focus-visible accessibility floor (always on — not motion)
 * ===================================================================== */
a:focus-visible,
button:focus-visible,
.voy-cta:focus-visible,
.voy-btn:focus-visible,
.voy-signin:focus-visible,
.acm-cta-btn:focus-visible,
.acm-hero-search-btn:focus-visible,
.acm-hero-sm-btn:focus-visible {
  outline: 2px solid var(--voy-primary, #C2562F);
  outline-offset: 2px;
  border-radius: 2px;
}

/* =====================================================================
 * 4. Text-link colour transition (subtle — colour only, no underline anim)
 * ===================================================================== */
.voy-footer a,
.voy-article__content a,
.com-content-article__body a,
.voy-post-card__excerpt a {
  transition: color .18s ease;
}

/* =====================================================================
 * MOTION LAYER — everything below is opt-in via no-preference.
 * Under prefers-reduced-motion: reduce, none of this applies: no hover
 * transforms, no zoom, no reveal. Colour/focus (above) still work.
 * ===================================================================== */
@media (prefers-reduced-motion: no-preference) {

  /* -------------------------------------------------------------------
   * 1. Buttons — subtle lift + stronger shadow on hover, reset on active.
   *    Existing colour/background hovers are preserved (transition keeps
   *    background-color/border-color/color animating alongside transform).
   * ------------------------------------------------------------------- */
  .voy-cta,
  .voy-btn,
  .voy-signin,
  .acm-hero-search-btn,
  .acm-hero-sm-btn,
  .acm-cta-btn,
  .acm-cta2-btn-primary,
  .acm-cta2-btn-ghost,
  .voy-oc-cta,
  .voy-oc-signin {
    transition: transform .18s ease,
                box-shadow .18s ease,
                background-color .18s ease,
                border-color .18s ease,
                color .18s ease;
  }

  .voy-cta:hover,
  .voy-btn:hover,
  .voy-signin:hover,
  .acm-hero-search-btn:hover,
  .acm-hero-sm-btn:hover,
  .acm-cta-btn:hover,
  .acm-cta2-btn-primary:hover,
  .acm-cta2-btn-ghost:hover,
  .voy-oc-cta:hover,
  .voy-oc-signin:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .14);
  }

  .voy-cta:active,
  .voy-btn:active,
  .voy-signin:active,
  .acm-hero-search-btn:active,
  .acm-hero-sm-btn:active,
  .acm-cta-btn:active,
  .acm-cta2-btn-primary:active,
  .acm-cta2-btn-ghost:active,
  .voy-oc-cta:active,
  .voy-oc-signin:active {
    transform: translateY(0);
  }

  /* -------------------------------------------------------------------
   * 2. Cards — lift + deeper shadow + primary-tinted border on hover.
   *    Matches the .voy-post-card hover in taxonomy.css for site-wide
   *    consistency. Whole-card <a> stays colour-neutral (no link leak).
   * ------------------------------------------------------------------- */
  .acm-dest-card,
  .acm-team-card,
  .acm-cta-card,
  .acm-feature,
  .acm-testimonial {
    transition: transform .25s ease,
                box-shadow .25s ease,
                border-color .25s ease;
  }

  .acm-dest-card:hover,
  .acm-team-card:hover,
  .acm-cta-card:hover,
  .acm-feature:hover,
  .acm-testimonial:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 32px rgba(0, 0, 0, .12);
    border-color: var(--voy-primary, #C2562F);
  }

  html.t4-dark .acm-dest-card:hover,
  html.t4-dark .acm-team-card:hover,
  html.t4-dark .acm-cta-card:hover,
  html.t4-dark .acm-feature:hover,
  html.t4-dark .acm-testimonial:hover {
    box-shadow: 0 14px 32px rgba(0, 0, 0, .42);
    border-color: var(--voy-primary, #D86A3F);
  }

  /* -------------------------------------------------------------------
   * 3. Card image zoom — image scales 1.05 within its clipped frame.
   *    Frames: destination/blog (.voy-card__media, .voy-post-card),
   *    team (.acm-team-photo), feature-split (.acm-fsplit-media).
   * ------------------------------------------------------------------- */
  .voy-card__media,
  .acm-team-photo,
  .acm-fsplit-media {
    overflow: hidden;
  }

  .voy-card__media img,
  .acm-team-photo img,
  .acm-fsplit-media img,
  .voy-post-card__img {
    transition: transform .4s ease;
  }

  .acm-dest-card:hover .voy-card__media img,
  .acm-team-card:hover .acm-team-photo img,
  .acm-fsplit-media:hover img,
  .voy-post-card:hover .voy-post-card__img {
    transform: scale(1.05);
  }

  /* -------------------------------------------------------------------
   * ONE gentle scroll-reveal moment — content sections fade up once.
   * reveal.js tags eligible .ja-acm blocks with [data-reveal] and adds
   * .is-revealed via IntersectionObserver. The hidden initial state only
   * applies under html.js-reveal, so without JS content stays visible.
   * NOTE: reveal.js NEVER tags the hero, page-masthead, header, sticky,
   * or megamenu — so no transform/will-change ever lands on those.
   * ------------------------------------------------------------------- */
  [data-reveal] {
    transition: opacity .6s ease, transform .6s ease;
  }

  html.js-reveal [data-reveal]:not(.is-revealed) {
    opacity: 0;
    transform: translateY(14px);
  }

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