/*
 * ANYANG motion layer. One shared rhythm for the whole site:
 * enter 420ms decelerating, hover 200ms, press 120ms. Only opacity and transform are animated (no layout shift).
 */
:root {
  --ay-ease-out: cubic-bezier(.22, .61, .36, 1);
  --ay-ease-in-out: cubic-bezier(.45, 0, .2, 1);
  --ay-dur-enter: 420ms;
  --ay-dur-hover: 200ms;
  --ay-dur-press: 120ms;
}

@media (prefers-reduced-motion: no-preference) {
  /* Smooth anchor jumps; each template already sets its own scroll-margin-top for the sticky header. */
  html { scroll-behavior: smooth; }

  /* Scroll reveal: only applied by motion.js, so content is visible without JavaScript. */
  .ay-motion .ay-reveal {
    opacity: 0;
    transform: translate3d(0, 14px, 0);
    transition: opacity var(--ay-dur-enter) var(--ay-ease-out), transform var(--ay-dur-enter) var(--ay-ease-out);
    transition-delay: var(--ay-delay, 0ms);
  }
  .ay-motion .ay-reveal.is-in { opacity: 1; transform: none; }

  /* Header shadow once the page scrolls. */
  .corporate-header, .ay-header { transition: box-shadow 240ms var(--ay-ease-out); }
  .corporate-header.is-scrolled, .ay-header.is-scrolled { box-shadow: 0 6px 18px rgba(18, 38, 58, .08); }

  /* FAQ and quick answers: the answer settles in when opened. */
  details[open] > :not(summary) { animation: ay-settle 280ms var(--ay-ease-out); }
  @keyframes ay-settle { from { opacity: 0; transform: translate3d(0, -4px, 0); } to { opacity: 1; transform: none; } }

  /* Buttons: quick colour change on hover, small press feedback. */
  .button, .ay-button, .at-link, .text-link, .ac-card-link, .dl-download, .dl-view {
    transition: background-color var(--ay-dur-hover) var(--ay-ease-out), color var(--ay-dur-hover) var(--ay-ease-out),
                border-color var(--ay-dur-hover) var(--ay-ease-out), box-shadow var(--ay-dur-hover) var(--ay-ease-out),
                transform var(--ay-dur-press) var(--ay-ease-out);
  }
  .button:active, .ay-button:active { transform: scale(.98); }
}

/* Card hover: a short lift and a soft shadow, only on devices that can hover. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .cable-card, .machine-card, .document-card, .st-card, .industry-feature-card, .ac-product, .ay-product-card,
  .ay-app-card, .ay-detail-document, .at-directory-card, .at-related-card, .ac-related a {
    transition: transform var(--ay-dur-hover) var(--ay-ease-out), box-shadow var(--ay-dur-hover) var(--ay-ease-out),
                border-color var(--ay-dur-hover) var(--ay-ease-out);
  }
  .cable-card:hover, .machine-card:hover, .document-card:hover, .st-card:hover, .industry-feature-card:hover, .ac-product:hover,
  .ay-product-card:hover, .ay-app-card:hover, .ay-detail-document:hover, .at-directory-card:hover, .at-related-card:hover, .ac-related a:hover {
    transform: translate3d(0, -3px, 0);
    box-shadow: 0 10px 24px rgba(18, 38, 58, .10);
  }
  /* Card images zoom very slightly inside their frame. */
  .cable-card img, .ac-product img, .ay-product-card img, .ay-app-card img, .at-directory-card img, .industry-feature-card img {
    transition: transform 500ms var(--ay-ease-out);
  }
  .cable-card:hover img, .ac-product:hover img, .ay-product-card:hover img, .ay-app-card:hover img,
  .at-directory-card:hover img, .industry-feature-card:hover img { transform: scale(1.03); }
}

/* Keyboard users always see where they are. */
:focus-visible { outline: 2px solid #0057b8; outline-offset: 2px; }