/* An open, offset composition for the home introduction. */
#apropos > h2 {
  max-width: 1240px;
  margin: 36px 0 42px 6%;
}

#apropos .manifesto-lower {
  grid-template-columns: minmax(0, .32fr) minmax(0, .68fr);
  gap: clamp(28px, 4.5vw, 72px);
}

#apropos .discipline-presentation { padding-top: 34px; }
#apropos .manifesto-bottom { gap: 22px; padding-top: 0; }
#apropos .manifesto-bottom > p { max-width: 700px; }

/* The wording enters once; leaving the section does not reset it. */
#apropos > h2.motion-heading .motion-word { animation: none; }
#apropos > h2.motion-heading.visible .motion-word {
  animation: coulisses-word-arrive .8s var(--ease) both;
  animation-delay: var(--word-delay, 0s);
}

.js #apropos .discipline-cycle.reveal { translate: 0 20px; }
.js #apropos .discipline-caption.reveal { translate: 0 14px; }
.js #apropos .manifesto-bottom > p.reveal { translate: 24px 0; }
.js #apropos .reveal.visible { translate: 0 0; }
.js #apropos .manifesto-bottom > p.reveal.visible { translate: 0 0; }

/* One connecting stroke makes the three steps read as a sequence. */
#apropos .process-list {
  position: relative;
  width: fit-content;
  max-width: 100%;
  gap: 10px 24px;
  padding-top: 18px;
}

#apropos .process-list::before,
#apropos .process-list::after {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: var(--line);
  pointer-events: none;
}

#apropos .process-list::after {
  background: var(--blue);
  opacity: .8;
  transform: scaleX(0);
  transform-origin: left;
}

#apropos .process-list.visible::after {
  animation: coulisses-route-arrive 1.2s var(--ease) .25s both;
}

#apropos .process-step {
  --step-delay: 0ms;
  border-radius: 0;
  transition: opacity .55s var(--ease), translate .65s var(--ease), color .25s;
  transition-delay: var(--step-delay), var(--step-delay), 0ms;
}
#apropos .process-step-film { --step-delay: 110ms; }
#apropos .process-step-edit { --step-delay: 220ms; }
.js #apropos .process-step { opacity: 0; translate: -14px 0; }
.js #apropos .process-step.visible,
.js #apropos .process-step:focus-visible { opacity: 1; translate: 0 0; }

#apropos .process-icon,
#apropos .process-icon * {
  animation: none;
  rotate: none;
  transition: color .3s, transform .4s var(--ease);
}

#apropos .process-step:focus-visible { color: var(--blue-light); }
#apropos .process-step:focus-visible .process-icon { color: var(--blue-light); }
#apropos .process-step:focus-visible .process-clapper { transform: rotate(-12deg); }
#apropos .process-step:focus-visible .process-camera-focus { transform: scale(.8); }
#apropos .process-step:focus-visible .process-timeline-playhead { transform: translateX(4px); }

@media (hover: hover) and (pointer: fine) {
  #apropos .process-step:hover { color: var(--blue-light); translate: 0 0; }
  #apropos .process-step:hover .process-icon { color: var(--blue-light); }
  #apropos .process-step:hover .process-clapper { transform: rotate(-12deg); }
  #apropos .process-step:hover .process-camera-focus { transform: scale(.8); }
  #apropos .process-step:hover .process-timeline-playhead { transform: translateX(4px); }
}

@keyframes coulisses-word-arrive {
  from { opacity: 0; transform: translate3d(0, 22px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes coulisses-route-arrive {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@media (max-width: 760px) {
  #apropos > h2 { margin: 27px 0 30px 3%; }
  #apropos .manifesto-lower { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  #apropos .discipline-presentation { padding-top: 0; padding-left: 3%; }
  #apropos .manifesto-bottom { margin-left: 3%; gap: 18px; }
  #apropos .process-list { gap: 8px 18px; padding-top: 14px; }
  .js #apropos .manifesto-bottom > p.reveal { translate: 12px 0; }
  .js #apropos .manifesto-bottom > p.reveal.visible { translate: 0 0; }
}

/* Pausing keeps the composition intact and all content visible. */
html.user-motion-paused #apropos .process-step {
  opacity: 1;
  translate: none;
}
html.user-motion-paused #apropos .process-list::after {
  animation: none !important;
  transform: scaleX(1);
}
html.user-motion-paused #apropos .process-icon,
html.user-motion-paused #apropos .process-icon * { transform: none; }

@media (prefers-reduced-motion: reduce) {
  #apropos .process-step,
  #apropos .process-icon,
  #apropos .process-icon *,
  #apropos > h2.motion-heading .motion-word {
    opacity: 1 !important;
    translate: none !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
  #apropos .process-list::after { animation: none; transform: scaleX(1); }
}