/* Direction B: vertical ink. Markup in src/dir-b.mjs. Base state = final composition (reduced motion, paused-at-end);
   motion lives in keyframes keyed on .is-active / .is-leaving so the pause button freezes it. */
.dir--b .dir__screen {
  container-type: inline-size;
  background: #07090d;
}
.dir--b .film {
  background: #050608;
}

/* frame: slow fade through black. Out first (delay .4s), in after a beat (delay .8s) */
.dir--b .frame {
  transition: opacity 1.5s var(--ease-io) 0.8s;
}
.dir--b .frame.is-leaving {
  transition: none;
  animation: b-frame-out 1.1s ease-in 0.5s both;
}
.dir--b .film:not(.is-looped) .frame:first-child.is-active {
  transition-delay: 0s;
  animation: b-slit 2.2s cubic-bezier(0.65, 0, 0.2, 1) both;
}

/* grade: true monochrome, cool lift (flat alpha wash, no blend modes) */
.dir--b .frame img {
  filter: grayscale(1) contrast(1.06) brightness(0.9);
  transform: scale(1.18);
}
.dir--b .frame::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(270deg, rgba(6, 8, 12, 0.62), rgba(6, 8, 12, 0) 68%),
    linear-gradient(rgba(96, 128, 176, 0.13), rgba(96, 128, 176, 0.13));
}

/* photo drifts vertically, the type stays put */
.dir--b .frame.is-active img,
.dir--b .frame.is-leaving img {
  animation: b-drift-a var(--t, 8s) linear both;
}
.dir--b .frame:nth-child(even).is-active img,
.dir--b .frame:nth-child(even).is-leaving img {
  animation-name: b-drift-b;
}

/* type column: [year | rule | word], pinned right, scales with the card */
.dir--b .cap {
  inset: 12% 8cqw max(12%, 66px) auto;
  display: flex;
  flex-direction: row-reverse;
  align-items: stretch;
  gap: 3.4cqw;
  color: #f1efe9;
  text-shadow: 0 1px 18px rgba(0, 0, 0, 0.45);
  font-family: "Noto Serif TC", var(--serif);
}
.dir--b .cap p {
  margin: 0;
  writing-mode: vertical-rl;
  font-size: 8.8cqw;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.9em;
  white-space: nowrap;
  font-feature-settings: "vert";
}
.dir--b .cap .ch {
  display: inline-block;
  opacity: 1;
  filter: none;
  transform: none;
  transition: none;
  -webkit-mask-image: linear-gradient(180deg, #000 42%, transparent 58%);
  mask-image: linear-gradient(180deg, #000 42%, transparent 58%);
  -webkit-mask-size: 100% 260%;
  mask-size: 100% 260%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: 0 0;
  mask-position: 0 0;
}
.dir--b .frame.is-active .cap .ch {
  animation: b-brush 1.5s cubic-bezier(0.4, 0, 0.2, 1) calc(2s + var(--c, 0) * 0.35s) both;
}
.dir--b .b-rule {
  width: 1px;
  background: rgba(241, 239, 233, 0.55);
  transform-origin: top;
}
.dir--b .frame.is-active .b-rule {
  animation: b-rule 1.3s cubic-bezier(0.5, 0, 0.1, 1) 1.1s both;
}
.dir--b .b-y {
  align-self: flex-end;
  writing-mode: vertical-rl;
  text-combine-upright: digits 4;
  font-size: 3.5cqw;
  letter-spacing: 0.32em;
  white-space: nowrap;
  color: rgba(241, 239, 233, 0.62);
  text-shadow: none;
}
.dir--b .frame.is-active .b-y {
  animation: b-fade 1.6s ease 3s both;
}
/* text leaves before the image */
.dir--b .frame.is-leaving .cap {
  animation: b-text-out 0.7s ease-in both;
}
.dir--b .film__btn {
  right: 10px;
  bottom: 10px;
}

@keyframes b-slit {
  from {
    clip-path: inset(49.6% 0 49.6% 0);
  }
  to {
    clip-path: inset(0);
  }
}
@keyframes b-frame-out {
  to {
    opacity: 0;
  }
}
@keyframes b-text-out {
  to {
    opacity: 0;
  }
}
@keyframes b-drift-a {
  from {
    transform: scale(1.18) translate3d(0, 3.5%, 0);
  }
  to {
    transform: scale(1.18) translate3d(0, -3.5%, 0);
  }
}
@keyframes b-drift-b {
  from {
    transform: scale(1.18) translate3d(0, -3.5%, 0);
  }
  to {
    transform: scale(1.18) translate3d(0, 3.5%, 0);
  }
}
@keyframes b-rule {
  from {
    transform: scaleY(0);
  }
  to {
    transform: scaleY(1);
  }
}
@keyframes b-fade {
  from {
    opacity: 0;
  }
}
@keyframes b-brush {
  from {
    opacity: 0;
    filter: blur(4px);
    -webkit-mask-position: 0 100%;
    mask-position: 0 100%;
  }
  25% {
    opacity: 1;
  }
  to {
    opacity: 1;
    filter: blur(0);
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
  }
}

/* reduced motion: show the finished composition, no animation */
@media (prefers-reduced-motion: reduce) {
  .dir--b .frame,
  .dir--b .frame *,
  .dir--b .frame.is-leaving {
    animation: none !important;
  }
  .dir--b .frame img {
    transform: scale(1.18) !important;
  }
}