:root {
  --motion-distance: 1.5rem;
  --motion-roll-distance: 2.5rem;
}

.js [data-reveal] {
  opacity: 0;
  transform: translateY(2rem);
  clip-path: inset(0 0 100% 0);
}

.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
  clip-path: inset(0);
  transition:
    opacity var(--motion-normal) ease,
    transform var(--motion-normal) var(--ease-impact),
    clip-path var(--motion-normal) var(--ease-impact);
}

/* Motion language: one branded action per chapter, played only on first entry. */
.motion-contour {
  position: absolute;
  z-index: -1;
  right: clamp(-7rem, -5vw, -3rem);
  bottom: clamp(-7rem, -7vw, -3rem);
  width: min(34vw, 29rem);
  aspect-ratio: 1;
  opacity: 0;
  border: 1px solid currentColor;
  border-radius: 44% 56% 48% 52%;
  pointer-events: none;
}
.motion-contour i {
  position: absolute;
  border: 1px solid currentColor;
  border-radius: 48% 52% 45% 55%;
}
.motion-contour i:nth-child(1) { inset: 12%; }
.motion-contour i:nth-child(2) { inset: 26%; }
.motion-contour i:nth-child(3) { inset: 39%; }
.chapter.is-active .motion-contour { animation: motion-contour-draw 900ms var(--ease-impact) both; }

@keyframes motion-rise {
  from { opacity: 0; transform: translateY(var(--motion-distance)); }
  to { opacity: 1; transform: none; }
}

@keyframes motion-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes motion-roll-in {
  from { opacity: 0; transform: translateX(calc(-1 * var(--motion-roll-distance))) rotate(-28deg); }
  72% { opacity: 1; transform: translateX(.25rem) rotate(3deg); }
  to { opacity: 1; transform: none; }
}

@keyframes motion-trace {
  from { opacity: 0; transform: scaleX(0); }
  to { opacity: 1; transform: scaleX(1); }
}

@keyframes motion-gather-left {
  from { opacity: 0; transform: translateX(calc(-1 * var(--motion-distance))); }
  to { opacity: 1; transform: none; }
}

@keyframes motion-gather-right {
  from { opacity: 0; transform: translateX(var(--motion-distance)); }
  to { opacity: 1; transform: none; }
}

@keyframes motion-contour-draw {
  from { opacity: 0; transform: scale(.78) rotate(-6deg); }
  to { opacity: .12; transform: scale(1) rotate(0); }
}

@keyframes friends-card-arrive {
  from { opacity: 0; transform: translateY(1rem) scale(.965); }
  to { opacity: 1; transform: none; }
}

@keyframes motion-background-push {
  from { transform: scale(1.025); }
  to { transform: scale(1.055); }
}

.chapter.is-active .belief-list p,
.chapter.is-active .metrics > div,
.chapter.is-active .map-note,
.chapter.is-active .campaign-evidence img,
.chapter.is-active .translation-grid figure,
.chapter.is-active .route-pillars article,
.chapter.is-active .process-list li,
.chapter.is-active .event-facts li,
.chapter.is-active .partner-paths article {
  animation: motion-rise 720ms var(--ease-impact) both;
  animation-delay: calc(var(--motion-index, 0) * 90ms);
}

.chapter.is-active .process-gallery figure,
.chapter.is-active .event-filmstrip img,
.chapter.is-active .matrix-posters figure {
  animation: motion-fade 760ms ease both;
  animation-delay: calc(160ms + var(--motion-index, 0) * 90ms);
}

.chapter.is-active .campaign-video { animation: motion-fade 820ms ease 120ms both; }
.chapter.is-active#climbing-belief .chapter__background { animation: motion-background-push 900ms var(--ease-impact) both; }
.chapter.is-active#urban-outdoor h2 { animation: motion-gather-left 760ms var(--ease-impact) both; }
.chapter.is-active#urban-outdoor .chapter__lead { animation: motion-gather-right 760ms var(--ease-impact) 100ms both; }
.chapter.is-active .people-grid figure { animation: motion-fade 760ms ease both; animation-delay: calc(var(--motion-index, 0) * 90ms); }
.chapter.is-active .collaboration-flow li {
  transform-origin: left top;
  animation: motion-trace 720ms var(--ease-impact) both;
  animation-delay: calc(180ms + var(--motion-index, 0) * 90ms);
}

.js .chapter--friends:not(.is-active) .friends-track,
.js .chapter--friends:not(.is-active) .friend-logo__card { opacity: 0; }

.chapter.is-active .friends-track { animation: motion-fade 620ms ease both; }
.chapter.is-active .friend-logo__card {
  animation: friends-card-arrive 360ms var(--ease-impact) both;
  animation-delay: calc(70ms + var(--motion-index, 0) * 30ms);
}

.rolling-mark__stone {
  display: block;
  width: 4.5rem;
  aspect-ratio: 1;
  border-radius: 46% 54% 42% 58%;
  background: var(--paper);
}

.chapter.is-active .rolling-mark__stone { animation: stone-roll var(--motion-signature) var(--ease-impact) both; }
.chapter.is-active .rolling-mark__trace { animation: trace-grow var(--motion-signature) var(--ease-impact) both; }

@keyframes stone-roll {
  from { transform: translateX(-12vw) rotate(0); opacity: 0; }
  78% { transform: translateX(30vw) rotate(650deg); opacity: 1; }
  to { transform: translateX(28vw) rotate(620deg); opacity: 1; }
}

@keyframes trace-grow {
  from { width: 0; }
  to { width: 30vw; }
}

.chapter.is-active .monster-peek--origin img { animation: motion-roll-in 820ms var(--ease-impact) both; }
.chapter.is-active .transition-stone { animation: transition-roll 900ms var(--ease-impact) both; }

.campaign-impact {
  position: absolute;
  left: clamp(1.25rem, 6vw, 7rem);
  bottom: min(16vh, 9rem);
  width: min(28vw, 28rem);
  height: clamp(2.8rem, 4vw, 3.6rem);
  border-bottom: 1px solid rgb(237 243 243 / 35%);
}

.campaign-impact span,
.closing-impact span {
  display: block;
  width: clamp(2rem, 2.8vw, 2.8rem);
  aspect-ratio: 1;
  border-radius: 47% 53% 45% 55%;
  background: var(--moss);
}

.chapter.is-active .campaign-impact span { animation: campaign-hit 900ms var(--ease-impact) both; }
.closing-impact {
  position: absolute;
  left: clamp(1.25rem, 6vw, 7rem);
  bottom: clamp(2.2rem, 7vh, 4.5rem);
  width: min(32vw, 30rem);
  border-bottom: clamp(.3rem, .55vw, .55rem) solid var(--moss);
}
.chapter.is-active .closing-impact span { animation: closing-roll 1100ms var(--ease-impact) both; }

@keyframes monster-bob {
  from { transform: translateY(2rem) rotate(-5deg); opacity: 0; }
  70% { transform: translateY(-.35rem) rotate(2deg); opacity: 1; }
  to { transform: translateY(0) rotate(0); opacity: 1; }
}

@keyframes transition-roll {
  from { transform: translateX(-12vw) rotate(0); opacity: 0; }
  78% { transform: translateX(19vw) rotate(520deg); opacity: 1; }
  to { transform: translateX(18vw) rotate(500deg); opacity: 1; }
}

@keyframes campaign-hit {
  from { transform: translateX(-9vw) rotate(0); opacity: 0; }
  82% { transform: translateX(20vw) rotate(480deg); opacity: 1; }
  to { transform: translateX(19vw) rotate(460deg); opacity: 1; }
}

@keyframes closing-roll {
  from { transform: translateX(-10vw) rotate(0); opacity: 0; }
  to { transform: translateX(28vw) rotate(720deg); opacity: 1; }
}

@media (hover: hover) {
  .poster-strip img, .event-filmstrip img { transition: transform var(--motion-fast) var(--ease-impact); }
  .poster-strip img:hover, .event-filmstrip img:hover { transform: translateY(-4px) scale(1.012); }
}

@media (max-width: 900px) {
  .chapter {
    --motion-distance: .75rem;
    --motion-roll-distance: 1.25rem;
  }
}

@media (max-width: 560px) {
  .chapter.is-active#climbing-belief .chapter__background { animation: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .js [data-reveal] { opacity: 1; transform: none; clip-path: none; }
  .motion-contour { opacity: .12; transform: none; }
  .transition-stone { transform: translateX(18vw) rotate(500deg); opacity: 1; }
  .campaign-impact span { transform: translateX(19vw) rotate(460deg); opacity: 1; }
  .closing-impact span { transform: translateX(28vw) rotate(720deg); opacity: 1; }
  .friends-track, .friend-logo__card { opacity: 1 !important; transform: none; }
}