/* Motion is enhancement only: content is never hidden while waiting for JS. */
:root {
  --motion-ease: cubic-bezier(.22, .61, .36, 1);
  --motion-feedback: 260ms;
  --motion-image: 520ms;
  --motion-shadow: 0 18px 38px rgba(9, 51, 43, .16);
  --motion-border: rgba(111, 150, 93, .72);
}

.motion-accessible-value {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.motion-count-value { display: inline-block; text-align: right; }
/* Opt-in only after JS setup; unplayed blocks wait for meaningful visibility, not a 1px intersection. */
@media screen and (prefers-reduced-motion: no-preference) {
  .motion-ready [data-motion-state="pending"] { opacity: 0; pointer-events: none; }
}
@media print {
  [data-motion-state] {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    pointer-events: auto !important;
  }
}
/* Neutralize legacy reveal classes, including cached older strength.js. */
.strength-reveal, .strength-reveal.is-visible { opacity: 1; transform: none; transition: none; }

/* JS adds these only to an element which already has a stable media-sized parent. */
.motion-media-frame { overflow: hidden; }
.motion-media-frame > .motion-media-image {
  display: block;
}
.motion-image-crop { clip-path: inset(0); }

.button, .btn, .language button, .footer-group a, .home-footer a,
.pagination button, .slider-controls button, .news-filter button,
.product-categories button, .po-thumbs button, .dialog-close,
.consult-strip a, .charity-cta a, .scene-tabs button, .strength-button,
.film-card > div > button, .home-news-grid button {
  transition: color var(--motion-feedback) ease, background-color var(--motion-feedback) ease,
    border-color var(--motion-feedback) ease, box-shadow var(--motion-feedback) ease,
    transform var(--motion-feedback) var(--motion-ease);
}
.company-text-link b, .home-link > span, .strength-button span,
.film-card > div > button b, .charity-cta a b, .button span, .btn span {
  display: inline-block;
  transition: transform var(--motion-feedback) var(--motion-ease);
}

/* Visible keyboard feedback is deliberately independent of pointer capability. */
:where(a, button, input, select, textarea):focus-visible {
  outline: 3px solid #a8cd46;
  outline-offset: 4px;
  box-shadow: 0 0 0 6px rgba(168, 205, 70, .22);
}
.main-nav a:focus-visible, .section-nav a:focus-visible { outline-offset: 7px; }

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  /* data-motion-card is presentation-only: it never changes an element's semantics. */
  [data-motion-card], .product-card, .related-news article, .strength-image-card,
  .film-card, .home-product-grid article, .home-news-feature, .home-news-side article,
  .scale-grid article, .history-line article, .philosophy-grid article,
  .equipment-points article, .charity-line article {
    transition: transform 320ms var(--motion-ease), border-color 320ms ease,
      box-shadow 320ms ease, background-color 320ms ease;
  }
  [data-motion-card]:is(:hover, :focus-within), .product-card:is(:hover, :focus-within),
  .related-news article:is(:hover, :focus-within), .strength-image-card:is(:hover, :focus-within),
  .film-card:is(:hover, :focus-within), .home-product-grid article:is(:hover, :focus-within),
  .home-news-feature:is(:hover, :focus-within), .home-news-side article:is(:hover, :focus-within),
  .scale-grid article:hover, .history-line article:hover, .philosophy-grid article:hover,
  .equipment-points article:hover, .charity-line article:is(:hover, :focus-within) {
    transform: translateY(-6px);
    border-color: var(--motion-border);
    box-shadow: var(--motion-shadow);
  }

  /* Only crop inside existing safe containers; captions and surrounding layout stay still. */
  .motion-media-frame > .motion-media-image,
  .home-product-photo > img, .film-cover > img, .gallery-grid button > img,
  .slider-preview > img, .delivery-next > img {
    transition: transform var(--motion-image) var(--motion-ease), filter var(--motion-feedback) ease;
    transform-origin: center;
  }
  :is(.motion-media-frame, .home-product-photo, .film-cover, .gallery-grid button,
    .slider-preview, .delivery-next):is(:hover, :focus-within) > img,
  .motion-media-frame:is(:hover, :focus-within) > .motion-media-image,
  .motion-media-frame:is(:hover, :focus-within) > img {
    transform: scale(1.06);
    filter: saturate(1.05) contrast(1.02);
  }
  /* The inset compensates for scale: the photograph zooms without painting outside its original box. */
  .motion-image-crop { transition: transform 520ms var(--motion-ease), clip-path 520ms var(--motion-ease), filter 320ms ease; }
  .motion-image-crop:hover, [data-motion-card]:is(:hover, :focus-within) > .motion-image-crop {
    transform: scale(1.06);
    clip-path: inset(2.8301886792%);
    filter: saturate(1.06) contrast(1.03);
  }
  .philosophy-grid article:hover, .history-line article:hover, .equipment-points article:hover { background-color: #ffffffb3; }

  .scale-grid article .scale-icon, .philosophy-grid article > img,
  .philosophy-grid article svg, .equipment-points article .company-rule {
    transition: transform 320ms var(--motion-ease), filter var(--motion-feedback) ease;
  }
  .scale-grid article:hover .scale-icon, .philosophy-grid article:hover > img,
  .philosophy-grid article:hover svg, .equipment-points article:hover .company-rule {
    transform: translateY(-6px) rotate(-2deg);
    filter: saturate(1.12);
  }

  .button:hover, .btn:hover, .strength-button:hover, .charity-cta a:hover,
  .scene-tabs button:hover:not([aria-selected=true]) {
    transform: translateY(-3px);
    border-color: #8ebf3f;
    box-shadow: 0 10px 22px rgba(10, 59, 48, .18);
  }
  .home-news-grid button:hover, .film-card > div > button:hover {
    color: #0e6656;
    transform: translateX(5px);
  }
  .company-text-link:hover b, .home-link:hover > span, .strength-button:hover span,
  .film-card > div > button:hover b, .charity-cta a:hover b, .button:hover span, .btn:hover span {
    transform: translateX(9px);
  }

  .main-nav a, .section-nav a { transition: color var(--motion-feedback) ease, background-color var(--motion-feedback) ease; }
  .main-nav a::after {
    content: '';
    position: absolute;
    bottom: 18px;
    left: 0;
    width: 38px;
    height: 3px;
    background: var(--lime);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--motion-feedback) var(--motion-ease);
  }
  .main-nav a[aria-current]::after, .main-nav a:hover::after, .main-nav a:focus-visible::after { transform: scaleX(1); }
  .section-nav a:hover, .section-nav a:focus-visible { color: #0b5f50; background: rgba(168, 205, 70, .16); }
}

@media (max-width: 1023px) {
  .main-nav a::after { bottom: 4px; }
}
@media (prefers-reduced-motion: reduce), (hover: none) {
  .motion-media-frame > .motion-media-image, .home-product-photo > img,
  .film-cover > img, .gallery-grid button > img { transform: none; }
  .film-cover:hover > img, .gallery-grid button:hover img { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}