/* Loader, top bar, timeline ruler and the video player. */
.loader { display: none; }
.motion .loader {
  display: block; position: fixed; inset: 0; z-index: 60; pointer-events: none;
}
.loader__ui {
  position: absolute; left: 50%; top: 68%; transform: translateX(-50%);
  width: min(320px, 78vw); display: grid; gap: 12px;
}
.loader__row { display: flex; justify-content: space-between; gap: 24px; color: var(--dim); }
.loader__count { color: var(--fg); }
.loader__bar { height: 1px; background: var(--line); }
.loader__bar i { display: block; height: 100%; background: var(--fg); transform: scaleX(0); transform-origin: left; }

.topbar {
  position: fixed; inset: 0 0 auto 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  height: 72px; padding: 0 var(--pad); mix-blend-mode: difference;
}
.motion.is-loading .topbar, .motion.is-loading .timeline { visibility: hidden; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 15px; font-variation-settings: "wdth" 115; }
.goat-mark {
  display: inline-block; width: 30px; aspect-ratio: 1; background: currentColor;
  -webkit-mask: var(--goat-mask) center / contain no-repeat;
          mask: var(--goat-mask) center / contain no-repeat;
}
.lang { display: flex; gap: 14px; }
.lang a { color: var(--dim); padding: 6px 2px; transition: color 0.2s; }
.lang a:hover, .lang a[aria-current="page"] { color: var(--fg); }
.lang a[aria-current="page"] { text-decoration: underline; text-underline-offset: 5px; }

/* ---------- timeline ---------- */
.timeline { display: none; }
.motion .timeline {
  display: block; position: fixed; left: var(--pad); right: var(--pad); bottom: 14px;
  height: 46px; z-index: 40; mix-blend-mode: difference;
}
.timeline canvas { position: absolute; inset: auto 0 0 0; width: 100%; height: 26px; }
.timeline__head {
  position: absolute; left: -1px; bottom: 0; width: 2px; height: 22px;
  background: var(--fg); transform-origin: bottom;
}
.timeline__labels { position: absolute; inset: 0 0 auto 0; height: 20px; }
.timeline__labels a {
  position: absolute; left: 0; top: 0;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em;
  opacity: 0.55; transition: opacity 0.25s; white-space: nowrap;
}
.timeline__labels a:hover, .timeline__labels a.is-on { opacity: 1; }
.timeline__labels a.is-on { font-weight: 500; }

@media (max-width: 767px) {
  .timeline__labels a { display: none; }
  .timeline__labels a.is-on { display: block; }
}

/* ---------- player ---------- */
.player {
  margin: auto; width: min(1100px, 92vw); background: var(--bg); color: var(--fg);
  border: 1px solid var(--line-strong); padding: 0;
}
.player::backdrop { background: rgba(6, 6, 6, 0.88); }
.player iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }
.player__close {
  display: block; margin-left: auto; padding: 12px 16px; background: none; border: 0;
  color: var(--fg); cursor: pointer;
}