/* ==========================================================================
   A2d2 — Kili's practice clips (on top of a2d.css; shared/ is untouched)
   1. How we work: the stones plate becomes a moving print, a 7.4s silent loop of the 90/90 load progression;
      its caption names the move on the left and "Watch the practice" sits on the right.
   2. Explore · Practice: a dark band between How we work and Ways to work together. Six silent demonstrations as a strip of
      prints (2:3; the one landscape clip is a 3:2 print), each opening the whole clip in a player.
   Value rhythm of chapter 2 becomes: stone · DARK · paper.
   ========================================================================== */

/* ---------- 1. The moving print ---------- */
.process__plate.print { gap: 0.8rem; }
.plate-loop { position: relative; }
.plate-loop video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%);
  opacity: 0; transition: opacity 1.4s var(--ease-out);
}
.plate-loop video.is-playing { opacity: 1; }
.plate-link {
  padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em;
  text-decoration-color: var(--line-strong); transition: text-decoration-color 0.4s var(--ease);
}
@media (hover: hover) { .plate-link:hover { text-decoration-color: currentColor; } }

/* ---------- 2. Practice band ---------- */
.practice { --clip-h: clamp(21rem, 31vw, 29rem); --strip-pad: max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter))); }
.practice__head { margin-bottom: clamp(3rem, 5.5vw, 5rem); align-items: end; }
.practice__title { grid-column: 1 / 7; }
.practice__intro { grid-column: 8 / 12; font: 400 var(--fs-ui)/1.6 var(--sans); color: var(--on-dark-mute); }

/* The strip starts on the page's left edge and runs off the right; it scrolls inside itself, never the page */
.practice__strip {
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--strip-pad);
  scrollbar-width: none; outline: none;
}
.practice__strip::-webkit-scrollbar { display: none; }
.practice__list { display: flex; gap: clamp(1rem, 1.8vw, 1.5rem); width: max-content; padding-inline: var(--strip-pad); }
.clip { scroll-snap-align: start; }

.clip__btn {
  display: grid; gap: 0; padding: 0; border: 0; background: none; color: inherit; text-align: left; cursor: pointer;
}
.clip__img { position: relative; display: block; height: var(--clip-h); aspect-ratio: 2 / 3; overflow: hidden; background-color: rgba(241, 242, 235, 0.06); }
.clip--wide .clip__img { aspect-ratio: 3 / 2; }
.clip__img img { width: 100%; height: 100%; object-fit: cover; }
.js .clip__img.is-shown img { transition: opacity 1.5s var(--ease-out), scale 1.1s var(--ease-out); }

.clip__play {
  position: absolute; left: 0.9rem; bottom: 0.9rem; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding-left: 2px;
  border-radius: 50%; background: var(--on-dark); color: var(--spruce-deep);
  transition: transform 0.5s var(--ease), background-color 0.4s var(--ease);
}
.clip__dur {
  position: absolute; right: 0.9rem; bottom: 1.25rem; padding: 0.25rem 0.5rem; border-radius: 999px;
  background: rgba(17, 26, 21, 0.62); color: var(--on-dark);
  font: 500 0.75rem/1 var(--sans); letter-spacing: 0.02em; font-variant-numeric: tabular-nums;
}
.clip__title { margin-top: 1rem; font: 300 clamp(1.25rem, 1.05rem + 0.5vw, 1.5rem)/1.15 var(--serif); letter-spacing: -0.01em; color: var(--on-dark); }
.clip__tag { margin-top: 0.4rem; font: 400 0.8125rem/1.3 var(--sans); color: var(--on-dark-mute); }
.clip__btn:focus-visible { outline: none; }
.clip__btn:focus-visible .clip__img { outline: 1px solid var(--on-dark); outline-offset: 4px; }
@media (hover: hover) {
  .clip__btn:hover .clip__img.is-shown img { scale: 1.03; }
  .clip__btn:hover .clip__play { transform: scale(1.08); }
}

.practice__foot { display: flex; justify-content: space-between; align-items: center; gap: 2rem; margin-top: clamp(2rem, 3.5vw, 3rem); }
.practice__note { max-width: 34rem; font: 400 0.8125rem/1.5 var(--sans); color: var(--on-dark-mute); }
.practice__nav { display: flex; align-items: center; gap: 0.9rem; flex: none; }
.practice__nav[hidden] { display: none; }
.practice__count { min-width: 5.5rem; text-align: center; font: 500 var(--fs-meta)/1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--on-dark-mute); font-variant-numeric: tabular-nums; }
.practice__arrow {
  display: grid; place-items: center; width: 3rem; height: 3rem; border: 1px solid var(--line-dark); border-radius: 50%;
  background: none; color: var(--on-dark); font: 400 1rem/1 var(--sans); cursor: pointer;
  transition: background-color 0.4s var(--ease), color 0.4s var(--ease), opacity 0.4s var(--ease);
}
.practice__arrow:disabled { opacity: 0.3; cursor: default; }
@media (hover: hover) { .practice__arrow:not(:disabled):hover { background: var(--on-dark); color: var(--spruce-deep); } }

/* ---------- The player ---------- */
html:has(.player[open]) { overflow: hidden; }   /* the dialog takes the page; main.js's menu lock on body is left alone */
.player {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: transparent; color: var(--on-dark-soft); overflow: hidden;
}
.player::backdrop { background: var(--spruce-ink); }
.player::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.07; background-image: var(--noise); }
.player__inner {
  --pad-y: clamp(4.5rem, 7vh, 5.5rem);
  position: relative; height: 100%; max-width: var(--maxw); margin-inline: auto; padding: var(--pad-y) var(--gutter) clamp(1.5rem, 5vh, 3rem);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(15rem, 22rem); column-gap: clamp(2rem, 5vw, 5rem); align-items: center;
}
.player__frame { height: 100%; min-height: 0; display: flex; align-items: center; justify-content: flex-end; }   /* the clip sits by its words */
.player__frame video { display: block; max-width: 100%; max-height: 100%; background: #000; }   /* sized to the clip by practice.js, so the controls sit on the picture */
.player__tag { font: 500 var(--fs-meta)/1.3 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--on-dark-mute); }
.player__title { margin-top: 1rem; font: 300 clamp(1.9rem, 1.3rem + 1.4vw, 2.75rem)/1.06 var(--serif); letter-spacing: -0.02em; color: var(--on-dark); }
.player__desc { margin-top: 1.25rem; font: 400 1.0625rem/1.55 var(--serif); color: var(--on-dark-soft); }
.player__meta { display: flex; gap: 0.6rem; margin-top: 1.25rem; font: 400 0.8125rem/1.3 var(--sans); color: var(--on-dark-mute); font-variant-numeric: tabular-nums; }
.player__steps { display: flex; gap: 0.6rem; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--line-dark); }
.player__step, .player__close {
  display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; padding: 0 1.1rem; border: 1px solid var(--line-dark); border-radius: 999px;
  background: none; color: var(--on-dark); font: 400 var(--fs-ui)/1 var(--sans); cursor: pointer;
  transition: background-color 0.4s var(--ease), color 0.4s var(--ease), border-color 0.4s var(--ease);
}
.player__close { position: absolute; top: 1rem; right: var(--gutter); }
.player__note { margin-top: 1.5rem; font: 400 0.75rem/1.5 var(--sans); color: var(--on-dark-mute); }
@media (hover: hover) {
  .player__step:hover, .player__close:hover { background: var(--on-dark); border-color: var(--on-dark); color: var(--spruce-deep); }
}

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    /* the loop drifts inside its frame exactly like the still it sits on */
    [data-par] video {
      position: absolute; left: 0; top: calc(var(--t) * -1%); width: 100%; height: calc(100% + var(--t) * 2%);
      animation: par linear both; animation-timeline: --par; animation-range: cover;
    }
  }
  .player[open] { animation: player-in 0.5s var(--ease-out); }
  .player[open]::backdrop { animation: player-in 0.5s var(--ease-out); }
}
@keyframes player-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .plate-loop video { display: none; }   /* the still stays */
}

/* ---------- Small screens ---------- */
@media (max-width: 760px) {
  .practice { --clip-h: min(23rem, calc(100vw - 2 * var(--gutter) - 2rem)); }
  .practice__intro { margin-top: 1.5rem; }
  .clip--wide .clip__img { aspect-ratio: 1; }          /* a square cut of the landscape print, so it never outgrows the screen */
  .practice__foot { flex-direction: column; align-items: flex-start; gap: 1.5rem; }

  .player__inner { --pad-y: 4.25rem; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; row-gap: 1.25rem; align-items: start; overflow-y: auto; }
  .player__frame { height: 62dvh; }   /* the clip gets most of the screen; the words scroll beneath it */
  .player__title { margin-top: 0.6rem; font-size: 1.75rem; }
  .player__desc { margin-top: 0.8rem; font-size: 1rem; }
  .player__steps { margin-top: 1.25rem; padding-top: 1.1rem; }
}