/* Sound notices on the films page (#p3): the headphones pill on the programme screen and the
   notice that shows when a film starts. Behaviour in prod/voice-over.js. Site tokens from site.css. */

.hp{position:relative;display:inline-grid;place-items:center;width:30px;height:30px;flex:none;border-radius:50%;
  color:var(--teal-br);background:rgba(22,201,144,.1);border:1px solid rgba(22,201,144,.35)}
.hp svg{width:18px;height:18px}
.hp .w{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;opacity:0;transform-origin:12px 15px}
.hp .w1{animation:hpWave 1.6s cubic-bezier(.25,.8,.25,1) infinite}
.hp .w2{animation:hpWave 1.6s cubic-bezier(.25,.8,.25,1) .4s infinite}
@keyframes hpWave{0%{opacity:0;transform:scale(.6)}35%{opacity:.9}100%{opacity:0;transform:scale(1.25)}}
.off .hp,.muted .hp{color:var(--grey);background:rgba(159,176,196,.08);border-color:var(--line-str)}
.off .hp .w,.muted .hp .w{animation:none;opacity:0}

/* Programme screen: beside "S1 starts in 5 · or choose a film" */
/* Out of the layout flow, so the programme keeps its exact height */
.pg-cd{position:relative;align-self:stretch}
.pg-snd{position:absolute;right:0;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;gap:10px;padding:4px 14px 4px 4px;border-radius:999px;
  border:1px solid var(--line-str);background:rgba(6,16,30,.55);color:var(--grey);cursor:pointer;font:inherit;text-align:left;
  transition:border-color .25s cubic-bezier(.25,.8,.25,1),background .25s cubic-bezier(.25,.8,.25,1)}
.pg-snd:hover{border-color:rgba(22,201,144,.55);background:rgba(22,201,144,.06)}
.pg-snd.off:hover{border-color:var(--purple-lt);background:rgba(127,119,221,.08)}
.pg-snd:focus-visible{outline:2px solid var(--purple-lt);outline-offset:3px}
.pg-snd-t{display:grid;gap:3px;text-transform:none;letter-spacing:0}
.pg-snd-t b{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--teal-br);font-weight:600}
.pg-snd.off .pg-snd-t b{color:var(--grey)}
.pg-snd-t span{font-family:var(--body,inherit);font-size:12.5px;color:var(--grey)}

/* When a film starts: a notice at the top of the film, then it fades */
.snd-note{position:absolute;z-index:6;top:18px;left:50%;display:flex;align-items:center;gap:12px;
  padding:8px 18px 8px 8px;border-radius:999px;border:1px solid var(--line-str);
  background:rgba(6,16,30,.82);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:0 18px 50px -20px rgba(0,0,0,.8);color:var(--ink);font:inherit;text-align:left;cursor:pointer;
  opacity:0;transform:translate(-50%,-10px);transition:opacity .4s cubic-bezier(.25,.8,.25,1),transform .4s cubic-bezier(.25,.8,.25,1)}
.snd-note.show{opacity:1;transform:translate(-50%,0)}
.snd-note[hidden]{display:none}
.snd-note:focus-visible{outline:2px solid var(--purple-lt);outline-offset:3px}
.snd-note .t{display:grid;gap:2px}
.snd-note .t b{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--teal-br);font-weight:600}
.snd-note .t span{font-size:13px;color:var(--grey)}
.snd-note.blocked{border-color:rgba(127,119,221,.6);animation:sndBeat 2.4s cubic-bezier(.25,.8,.25,1) infinite}
.snd-note.blocked .t b,.snd-note.muted .t b{color:var(--purple-lt)}
.snd-note.blocked .hp{color:var(--purple-lt);background:rgba(127,119,221,.12);border-color:rgba(127,119,221,.45)}
@keyframes sndBeat{0%,100%{box-shadow:0 18px 50px -20px rgba(0,0,0,.8),0 0 0 0 rgba(127,119,221,.35)}50%{box-shadow:0 18px 50px -20px rgba(0,0,0,.8),0 0 0 8px rgba(127,119,221,0)}}

/* Narrower desktop windows: the pill keeps its icon and state, the line about headphones moves to its tooltip */
@media(max-width:1100px){.pg-snd{padding-right:12px}.pg-snd-t span{display:none}}
@media(max-width:700px){.pg-snd,.snd-note{display:none!important}}
@media(prefers-reduced-motion:reduce){.hp .w{animation:none;opacity:.8;transform:none}.snd-note{transition:opacity .2s}.snd-note.blocked{animation:none}}