/*
 * Guowei EVA motion system.
 * Progressive enhancement only: content stays visible until motion.js adds
 * .gw-motion-ready to the root element.
 */

:root {
  --gw-motion-duration: 560ms;
  --gw-motion-fast: 220ms;
  --gw-motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --gw-motion-shadow: 0 18px 40px rgba(0, 51, 102, 0.12);
}

.gw-reveal {
  transition:
    opacity var(--gw-motion-duration) var(--gw-motion-ease),
    transform var(--gw-motion-duration) var(--gw-motion-ease),
    clip-path var(--gw-motion-duration) var(--gw-motion-ease);
  transition-delay: var(--gw-delay, 0ms);
  will-change: opacity, transform;
}

.gw-motion-ready .gw-reveal:not(.gw-visible) {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
}

.gw-motion-ready .gw-reveal[data-gw-reveal="left"]:not(.gw-visible) {
  transform: translate3d(-24px, 0, 0);
}

.gw-motion-ready .gw-reveal[data-gw-reveal="right"]:not(.gw-visible) {
  transform: translate3d(24px, 0, 0);
}

.gw-motion-ready .gw-reveal[data-gw-reveal="scale"]:not(.gw-visible) {
  transform: scale(0.975);
}

.gw-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.gw-card-motion {
  transition:
    transform var(--gw-motion-fast) var(--gw-motion-ease),
    box-shadow var(--gw-motion-fast) var(--gw-motion-ease),
    border-color var(--gw-motion-fast) var(--gw-motion-ease),
    background-color var(--gw-motion-fast) var(--gw-motion-ease);
}

.gw-card-motion img {
  transition: transform 620ms var(--gw-motion-ease), filter 620ms var(--gw-motion-ease);
}

@media (hover: hover) and (pointer: fine) {
  .gw-card-motion:hover {
    transform: translateY(-5px);
    border-color: rgba(0, 51, 102, 0.45);
    box-shadow: var(--gw-motion-shadow);
  }

  .gw-card-motion:hover img {
    transform: scale(1.035);
  }

  .gw-button-motion:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(0, 51, 102, 0.16);
  }

  .gw-button-motion:hover .material-symbols-outlined:last-child {
    transform: translateX(4px);
  }
}

.gw-button-motion {
  transition:
    transform var(--gw-motion-fast) var(--gw-motion-ease),
    box-shadow var(--gw-motion-fast) var(--gw-motion-ease),
    background-color var(--gw-motion-fast) var(--gw-motion-ease),
    color var(--gw-motion-fast) var(--gw-motion-ease),
    border-color var(--gw-motion-fast) var(--gw-motion-ease);
}

.gw-button-motion .material-symbols-outlined:last-child {
  transition: transform var(--gw-motion-fast) var(--gw-motion-ease);
}

.gw-form-motion input,
.gw-form-motion select,
.gw-form-motion textarea {
  transition:
    border-color var(--gw-motion-fast) var(--gw-motion-ease),
    box-shadow var(--gw-motion-fast) var(--gw-motion-ease),
    background-color var(--gw-motion-fast) var(--gw-motion-ease);
}

.gw-form-motion input:focus,
.gw-form-motion select:focus,
.gw-form-motion textarea:focus {
  border-color: #003366;
  box-shadow: 0 0 0 3px rgba(0, 51, 102, 0.12);
  outline: none;
}

.gw-header-motion {
  transition:
    box-shadow var(--gw-motion-fast) var(--gw-motion-ease),
    background-color var(--gw-motion-fast) var(--gw-motion-ease),
    border-color var(--gw-motion-fast) var(--gw-motion-ease);
}

.gw-header-motion.gw-scrolled {
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.08);
}

.gw-count {
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  .gw-reveal,
  .gw-card-motion,
  .gw-card-motion img,
  .gw-button-motion,
  .gw-button-motion .material-symbols-outlined:last-child,
  .gw-header-motion,
  .gw-form-motion input,
  .gw-form-motion select,
  .gw-form-motion textarea {
    transition: none !important;
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
    clip-path: none !important;
    scroll-behavior: auto !important;
  }
}

[data-gallery-prev],
[data-gallery-next],
[data-gallery-prev]:hover,
[data-gallery-next]:hover,
[data-gallery-prev]:focus,
[data-gallery-next]:focus,
[data-gallery-prev]:focus-visible,
[data-gallery-next]:focus-visible,
[data-gallery-prev]:active,
[data-gallery-next]:active {
  transform: translateY(-50%) !important;
}

[data-gallery-prev] .material-symbols-outlined,
[data-gallery-next] .material-symbols-outlined {
  transition: transform var(--gw-motion-fast) var(--gw-motion-ease);
}

@media (hover: hover) and (pointer: fine) {
  [data-gallery-prev]:hover .material-symbols-outlined {
    transform: translateX(-4px) !important;
  }

  [data-gallery-next]:hover .material-symbols-outlined {
    transform: translateX(4px) !important;
  }
}