:root {
  --motion-fast: 160ms;
  --motion-normal: 260ms;
  --motion-ease: cubic-bezier(.2, .7, .25, 1);
}

html .nav-links a,
html .trust-nav > a {
  position: relative;
  transition: color var(--motion-fast) ease;
}
html .nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -9px;
  height: 2px;
  border-radius: 2px;
  background: #bd1320;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--motion-normal) var(--motion-ease);
}
html[data-motion-page="category"] .nav-links a::after { bottom: 12px; }
html .nav-links a:is(:hover, :focus-visible, .motion-nav-active)::after { transform: scaleX(1); }
html .nav-links a.motion-nav-active { color: #b51b26; }
html .logo,
html .trust-brand { transition: opacity var(--motion-fast) ease, scale var(--motion-normal) var(--motion-ease); }
html .logo:hover,
html .trust-brand:hover { opacity: .85; scale: 1.015; }

html .nav-tools input,
html main > form input {
  transition: border-color var(--motion-normal) ease, box-shadow var(--motion-normal) ease, background var(--motion-normal) ease;
}
html .nav-tools input:focus,
html main > form input:focus {
  outline: none;
  border-color: #bb5560;
  background: #fffafb;
  box-shadow: 0 0 0 3px rgba(189, 19, 32, .08);
}
html .nav-tools button,
html main > form button {
  transition: background var(--motion-fast) ease, box-shadow var(--motion-normal) ease, scale var(--motion-fast) ease;
}
html .nav-tools button:hover,
html main > form button:hover { background: #a70f1b; box-shadow: 0 3px 10px rgba(189, 19, 32, .15); }
html button.motion-submitting::after {
  content: "";
  display: inline-block;
  width: 11px;
  height: 11px;
  margin-left: 7px;
  vertical-align: -1px;
  border: 2px solid rgba(255, 255, 255, .35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: motion-spin .7s linear infinite;
}
html button.motion-submitting { pointer-events: none; }
@keyframes motion-spin { to { rotate: 360deg; } }

html .lang-toggle { position: relative; isolation: isolate; }
html .lang-toggle::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 30px;
  height: 26px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(26, 38, 54, .14);
  transition: transform var(--motion-normal) var(--motion-ease);
}
html .lang-toggle.is-original::before { transform: translateX(32px); }
html .lang-toggle:is(.is-zh, .is-original) .lang-option {
  position: relative;
  z-index: 1;
  background: transparent !important;
  box-shadow: none !important;
  transition: color var(--motion-normal) ease;
}

html .brief-news-card,
html .result,
html .article-related a,
html .trust-card {
  transition: transform var(--motion-normal) var(--motion-ease), box-shadow var(--motion-normal) ease,
    border-color var(--motion-normal) ease, background var(--motion-normal) ease, scale var(--motion-fast) ease;
}
html :is(.brief-news-card h3, .key-item h3, .editor-item h3, .result h2, .archive-copy h2, .focus-list span) {
  transition: color var(--motion-normal) ease;
}
html :is(.key-image, .editor-image, .thumb, .archive-image) img {
  transition: transform 500ms var(--motion-ease);
}
html :is(.key-item, .editor-item, .ranking li, .focus-list a, .archive-row, .metric, .archive-metrics > div) {
  transition: background var(--motion-normal) ease, box-shadow var(--motion-normal) ease, scale var(--motion-fast) ease;
}
html :is(.metric, .archive-metrics > div) i { transition: transform var(--motion-normal) var(--motion-ease); }
html .left-column .metrics { overflow: clip; }
html .tags a,
html .topic-grid a,
html .archive-pagination a {
  transition: color var(--motion-fast) ease, border-color var(--motion-fast) ease,
    background var(--motion-fast) ease, transform var(--motion-normal) var(--motion-ease), scale var(--motion-fast) ease;
}

@media (hover: hover) and (pointer: fine) {
  html :is(.brief-news-card, .result, .article-related a, .trust-card):hover {
    transform: translateY(-3px);
    border-color: #d6b2b7;
    box-shadow: 0 9px 24px rgba(33, 43, 54, .09);
  }
  html :is(.brief-news-card, .key-item, .editor-item, .result, .archive-row):hover :is(h2, h3) { color: #a91c28; }
  html :is(.key-item, .editor-item, .result, .archive-row):hover img { transform: scale(1.045); }
  html :is(.key-item, .editor-item, .ranking li, .focus-list a, .archive-row):hover { background: #fff8f8; }
  html .focus-list a:hover span { color: #a91c28; }
  html :is(.metric, .archive-metrics > div):hover { background: #fff7f8; box-shadow: inset 0 -2px #cc6872; }
  html :is(.metric, .archive-metrics > div):hover i { transform: translateY(-2px) rotate(-5deg); }
  html :is(.tags a, .topic-grid a, .archive-pagination a):hover { transform: translateY(-2px); color: #b51b26; }
}

html :is(button, .brief-news-card, .result, .key-item, .editor-item, .archive-row,
  .article-related a, .tags a, .topic-grid a, .archive-pagination a).motion-pressed { scale: .985; }
html :is(button, .tags a, .topic-grid a, .archive-pagination a):active { scale: .97; }
html a:focus-visible,
html button:focus-visible { outline: 2px solid #b51b26; outline-offset: 4px; }
html .carousel :is(a, button):focus-visible { outline-color: #fff; outline-offset: -3px; }

html .carousel { touch-action: pan-y pinch-zoom; }
html .carousel-arrow { top: 12px; transform: none; }
html .slide { isolation: isolate; transition: opacity 620ms var(--motion-ease); }
html .slide::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: inherit;
  transform: scale(1);
  transition: transform 6500ms linear;
}
html .slide.active::before { transform: scale(1.035); }
html .slide-text { position: relative; }
html.motion-ready .slide.active .slide-text { animation: motion-slide-copy 420ms var(--motion-ease); }
@keyframes motion-slide-copy { from { opacity: .65; translate: 0 7px; } to { opacity: 1; translate: 0 0; } }
html .carousel-progress { position: absolute; z-index: 5; bottom: 0; left: 0; right: 0; height: 2px; background: rgba(255, 255, 255, .12); pointer-events: none; }
html .carousel-progress i { display: block; height: 100%; background: rgba(255, 255, 255, .9); transform: scaleX(0); transform-origin: left; }
html .dots { align-items: center; bottom: 12px; gap: 8px; }
html .dot { position: relative; width: 30px; height: 24px; background: transparent; }
html .dot.active { background: transparent; }
html .dot::before { content: ""; position: absolute; inset: 10px 0; border-radius: 2px; background: #b8b8b8; transition: background var(--motion-normal) ease, transform var(--motion-normal) ease; }
html .dot.active::before { background: #e22433; }
html .dot:hover::before { transform: scaleY(1.5); }
html .carousel-toggle { display: grid; place-items: center; width: 26px; height: 26px; margin: 0 2px 0 0; padding: 0; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .2); color: #fff; cursor: pointer; transition: background var(--motion-fast) ease; }
html .carousel-toggle:hover { background: rgba(0, 0, 0, .45); }
html .carousel-toggle span { width: 8px; height: 9px; border-left: 2px solid #fff; border-right: 2px solid #fff; }
html .carousel-toggle.is-paused span { width: 0; height: 0; margin-left: 2px; border: 5px solid transparent; border-right: 0; border-left: 7px solid #fff; }
html .carousel-toggle[hidden], html .carousel-progress[hidden] { display: none; }

html .article-impact { transition: background var(--motion-normal) ease, box-shadow var(--motion-normal) ease; }
html .article-impact:hover { background: #f3f6f9; box-shadow: inset 3px 0 #d4a0a6; }
html .article-home { transition: color var(--motion-fast) ease, background var(--motion-fast) ease, transform var(--motion-normal) var(--motion-ease), scale var(--motion-fast) ease; }
html .article-home span { transition: transform var(--motion-normal) var(--motion-ease); }
html .article-home:hover span { transform: translateX(-4px); }
html :is(.footer-links a, .footer-bottom a, .footer-home) { transition: color var(--motion-fast) ease, transform var(--motion-normal) var(--motion-ease); }
html .footer-links a:hover { transform: translateX(3px); }
html .footer-logo b { transition: transform var(--motion-normal) var(--motion-ease); }
html .footer-brand:hover .footer-logo b { transform: rotate(-5deg); }
html.floating-menu-snapping header.floating-menu-overlay { transition-duration: 240ms; transition-timing-function: var(--motion-ease); }
html.floating-menu-snapping .right-sidebar { transition-duration: 240ms; transition-timing-function: var(--motion-ease); }

@media (prefers-reduced-motion: reduce) {
  html *, html *::before, html *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  html :is(.brief-news-card, .result, .article-related a, .trust-card, .tags a, .topic-grid a, .archive-pagination a):hover,
  html .slide::before { transform: none !important; }
  html .carousel-progress { display: none; }
  html :is(.logo, .trust-brand, button, .motion-pressed) { scale: 1 !important; }
}