/* Photo Illusions — spoken product summaries (assets/js/lib/voice.js): the Listen button + the mini player dock */

/* ---------- Listen button ([data-voice]) ---------- */
.pv-btn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 14px 0 11px;
  border-radius: 999px; border: 1px solid rgba(41, 231, 255, .45); background: rgba(41, 231, 255, .08);
  color: #d8fbff; font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  cursor: pointer; white-space: nowrap;
  transition: background .25s, border-color .25s, box-shadow .25s, transform .25s cubic-bezier(.2, .8, .2, 1);
}
.pv-btn[hidden] { display: none; }
.pv-btn:hover { background: rgba(41, 231, 255, .16); border-color: var(--cyan); box-shadow: 0 0 22px -6px var(--cyan); transform: translateY(-1px); }
.pv-btn .ico { width: 16px; height: 16px; }
.pv-btn-dur { color: var(--muted); letter-spacing: .06em; font-weight: 500; }
.pv-btn-dur:empty { display: none; }
.pv-btn.is-playing, .pv-btn.is-paused { color: #fff; border-color: var(--cyan); background: linear-gradient(100deg, rgba(41, 231, 255, .22), rgba(138, 92, 255, .22)); box-shadow: 0 0 24px -8px var(--cyan); }
.pv-btn.is-playing .pv-ic, .pv-btn.is-paused .pv-ic { display: none; }
.pv-btn .pv-eq { display: none; }
.pv-btn.is-playing .pv-eq, .pv-btn.is-paused .pv-eq { display: inline-flex; }
.pv-btn.is-nudge { animation: pv-nudge 1.5s ease-in-out 4; }
@keyframes pv-nudge {
  50% { border-color: var(--cyan); box-shadow: 0 0 0 6px rgba(41, 231, 255, .16), 0 0 28px -4px var(--cyan); }
}

/* equalizer bars (button + dock) */
.pv-eq { align-items: flex-end; gap: 2px; width: 16px; height: 14px; flex: none; }
.pv-eq i { flex: 1; height: 30%; border-radius: 1px; background: currentColor; }
.is-playing .pv-eq i { animation: pv-eq .9s ease-in-out infinite; }
.is-playing .pv-eq i:nth-child(2) { animation-delay: -.45s; animation-duration: .8s; }
.is-playing .pv-eq i:nth-child(3) { animation-delay: -.2s; animation-duration: 1.05s; }
.is-playing .pv-eq i:nth-child(4) { animation-delay: -.65s; animation-duration: .7s; }
@keyframes pv-eq { 0%, 100% { height: 22%; } 50% { height: 100%; } }
.pv-eq i:nth-child(2) { height: 70%; }
.pv-eq i:nth-child(3) { height: 45%; }
.pv-eq i:nth-child(4) { height: 85%; }

/* ---------- dock ---------- */
.pv-dock {
  position: fixed; left: 20px; bottom: calc(20px + env(safe-area-inset-bottom)); z-index: 90;
  width: min(410px, calc(100vw - 40px));
  display: grid; grid-template-columns: 46px minmax(0, 1fr) auto 36px;
  grid-template-areas: "play head head x" "cap cap cap cap" "bar bar sw sw";
  align-items: center; gap: 10px 12px; padding: 12px 12px 12px 14px; border-radius: 20px;
  background: linear-gradient(160deg, rgba(16, 24, 58, .94), rgba(8, 12, 30, .92));
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid var(--line-2);
  box-shadow: 0 20px 50px -14px rgba(0, 0, 0, .75), 0 0 44px -18px var(--cyan);
  opacity: 0; visibility: hidden; transform: translateY(18px);
  transition: opacity .35s var(--ease, ease), transform .45s cubic-bezier(.2, .8, .2, 1), visibility .35s;
}
.pv-dock.is-on { opacity: 1; visibility: visible; transform: none; }
.pv-dock::before { /* gradient hairline on top */
  content: ""; position: absolute; left: 18px; right: 18px; top: -1px; height: 1px; background: var(--grad); opacity: .8; border-radius: 1px;
}

.pv-dock-play {
  grid-area: play; width: 46px; height: 46px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer;
  color: #04121a; background: var(--grad); box-shadow: 0 0 22px -4px rgba(41, 231, 255, .7);
  transition: transform .2s, box-shadow .2s;
}
.pv-dock-play:hover { transform: scale(1.06); box-shadow: 0 0 30px -2px rgba(41, 231, 255, .8); }
.pv-dock-play .ico { width: 20px; height: 20px; }

.pv-dock-head { grid-area: head; min-width: 0; }
.pv-dock-kicker { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--cyan); }
.pv-dock-kicker .pv-eq { display: inline-flex; width: 14px; height: 12px; }
.pv-dock-time { margin-left: auto; color: var(--muted); letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.pv-dock-name { margin-top: 2px; font-weight: 650; font-size: 15px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.pv-dock-x {
  grid-area: x; align-self: start; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--line); background: rgba(255, 255, 255, .04); color: var(--ink-2); transition: all .2s;
}
.pv-dock-x:hover { color: #fff; border-color: var(--line-2); background: rgba(255, 255, 255, .1); }
.pv-dock-x .ico { width: 16px; height: 16px; }

/* live captions: the sentence being spoken */
.pv-dock-cap {
  grid-area: cap; min-height: 2.9em; font-size: 14px; line-height: 1.45; color: var(--ink-2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.pv-dock-bar { grid-area: bar; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.pv-dock-bar i { display: block; height: 100%; background: var(--grad); transform-origin: 0 50%; transform: scaleX(0); transition: transform .25s linear; }

.pv-dock-auto {
  grid-area: sw; justify-self: end;
  display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 10px 0 6px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: transparent; color: var(--muted);
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
}
.pv-dock-auto:hover { color: var(--ink); border-color: var(--line-2); }
.pv-sw { position: relative; width: 24px; height: 14px; border-radius: 999px; background: rgba(255, 255, 255, .16); transition: background .25s; flex: none; }
.pv-sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 10px; height: 10px; border-radius: 50%; background: #c3cde6; transition: transform .25s, background .25s; }
.pv-dock-auto[aria-pressed="true"] { color: var(--ink-2); }
.pv-dock-auto[aria-pressed="true"] .pv-sw { background: rgba(41, 231, 255, .45); }
.pv-dock-auto[aria-pressed="true"] .pv-sw::after { transform: translateX(10px); background: #fff; }

/* product pages: the hero copy + Book button are on the left, so the player sits bottom-right (over the photo) */
body.pp .pv-dock { left: auto; right: 20px; }
/* product pages on phones: sit above the sticky "Book this" bar */
body:has(.pp-sticky.is-on) .pv-dock { bottom: calc(88px + env(safe-area-inset-bottom)); }

@media (max-width: 759px) {
  .pv-dock, body.pp .pv-dock { left: 12px; right: 12px; width: auto; padding: 11px 11px 11px 12px; }
  .pv-dock { bottom: calc(12px + env(safe-area-inset-bottom)); }
  .pv-btn { min-height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .is-playing .pv-eq i, .pv-btn.is-nudge { animation: none; }
  .pv-dock { transition: opacity .2s, visibility .2s; transform: none; }
}
html.reduced .is-playing .pv-eq i, html.reduced .pv-btn.is-nudge { animation: none; }