/* Pio's 500 ms caption reveal remains in site.css. This layer carries the
 * same restrained pace through links, previews and scroll-driven movement. */
:root {
  --motion-ease: cubic-bezier(.22, 1, .36, 1);
  --motion-hover: 250ms;
  --motion-reveal: 650ms;
}
html { scroll-behavior: smooth; }
section, .disc { scroll-margin-top: calc(var(--site-nav-height, 64px) + 24px); }
.hero-title, .cta-title, .hand-title, .section-title { overflow-wrap: anywhere; }
.btn { text-align: center; }
.nav-links { min-width: 0; gap: clamp(10px, 1.5vw, 24px); }
.nav-links a, .foot-links a { position: relative; }
.foot-links a::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 7px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--motion-hover) var(--motion-ease);
}
.nav-links a:is(:hover, :focus-visible, [aria-current="location"]),
.foot-links a:is(:hover, :focus-visible) { text-decoration: none; color: var(--text-primary); }
.foot-links a:is(:hover, :focus-visible)::after { transform: scaleX(1); }
.nav::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 2px;
  background: var(--text-primary);
  opacity: .24;
  transform: scaleX(var(--read-progress, 0));
  transform-origin: left;
  pointer-events: none;
}
.btn[href] {
  transition: background var(--motion-hover) ease, box-shadow var(--motion-hover) ease, transform var(--motion-hover) var(--motion-ease);
}
.btn[href] .btn-label { transition: transform var(--motion-hover) var(--motion-ease); }
.btn[href]:focus-visible .btn-label { transform: translateX(3px); }
.tool { transition: background var(--motion-hover) ease; }
.tool > .ill { overflow: visible; }
.tool > .ill img { transition: transform 500ms var(--motion-ease); }
.tool:focus-within > .ill img { transform: scale(1.045); }
.tool:focus-within { background: var(--accent); }
@media (hover: hover) and (pointer: fine) {
  .btn[href]:hover .btn-label { transform: translateX(3px); }
  .btn[href]:active { transform: translateY(1px); }
  .tool:hover > .ill img { transform: scale(1.045); }
  .tool:hover { background: var(--accent); }
}
.js .reveal.is-armed {
  transform: translateY(24px);
  transition: opacity var(--motion-reveal) ease, transform var(--motion-reveal) var(--motion-ease);
  transition-delay: calc(min(var(--i, 0), 4) * 60ms);
}
.js .reveal.is-in { opacity: 1; transform: none; }
.pv-layer { transition: opacity 350ms ease; }
.disc::details-content {
  transition-duration: 320ms;
  transition-timing-function: var(--motion-ease);
}
.glyph-caret { transition: transform 320ms var(--motion-ease); }
/* The type strip now follows reading, without a perpetual animation. */
.marquee-track { animation: none; }
.road-rail.is-live .road-step.is-current { animation: road-arrive 380ms var(--motion-ease) both; }
@keyframes road-arrive {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
/* Let long translations wrap in the same grid without narrowing the logo. */
.nav-mark { flex-shrink: 0; }
.nav-inner > .btn { flex-shrink: 0; }
.foot-links { flex-wrap: wrap; }
:lang(ja), :lang(ko), :lang(zh) { line-break: strict; }
:lang(ja) .mono, :lang(ko) .mono, :lang(zh) .mono { letter-spacing: 0; }
@media (max-width: 1199px) { .nav-links { display: none; } }
@media print, (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal.is-armed, .tool > .ill img, .btn[href], .btn[href] .btn-label, .marquee-track {
    opacity: 1 !important;
    transform: none !important;
  }
}