/* Progressive motion layer. Geometry and typography stay in figma-brand.css. */
:root {
  --motion-ease: cubic-bezier(.22, .72, .24, 1);
}

.story-card,
.article-card {
  position: relative;
}

.story-card::after,
.article-card::after {
  content: "";
  position: absolute;
  height: 3px;
  right: 0;
  bottom: 0;
  left: 0;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 420ms var(--motion-ease);
  pointer-events: none;
}

.story-card::after {
  bottom: -12px;
}

.story-card:is(:hover, :focus-visible)::after,
.article-card:is(:hover, :focus-visible)::after {
  transform: scaleX(1);
}

.story-card h3,
.article-card h3 {
  transition: color 220ms ease;
}

.story-card:is(:hover, :focus-visible) h3,
.article-card:is(:hover, :focus-visible) h3 {
  color: var(--red);
}

.story-image img {
  transition: transform 750ms var(--motion-ease), filter 450ms ease;
}

.story-card:is(:hover, :focus-visible) .story-image img {
  transform: scale(1.055);
  filter: grayscale(0);
}

.story-image .stamp {
  transition: scale 350ms var(--motion-ease), background 250ms ease;
}

.story-card:is(:hover, :focus-visible) .stamp {
  scale: 1.045;
  background: #fff;
}

.article-card img {
  transition: filter 400ms ease;
}

.article-card:is(:hover, :focus-visible) img {
  filter: grayscale(0) contrast(1.035);
}

.button .arrow,
.text-link .arrow,
.article-card .arrow {
  transition: transform 280ms var(--motion-ease), translate 280ms var(--motion-ease);
}

.button:is(:hover, :focus-visible) .arrow,
.text-link:is(:hover, :focus-visible) .arrow,
.story-card:is(:hover, :focus-visible) .arrow,
.article-card:is(:hover, :focus-visible) .arrow {
  translate: 3px 0;
}

.nav-links > a {
  position: relative;
}

.nav-links > a::after {
  content: "";
  position: absolute;
  bottom: -7px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--blue);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 220ms var(--motion-ease);
}

.nav-links > a:is(:hover, :focus-visible, [aria-current="page"])::after {
  transform: scaleX(1);
}

.step-number {
  transition: color 250ms ease;
}

.figma-step h3 {
  transition: color 250ms ease;
}

.step-row:is(:hover, :focus-within) .step-number,
.figma-step:is(:hover, :focus-within) .step-number {
  color: var(--red);
}

.figma-step:is(:hover, :focus-within) h3 {
  color: var(--red);
}

.nav-dropdown[open] .nav-dropdown-panel {
  animation: dropdown-enter 190ms var(--motion-ease);
}

@keyframes dropdown-enter {
  from { opacity: .25; translate: 0 -5px; }
  to { opacity: 1; translate: 0 0; }
}

.chapter-controls button,
summary {
  transition: color 220ms ease, background-color 220ms ease, border-color 220ms ease;
}

.chapter-controls button:not([aria-selected="true"]):is(:hover, :focus-visible) {
  background: #e0e2e3;
  border-color: var(--navy);
}

summary:is(:hover, :focus-visible) {
  color: var(--red);
}

/* Independent translate preserves each portrait's existing centering transform. */
@media (hover: hover) and (pointer: fine) and (min-width: 901px) {
  .motion-parallax .hero-bg {
    translate: var(--hero-background-x, 0px) var(--hero-background-y, 0px);
    scale: 1.035;
    transition: translate 900ms var(--motion-ease);
  }

  .motion-parallax .hero-person > img {
    translate: var(--hero-person-x, 0px) var(--hero-person-y, 0px);
    transition: translate 700ms var(--motion-ease);
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav-dropdown[open] .nav-dropdown-panel {
    animation: none;
  }

  .motion-parallax .hero-bg,
  .motion-parallax .hero-person > img {
    translate: none !important;
    scale: 1 !important;
  }

  .story-card::after,
  .article-card::after,
  .nav-links > a::after,
  .story-card .stamp,
  .button .arrow,
  .text-link .arrow,
  .article-card .arrow {
    transition: none !important;
  }

  .story-card:is(:hover, :focus-visible) .stamp {
    scale: 1;
  }

  .button:is(:hover, :focus-visible) .arrow,
  .text-link:is(:hover, :focus-visible) .arrow,
  .story-card:is(:hover, :focus-visible) .arrow,
  .article-card:is(:hover, :focus-visible) .arrow {
    translate: none;
  }
}

/* The semantic total keeps the figure's geometry steady throughout counting. */
.stat-count { display:inline-block; position:relative; white-space:nowrap; font:inherit; font-variant-numeric:tabular-nums; }
.count-ink { display:none; position:absolute; inset:0; text-align:right; font:inherit; pointer-events:none; }
.stat-count[data-count-state="playing"] .count-total { opacity:0; }
.stat-count[data-count-state="playing"] .count-ink { display:block; }
@media(prefers-reduced-motion:reduce) {
  .stat-count[data-count-state] .count-total { opacity:1; }
  .stat-count[data-count-state] .count-ink { display:none; }
}