/* A clip in a phone frame (lib/video.js), used in the experience and proof sections. Each section brings
   its phones in its own way (they start hidden). */

.phone { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 16px;
  transform: translateY(60px); opacity: 0; transition: transform 1s var(--ease) var(--d, 0s), opacity .8s ease var(--d, 0s); }
.phone-frame {
  position: relative; height: min(56vh, 540px); aspect-ratio: 9 / 16; border-radius: 34px; padding: 9px;
  background: #0a0a0d; box-shadow: 0 0 0 2px #3a3346, 0 40px 80px rgba(0, 0, 0, .5);
}
.phone-frame::before { content: ""; position: absolute; top: 16px; left: 50%; width: 28%; height: 16px; border-radius: 10px;
  transform: translateX(-50%); background: #0a0a0d; z-index: 2; }
.phone video { width: 100%; height: 100%; object-fit: cover; border-radius: 26px; display: block; background: #222; }
.phone figcaption { max-width: 220px; text-align: center; font: 500 14px/1.4 var(--sans); color: color-mix(in srgb, var(--cream) 80%, transparent); }

/* if the browser won't autoplay it: a play button, and a tap on the clip starts it */
.phone-frame.needs-tap { cursor: pointer; }
.phone-frame.needs-tap::after { content: "▶"; position: absolute; left: 50%; top: 50%; z-index: 3; width: 64px; height: 64px; display: grid;
  place-items: center; border-radius: 50%; transform: translate(-50%, -50%); background: rgba(255, 255, 255, .92); color: var(--ink);
  font-size: 22px; padding-left: 4px; box-shadow: 0 10px 30px rgba(0, 0, 0, .3); }

/* the sound button (one clip at a time has sound: lib/video.js) */
.sound {
  position: absolute; right: 18px; bottom: 18px; z-index: 3; width: 40px; height: 40px; border-radius: 50%; border: 0;
  background: rgba(255, 255, 255, .9); color: var(--ink); cursor: pointer; display: grid; place-items: center;
  transition: transform .2s, background .2s;
}
.sound:hover { transform: scale(1.08); }
.sound[aria-pressed="true"] { background: var(--gold); }
.sound svg { width: 18px; height: 18px; }

@media (max-width: 900px) {
  .phone-frame { height: 30vh; }
  .phone figcaption { display: none; }
}