/*
 * LIFA Global Trade sitewide motion system
 *
 * Sections establish reading progression, cards reveal in short grouped
 * sequences, and the existing button contract supplies command feedback.
 * Content remains visible without JavaScript and under reduced motion.
 */

:root {
  /* Primitive motion values */
  --motion-distance-section: 14px;
  --motion-distance-card: 12px;
  --motion-duration-section: 440ms;
  --motion-duration-card: 360ms;
  --motion-duration-card-state: 220ms;
  --motion-duration-card-press: 100ms;
  --motion-stagger-step: 42ms;

  /* Semantic motion rhythm */
  --motion-ease-enter: var(--motion-ease-button, cubic-bezier(.22, 1, .36, 1));
  --motion-ease-state: cubic-bezier(.2, .65, .25, 1);

  /* Component motion values */
  --motion-card-hover-y: -3px;
  --motion-card-hover-scale: 1.004;
  --motion-card-press-scale: .992;
  --motion-card-frame-active: var(--lifa-gold-soft, #eed47d);
  --motion-card-shadow-rest: 0 10px 28px rgba(7, 17, 30, .08);
  --motion-card-shadow-active:
    0 0 0 1px var(--motion-card-frame-active),
    0 22px 46px rgba(7, 17, 30, .15);
}

html.motion-system-ready body main [data-motion-section],
html.motion-system-ready body main [data-motion-card] {
  opacity: 1;
  transform: none !important;
  translate: 0 0;
  scale: 1;
  transform-origin: center;
}

html.motion-system-ready body main [data-motion-section] {
  transition:
    opacity var(--motion-duration-section) var(--motion-ease-enter),
    translate var(--motion-duration-section) var(--motion-ease-enter) !important;
}

html.motion-system-ready body main [data-motion-card] {
  --site-motion-delay: calc(var(--site-motion-order, 0) * var(--motion-stagger-step));
  transition:
    opacity var(--motion-duration-card) var(--motion-ease-enter) var(--site-motion-delay),
    translate var(--motion-duration-card) var(--motion-ease-enter) var(--site-motion-delay),
    scale var(--motion-duration-card-state) var(--motion-ease-state),
    border-color var(--motion-duration-card-state) var(--motion-ease-state),
    box-shadow var(--motion-duration-card-state) var(--motion-ease-state),
    background-color var(--motion-duration-card-state) var(--motion-ease-state) !important;
}

html.motion-system-ready body main [data-motion-card][data-motion-settled="true"] {
  --site-motion-delay: 0ms;
}

html.motion-system-ready body main [data-motion-state="pending"] {
  opacity: 0 !important;
  pointer-events: auto;
  will-change: opacity, translate;
}

html.motion-system-ready body main [data-motion-section][data-motion-state="pending"] {
  translate: 0 var(--motion-distance-section) !important;
}

html.motion-system-ready body main [data-motion-card][data-motion-state="pending"] {
  translate: 0 var(--motion-distance-card) !important;
}

html.motion-system-ready body main [data-motion-state="revealed"] {
  opacity: 1 !important;
  translate: 0 0 !important;
}

html.motion-system-ready body main [data-motion-state="revealed"][data-motion-settled="true"] {
  will-change: auto;
}

:is(#lifa-card-motion-a#lifa-card-motion-b#lifa-card-motion-c#lifa-card-motion-d#lifa-card-motion-e#lifa-card-motion-f#lifa-card-motion-g#lifa-card-motion-h#lifa-card-motion-i#lifa-card-motion-j#lifa-card-motion-k#lifa-card-motion-l#lifa-card-motion-m#lifa-card-motion-n#lifa-card-motion-o#lifa-card-motion-p#lifa-card-motion-q#lifa-card-motion-r#lifa-card-motion-s#lifa-card-motion-t#lifa-card-motion-u#lifa-card-motion-v#lifa-card-motion-w#lifa-card-motion-x, html).motion-system-ready
  body main [data-motion-card][data-motion-frame="gold"][data-motion-state="revealed"]:is(:focus-visible, :focus-within) {
  border-color: var(--motion-card-frame-active) !important;
  outline: 2px solid var(--motion-card-frame-active) !important;
  outline-offset: 2px !important;
  box-shadow: var(--motion-card-shadow-active) !important;
}

@media (hover: hover) and (pointer: fine) {
  :is(#lifa-card-motion-a#lifa-card-motion-b#lifa-card-motion-c#lifa-card-motion-d#lifa-card-motion-e#lifa-card-motion-f#lifa-card-motion-g#lifa-card-motion-h#lifa-card-motion-i#lifa-card-motion-j#lifa-card-motion-k#lifa-card-motion-l#lifa-card-motion-m#lifa-card-motion-n#lifa-card-motion-o#lifa-card-motion-p#lifa-card-motion-q#lifa-card-motion-r#lifa-card-motion-s#lifa-card-motion-t#lifa-card-motion-u#lifa-card-motion-v#lifa-card-motion-w#lifa-card-motion-x, html).motion-system-ready
    body main [data-motion-card][data-motion-frame="gold"][data-motion-state="revealed"]:is(:hover, :focus-visible, :focus-within) {
    translate: 0 var(--motion-card-hover-y) !important;
    scale: var(--motion-card-hover-scale) !important;
    border-color: var(--motion-card-frame-active) !important;
    box-shadow: var(--motion-card-shadow-active) !important;
  }
}

html.motion-system-ready body main [data-motion-card][data-motion-interactive="true"]:active {
  translate: 0 0 !important;
  scale: var(--motion-card-press-scale) !important;
  transition-duration: var(--motion-duration-card-press) !important;
}

@media (hover: none) {
  html.motion-system-ready body main [data-motion-card][data-motion-hover="true"]:hover {
    translate: 0 0 !important;
    scale: 1 !important;
  }

  :is(#lifa-card-motion-a#lifa-card-motion-b#lifa-card-motion-c#lifa-card-motion-d#lifa-card-motion-e#lifa-card-motion-f#lifa-card-motion-g#lifa-card-motion-h#lifa-card-motion-i#lifa-card-motion-j#lifa-card-motion-k#lifa-card-motion-l#lifa-card-motion-m#lifa-card-motion-n#lifa-card-motion-o#lifa-card-motion-p#lifa-card-motion-q#lifa-card-motion-r#lifa-card-motion-s#lifa-card-motion-t#lifa-card-motion-u#lifa-card-motion-v#lifa-card-motion-w#lifa-card-motion-x, html).motion-system-ready
    body main [data-motion-card][data-motion-frame="gold"][data-motion-state="revealed"]:is(:hover, :focus-visible, :focus-within, :active) {
    translate: 0 0 !important;
    scale: 1 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.motion-system-ready body main [data-motion-section],
  html.motion-system-ready body main [data-motion-card],
  html.motion-system-ready body main [data-motion-state="pending"],
  html.motion-system-ready body main [data-motion-state="revealed"],
  html.motion-system-ready body main [data-motion-card][data-motion-hover="true"]:hover,
  html.motion-system-ready body main [data-motion-card][data-motion-frame="gold"]:is(:hover, :focus-visible, :focus-within, :active) {
    opacity: 1 !important;
    transform: none !important;
    translate: 0 0 !important;
    scale: 1 !important;
    animation: none !important;
    transition: none !important;
    will-change: auto !important;
  }

  :is(#lifa-card-motion-a#lifa-card-motion-b#lifa-card-motion-c#lifa-card-motion-d#lifa-card-motion-e#lifa-card-motion-f#lifa-card-motion-g#lifa-card-motion-h#lifa-card-motion-i#lifa-card-motion-j#lifa-card-motion-k#lifa-card-motion-l#lifa-card-motion-m#lifa-card-motion-n#lifa-card-motion-o#lifa-card-motion-p#lifa-card-motion-q#lifa-card-motion-r#lifa-card-motion-s#lifa-card-motion-t#lifa-card-motion-u#lifa-card-motion-v#lifa-card-motion-w#lifa-card-motion-x, html).motion-system-ready
    body main [data-motion-card][data-motion-frame="gold"][data-motion-state="revealed"]:is(:hover, :focus-visible, :focus-within, :active) {
    translate: 0 0 !important;
    scale: 1 !important;
    transition: none !important;
  }
}

html.motion-reduced body main [data-motion-section],
html.motion-reduced body main [data-motion-card] {
  opacity: 1 !important;
  transform: none !important;
  translate: 0 0 !important;
  scale: 1 !important;
  animation: none !important;
  transition: none !important;
  will-change: auto !important;
}