/* Direction C: Chapter Diptych. Markup in src/dir-c.mjs. 4.2s per frame.
   Only transform / opacity / clip-path animate. Every animation is keyed on
   .is-active OR .is-leaving so the leaving frame never restarts; fill-mode both. */
.dir--c .dir__screen {
  container-type: inline-size;
  background: #f6efe3;
}
.dir--c .film {
  background: #f6efe3;
  --paper: #f6efe3;
  --ink: #4b4034;
  --mute: #84745a;
  --e: cubic-bezier(0.65, 0, 0.35, 1);
  --o: cubic-bezier(0.22, 1, 0.36, 1);
}
.dir--c .film__grain,
.dir--c .film__vignette {
  display: none;
}
.dir--c .frame {
  background: var(--paper);
  transition: none;
}

/* photo: right ~70% of the card, slides +8% -> 0 while the image counter-scales */
.dir--c .c-photo {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 30%;
  right: 0;
  overflow: hidden;
  will-change: transform;
}
.dir--c .c-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 246, 232, 0.14); /* pastel lift, plain alpha */
  pointer-events: none;
}
.dir--c .frame img {
  transform: scale(1.1);
  filter: saturate(0.9) brightness(1.05);
  will-change: transform;
}
.dir--c .frame.is-active .c-photo,
.dir--c .frame.is-leaving .c-photo {
  animation: c-slide 4.2s linear both;
}
.dir--c .frame.is-active img,
.dir--c .frame.is-leaving img {
  animation: c-zoom 4.2s linear both;
}
@keyframes c-slide {
  0% { transform: translate3d(8%, 0, 0); animation-timing-function: var(--o); }
  26% { transform: translate3d(0, 0, 0); animation-timing-function: linear; }
  100% { transform: translate3d(-1.5%, 0, 0); }
}
@keyframes c-zoom {
  0% { transform: scale(1.1); animation-timing-function: var(--o); }
  26% { transform: scale(1); animation-timing-function: linear; }
  100% { transform: scale(1.03); }
}

/* paper panel: full -> 38% diptych -> full (match-cut) */
.dir--c .c-paper {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--paper);
  clip-path: inset(0 62% 0 0);
  will-change: clip-path;
}
.dir--c .frame.is-active .c-paper,
.dir--c .frame.is-leaving .c-paper {
  animation: c-wipe 4.2s linear both;
}
@keyframes c-wipe {
  0% { clip-path: inset(0 0 0 0); animation-timing-function: var(--o); }
  18%, 90% { clip-path: inset(0 62% 0 0); animation-timing-function: cubic-bezier(0.5, 0, 0.75, 0); }
  100% { clip-path: inset(0 0 0 0); }
}

/* typography on the paper */
.dir--c .c-text {
  position: absolute;
  z-index: 3;
  top: 0;
  bottom: 0;
  left: 0;
  width: 38%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  pointer-events: none;
}
.dir--c .c-num {
  position: absolute;
  top: 9cqw;
  left: 0;
  right: 0;
  text-align: center;
  font-family: var(--latin);
  font-style: italic;
  font-weight: 400;
  font-size: 2rem;
  font-size: 7cqw;
  letter-spacing: 0.04em;
  color: var(--mute);
}
.dir--c .c-word {
  display: flex;
  justify-content: center;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 2.2rem;
  font-size: 12cqw;
  line-height: 1.15;
  white-space: nowrap;
}
.lang-en .dir--c .c-word {
  font-family: var(--latin);
  font-weight: 500;
  font-size: 9.9cqw;
}
.dir--c .c-l {
  display: inline-block;
  will-change: transform;
}
.dir--c .c-rule {
  display: block;
  width: 46%;
  height: 1px;
  margin-top: 0.9em;
  margin-top: 4cqw;
  background: var(--ink);
  opacity: 0.55;
  transform-origin: left center;
}

.dir--c .frame.is-active .c-text,
.dir--c .frame.is-leaving .c-text {
  animation: c-out 4.2s linear both;
}
@keyframes c-out {
  0%, 80% { opacity: 1; }
  87%, 100% { opacity: 0; }
}
.dir--c .c-num,
.dir--c .c-l,
.dir--c .c-rule {
  opacity: 0;
}
.dir--c .frame.is-active .c-num,
.dir--c .frame.is-leaving .c-num {
  animation: c-up 0.9s var(--o) 0.2s both;
}
.dir--c .frame.is-active .c-l,
.dir--c .frame.is-leaving .c-l {
  animation: c-track 1.5s var(--o) calc(0.3s + var(--c) * 0.07s) both;
}
.dir--c .frame.is-active .c-rule,
.dir--c .frame.is-leaving .c-rule {
  animation: c-draw 1.2s var(--e) 0.9s both;
}
@keyframes c-up {
  from { opacity: 0; transform: translate3d(0, 0.5em, 0); }
  to { opacity: 1; transform: none; }
}
/* per-letter spread emulating letter-spacing .6em -> .15em (centre-weighted) */
@keyframes c-track {
  0% {
    opacity: 0;
    transform: translate3d(calc((var(--c) - (var(--n, 1) - 1) / 2) * 0.45em), 0, 0);
  }
  40% { opacity: 1; }
  100% { opacity: 1; transform: none; }
}
@keyframes c-draw {
  from { opacity: 0.55; transform: scaleX(0); }
  to { opacity: 0.55; transform: scaleX(1); }
}

/* first appearance of frame 0 (and the paused poster): start from the settled diptych */
.dir--c .film:not(.is-looped) .frame:first-child.is-active .c-paper { animation-name: c-wipe0; }
.dir--c .film:not(.is-looped) .frame:first-child.is-active .c-photo { animation-name: c-slide0; }
.dir--c .film:not(.is-looped) .frame:first-child.is-active img { animation-name: c-zoom0; }
.dir--c .film:not(.is-looped) .frame:first-child.is-active .c-num,
.dir--c .film:not(.is-looped) .frame:first-child.is-active .c-l { animation: none; opacity: 1; }
.dir--c .film:not(.is-looped) .frame:first-child.is-active .c-rule { animation: none; opacity: 0.55; transform: none; }
@keyframes c-wipe0 {
  0%, 90% { clip-path: inset(0 62% 0 0); animation-timing-function: cubic-bezier(0.5, 0, 0.75, 0); }
  100% { clip-path: inset(0 0 0 0); }
}
@keyframes c-slide0 { from { transform: none; } to { transform: translate3d(-1.5%, 0, 0); } }
@keyframes c-zoom0 { from { transform: scale(1); } to { transform: scale(1.03); } }

/* reduced motion: show the settled diptych, no movement */
@media (prefers-reduced-motion: reduce) {
  .dir--c .c-photo,
  .dir--c .frame img,
  .dir--c .c-paper,
  .dir--c .c-text,
  .dir--c .c-num,
  .dir--c .c-l,
  .dir--c .c-rule {
    animation: none !important;
  }
  .dir--c .frame img { transform: none; }
  .dir--c .c-num,
  .dir--c .c-l { opacity: 1; }
  .dir--c .c-rule { opacity: 0.55; transform: none; }
}