/* ---------- Autoplay: the site plays itself like a film (autoplay.js) ---------- */

/* the nav button */
.nav__play {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px 9px 10px;
  border: 1px solid rgba(17, 19, 18, .18);
  border-radius: 999px;
  background: rgba(255, 255, 255, .55);
  color: var(--ink);
  font: 500 12px/1 var(--sans);
  letter-spacing: .01em;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: background .25s, border-color .25s, transform .25s;
}
.nav__play i {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--ink);
}
.nav__play i::before { content: ""; margin-left: 2px; border-left: 7px solid var(--green); border-top: 4.5px solid transparent; border-bottom: 4.5px solid transparent; }
.nav__play:hover { background: #fff; border-color: var(--ink); transform: translateY(-1px); }
.nav__play:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (max-width: 600px) { .nav__play span { display: none; } .nav__play { padding: 7px; } }

/* the overlay */
.ap { position: fixed; inset: 0; z-index: 90; pointer-events: none; }
.ap[hidden] { display: none; }
.ap__glass { position: absolute; inset: 0; pointer-events: auto; cursor: none; }
.ap.is-ended .ap__glass { cursor: auto; background: rgba(10, 11, 11, .35); transition: background .6s; }

/* letterbox bars close in like a film */
.ap__bar {
  position: absolute;
  left: 0;
  right: 0;
  height: clamp(44px, 8vh, 84px);
  background: #0a0b0b;
  transition: transform .9s cubic-bezier(.7, 0, .2, 1);
}
.ap__bar--top { top: 0; transform: translateY(-101%); }
.ap__bar--bottom { bottom: 0; transform: translateY(101%); }
.ap.is-on .ap__bar { transform: none; }

/* the cursor */
.ap__cursor {
  position: absolute;
  left: 0;
  top: 0;
  margin: -3px 0 0 -4px;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .35));
  opacity: 0;
  transition: opacity .4s;
  will-change: transform;
}
.ap.is-on .ap__cursor { opacity: 1; }
.ap.is-ended .ap__cursor { opacity: 0; }
.ap__cursor svg { display: block; transition: transform .12s; transform-origin: 4px 3px; }
.ap__cursor.is-down svg { transform: scale(.82); }
/* a ring blooms on each press */
.ap__cursor i { position: absolute; left: 4px; top: 3px; width: 34px; height: 34px; margin: -17px; border: 2px solid var(--green); border-radius: 50%; opacity: 0; transform: scale(.3); }
.ap__cursor.is-down i { animation: ap-press .5s ease-out; }
@keyframes ap-press { from { opacity: .9; transform: scale(.3); } to { opacity: 0; transform: scale(1.4); } }

/* the controls sit in the bottom bar */
.ap__controls {
  position: absolute;
  left: 50%;
  bottom: clamp(8px, 1.6vh, 18px);
  display: flex;
  align-items: center;
  gap: 14px;
  width: min(560px, calc(100vw - 24px));
  padding: 6px 6px 6px 6px;
  border-radius: 999px;
  background: rgba(243, 241, 234, .08);
  color: #f3f1ea;
  pointer-events: auto;
  opacity: 0;
  transform: translate(-50%, 16px);
  transition: opacity .5s .4s, transform .6s .4s cubic-bezier(.2, .8, .2, 1);
}
.ap.is-on .ap__controls { opacity: 1; transform: translate(-50%, 0); }
.ap.is-ended .ap__controls { opacity: 0; pointer-events: none; }
.ap__pause, .ap__stop {
  flex: none;
  display: grid;
  place-items: center;
  height: 34px;
  border: 0;
  border-radius: 999px;
  background: #f3f1ea;
  color: #111312;
  font: 500 12px/1 var(--sans);
  cursor: pointer;
}
.ap__pause { width: 34px; }
.ap__stop { padding: 0 14px; background: rgba(243, 241, 234, .14); color: #f3f1ea; }
.ap__stop:hover { background: rgba(243, 241, 234, .24); }
.ap__pause:focus-visible, .ap__stop:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.ap__i-pause { width: 10px; height: 11px; border-left: 3px solid; border-right: 3px solid; }
.ap__i-play { display: none; margin-left: 3px; border-left: 10px solid; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.ap.is-paused .ap__i-pause { display: none; }
.ap.is-paused .ap__i-play { display: block; }
.ap__now { flex: none; display: grid; gap: 3px; min-width: 96px; }
.ap__now span { font: 500 9px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: rgba(243, 241, 234, .55); }
.ap__now b { font: 400 17px/1 var(--serif); font-style: italic; }
.ap__progress { position: relative; flex: 1; height: 2px; border-radius: 2px; background: rgba(243, 241, 234, .18); overflow: hidden; }
.ap__progress i { position: absolute; inset: 0; background: var(--green); transform: scaleX(0); transform-origin: 0 50%; }

/* the end card */
.ap__end {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(520px, calc(100vw - 32px));
  padding: 34px 32px 28px;
  border-radius: 24px;
  background: #111312;
  color: #f3f1ea;
  text-align: center;
  box-shadow: 0 40px 90px rgba(0, 0, 0, .45);
  pointer-events: auto;
  transform: translate(-50%, -50%);
  animation: ap-end .8s cubic-bezier(.2, .8, .2, 1);
}
.ap__end[hidden] { display: none; }
@keyframes ap-end { from { opacity: 0; transform: translate(-50%, -44%) scale(.96); } }
.ap__end-kicker { font: 500 11px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--green); }
.ap__end-title { margin-top: 14px; font: 400 clamp(36px, 6vw, 56px)/1 var(--serif); letter-spacing: -0.02em; }
.ap__end-title em { color: var(--green); }
.ap__end-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 26px; }
.ap__end-actions > * {
  padding: 13px 18px;
  border: 1px solid rgba(243, 241, 234, .25);
  border-radius: 999px;
  background: none;
  color: #f3f1ea;
  font: 500 13px/1 var(--sans);
  cursor: pointer;
  transition: background .25s, color .25s, border-color .25s;
}
.ap__end-actions > *:hover { background: #f3f1ea; color: #111312; }
.ap__hire { background: var(--green) !important; border-color: var(--green) !important; color: #0d1411 !important; }
.ap__end-actions > *:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.ap__live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

@media (max-width: 600px) {
  .ap__controls { gap: 10px; }
  .ap__now { min-width: 76px; }
  .ap__now b { font-size: 15px; }
  .ap__stop { padding: 0 11px; }
}