/* V2's final layout and copy reveal run on the animation clock, including
   arbitrary seeks — so no CSS transitions here, only values paint() writes.
   Every var is already eased in JS on the variant's shared `flow` curve. */
/* The resting state is the FINAL one — stage docked, every line of copy in —
   so that without the script, or if its setup fails, the section still reads
   as a page: the portrait in its panel and the words beside it. The module
   writes these to 0 the moment it starts and drives them from there. */
.about-v2 {
  --dock: 1; --name-in: 1; --title-in: 1;
  --l1: 1; --l2: 1; --l3: 1; --l4: 1; --credit-in: 1;
}
.about-v2 .about-topline,
.about-v2 .about-copy,
.about-v2 .about-controls { transition: none; }

/* The copy block itself never fades — its parts arrive on their own beats. */
.about-v2 .about-copy { opacity: 1 !important; transform: none !important; }

.about-v2 .about-topline {
  opacity: var(--name-in) !important;
  transform: translateY(calc((1 - var(--name-in)) * 10px)) !important;
}
.about-v2 .about-copy h1 {
  opacity: var(--title-in);
  transform: translateY(calc((1 - var(--title-in)) * 16px));
}
.about-v2 .about-description p:nth-child(1) { opacity: var(--l1); transform: translateY(calc((1 - var(--l1)) * 12px)); }
.about-v2 .about-description p:nth-child(2) { opacity: var(--l2); transform: translateY(calc((1 - var(--l2)) * 12px)); }
.about-v2 .about-description p:nth-child(3) { opacity: var(--l3); transform: translateY(calc((1 - var(--l3)) * 12px)); }
.about-v2 .about-description p:nth-child(4) { opacity: var(--l4); transform: translateY(calc((1 - var(--l4)) * 12px)); }

.about-v2 .about-controls { opacity: var(--l4); }
.about-v2 .about-credit {
  opacity: var(--credit-in) !important;
  transform: translateY(calc((1 - var(--credit-in)) * 8px));
  transition: none;
}

@media (max-width: 900px) {
  /* Same move as the desktop dock, on the same clock: THE WHOLE SCREEN while
     the sequence plays, about half once it has settled. Interpolated rather
     than transitioned so an arbitrary seek lands on the right state.
     Full screen means it: the stage bleeds over the section's side padding
     and over the gap above it (the header's space — the header is away while
     it plays) by exactly those amounts, and its corners go square, all at
     (1 − dock), so the dock draws it back into the 18px card as it shrinks
     (Khusan, 17 Sep night: "white borders from left and right and top header
     … make sure flicker happening on the full screen on mobile and tablet"). */
  .about-v2 .about-stage {
    --bleed: calc(1 - var(--dock));
    margin-inline: calc(var(--bleed) * -1 * var(--about-pad-x));
    margin-top: calc(var(--bleed) * -1 * (var(--about-pad-top) + var(--about-gap)));
    /* !important, as the height: the phase rules in about.css (a higher
       specificity) would put the 10px back mid-reel, and four rounded corners on
       a full-screen stage are four white corners. */
    border-radius: calc(var(--dock) * 10px) !important;
    min-height: calc(var(--bleed) * 100svh + var(--dock) * 50svh) !important;
    transition: none;
  }
}

@media (min-width: 901px) {
  .about-v2 .about-stage {
    left: calc(52% * var(--dock)) !important;
    right: calc(4.25vw * var(--dock)) !important;
    top: calc(clamp(20px, 2.1vw, 42px) * var(--dock)) !important;
    bottom: calc(clamp(28px, 3.4vw, 64px) * var(--dock)) !important;
    border-radius: calc(10px * var(--dock)) !important;
    transition: none;
  }
}

/* The count during the flicker — the KD loader's meter, to the pixel: the
   same 220px measure, the same 11px tabular line, the same 1px track at
   max(40px, 8vh) from the foot. Its colours follow the sampled tone of the
   frame behind it (paint() writes the three vars), and on a dark frame they
   ARE the KD loader's greys. Visibility and fill are values on the clock, so
   a seek lands on the right state. It fades as the collage assembles. */
.about-v2 .about-progress {
  position: absolute;
  left: 50%;
  bottom: max(40px, 8vh);
  z-index: 2;
  width: min(220px, 58vw);
  transform: translateX(-50%);
  opacity: var(--meter, 0);
  pointer-events: none;
}
.about-v2 .about-progress-meta {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
  font-size: 11px;
  line-height: 1;
  letter-spacing: .025em;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  color: var(--about-meter-ink, #b8b8bb);
}
.about-v2 .about-progress-track {
  height: 1px;
  background: var(--about-meter-track, #303033);
  overflow: hidden;
}
.about-v2 .about-progress-track i {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--about-meter-fill, #efeff1);
  transform: scaleX(var(--meter-fill, 0));
  transform-origin: left;
}