/* Preacher phones on the timeline: one iPhone per preacher (from data.json).
   Everything inside a phone is sized in em from the phone's width, so a phone
   can grow or shrink with the screen and stay in proportion.
   Each slides in as you reach it; near the moving dot, it rings:
   shakes, lights up and the call button pulses. */
#phone-sound-enable{margin-top:20px;min-height:44px}
#phone-sound-enable[hidden]{display:none}
.qlist--phones{--pw:176px;--ph:calc(var(--pw) * 2.05);gap:clamp(36px,4.5vh,56px)}
.q--phone .q__twig{top:calc(var(--ph) / 2)}
.q--phone .q__lamp{top:calc(var(--ph) / 2 - 4px)}
/* Stagger the two columns while keeping twice the row gap between phones on each side. */
@media (min-width:761px){.qlist--phones .q--phone+.q--phone{margin-top:calc(var(--ph) * -0.5)}}
@media (min-width:900px){
  .qlist--phones{padding-block:80px}
  .qlist--phones+.q-end{padding-block:44px 32px}
}
.q--phone:nth-child(odd) .phone{margin-inline-start:auto}

.phone{position:relative;isolation:isolate;width:var(--pw);height:var(--ph);padding:.7em;border-radius:3.8em;font-size:calc(var(--pw) / 17.8);
  background:linear-gradient(150deg,#4a545a 0%,#1d2326 32%,#14181a 60%,#3a4348 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),inset 0 0 0 3px #0b0e0f,0 34px 70px -30px rgba(0,0,0,.85),0 0 0 1px rgba(0,0,0,.4);
  transition:opacity .9s var(--out),transform .9s var(--out),box-shadow .6s var(--out);transition-delay:var(--d,0s)}
.phone__glow{position:absolute;inset:-45% -70%;z-index:-1;pointer-events:none;background:radial-gradient(ellipse,rgba(122,166,179,.18),rgba(255,210,160,.09) 32%,rgba(255,210,160,.025) 50%,transparent 70%);opacity:0;transition:opacity .6s var(--out)}
/* side buttons */
.phone::before,.phone::after{content:"";position:absolute;width:3px;border-radius:2px;background:linear-gradient(#5b666b,#2b3236)}
.phone::before{left:-3px;top:22%;height:13%;box-shadow:0 calc(var(--ph) * .16) 0 0 #3a4347}
.phone::after{right:-3px;top:28%;height:18%}
.q--phone:nth-child(odd){--tilt:-2deg}
.q--phone:nth-child(even){--tilt:2deg}
.js .q--phone .phone{opacity:0;transform:translate3d(0,46px,0) scale(.94) rotate(var(--tilt,0deg))}
.js .q--phone.is-seen .phone{opacity:1;transform:none}
.q--phone.is-seen .phone:hover{transform:translate3d(0,-6px,0)}

.phone__screen>*{flex:none}
.phone__screen{position:relative;display:flex;flex-direction:column;align-items:center;height:100%;padding:3.4em 1.2em 1.4em;border-radius:3.1em;overflow:hidden;text-align:center;
  background:radial-gradient(140% 60% at 50% -5%,#33464d 0%,#182024 55%,#0e1214 100%);
  filter:saturate(.45) brightness(.62);transition:filter .8s var(--out)}
.phone__screen::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:linear-gradient(125deg,rgba(255,255,255,.09),rgba(255,255,255,0) 38%)}
.phone__island{position:absolute;top:.9em;left:50%;width:5.8em;height:1.7em;margin-left:-2.9em;border-radius:1.2em;background:#050607;box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
.phone__island::after{content:"";position:absolute;right:.9em;top:.5em;width:.7em;height:.7em;border-radius:50%;background:radial-gradient(circle at 35% 35%,#2d4a5a,#090c0d 70%)}
.phone__status{position:absolute;top:1em;inset-inline:1.6em;display:flex;justify-content:space-between;align-items:center;margin:0;font:600 1em/1 var(--f-latin);color:rgba(243,244,244,.8)}
.phone__bars{display:flex;align-items:flex-end;gap:.15em}
.phone__bars i{display:block;width:.25em;border-radius:1px;background:currentColor}
.phone__bars i:nth-child(1){height:.3em}
.phone__bars i:nth-child(2){height:.5em}
.phone__bars i:nth-child(3){height:.7em}
.phone__bars i:nth-child(4){height:.9em}
.phone__lang{margin:.6em 0 0;padding:.3em 1.1em;border-radius:999px;font-size:1.15em;line-height:1.5;color:var(--warm);background:rgba(122,166,179,.14);border:1px solid rgba(122,166,179,.25);white-space:nowrap}

/* a live voice line under the language: bars rise and fall like someone speaking */
.phone__voice{display:flex;align-items:center;justify-content:center;gap:.28em;height:2.2em;margin:.7em 0 0}
.phone__voice i{display:block;width:.3em;height:55%;border-radius:.3em;background:linear-gradient(var(--warm),var(--stone));opacity:.75;
  transform:scaleY(.25);transform-origin:50% 50%;animation:voice 1.1s ease-in-out infinite;animation-delay:calc(var(--v) * -0.13s);animation-play-state:paused}
.phone__voice i:nth-child(1){--v:1}.phone__voice i:nth-child(2){--v:4}.phone__voice i:nth-child(3){--v:2}.phone__voice i:nth-child(4){--v:6}
.phone__voice i:nth-child(5){--v:3}.phone__voice i:nth-child(6){--v:7}.phone__voice i:nth-child(7){--v:5}.phone__voice i:nth-child(8){--v:2}
.phone__voice i:nth-child(9){--v:6}.phone__voice i:nth-child(10){--v:1}.phone__voice i:nth-child(11){--v:4}
@keyframes voice{0%,100%{transform:scaleY(.22)}35%{transform:scaleY(1)}55%{transform:scaleY(.45)}75%{transform:scaleY(.8)}}

.phone__avatar{position:relative;display:grid;place-items:center;width:5em;height:5em;margin:1em 0 1em;border-radius:50%;
  background:linear-gradient(140deg,var(--warm),#d9a46f 55%,var(--stone));box-shadow:0 .8em 2.4em -.8em rgba(255,210,160,.5)}
.phone__avatar span{font:700 2.2em/1 var(--f-display);color:var(--char);transform:translateY(.07em)}
.phone__title{margin:0;font-size:1.1em;line-height:1.4;color:var(--muted)}
.phone__name{margin:.15em 0 0;font:700 1.8em/1.3 var(--f-display);color:var(--white);text-wrap:balance}
.phone__num{margin:.45em 0 0;font:500 1.35em/1.3 var(--f-latin);letter-spacing:.06em;color:var(--muted)}
.phone__tag{margin:.55em 0 0;font-size:1.1em;color:var(--dim)}
.phone__actions{display:flex;justify-content:center;gap:2.2em;margin-top:auto;padding-bottom:1.2em}
.phone__btn{display:flex;flex-direction:column;align-items:center;gap:.5em;color:var(--muted);font-size:1.05em;line-height:1.2}
.phone__ic{position:relative;display:grid;place-items:center;width:4.6em;height:4.6em;border-radius:50%;color:#fff;transition:transform .35s var(--out),box-shadow .35s var(--out),background-color .3s}
.phone__ic svg{width:2em;height:2em}
.phone__btn--call .phone__ic{background:#30c65a;box-shadow:0 .8em 2em -.8em rgba(48,198,90,.8)}
.phone__btn--wa .phone__ic{background:rgba(243,244,244,.12);border:1px solid rgba(243,244,244,.16)}
.phone__btn:hover .phone__ic{transform:scale(1.08)}
.phone__btn--call:hover .phone__ic{background:#3bd96a}
.phone__btn:active .phone__ic{transform:scale(.94)}
.phone__btn:focus-visible{outline:none}
.phone__btn:focus-visible .phone__ic{outline:2px solid var(--white);outline-offset:3px}
.phone__home{position:absolute;bottom:.6em;left:50%;width:6.2em;height:.4em;margin-left:-3.1em;border-radius:.3em;background:rgba(243,244,244,.55)}
/* vibration marks beside the phone */
.phone__buzz{position:absolute;top:44%;width:1.4em;height:3.4em;border:2px solid transparent;border-radius:50%;opacity:0;pointer-events:none}
.phone__buzz--a{left:-2.2em;border-left-color:rgba(255,226,190,.75)}
.phone__buzz--b{right:-2.2em;border-right-color:rgba(255,226,190,.75)}

/* Only phones near the viewport centre ring and light their surroundings. */
.q--phone.is-active .phone__screen{filter:none}
.q--phone.is-active .phone{box-shadow:inset 0 0 0 1px rgba(255,226,190,.65),inset 0 0 0 3px #0b0e0f,0 0 0 1px rgba(255,226,190,.45),0 34px 70px -30px rgba(0,0,0,.85)}
.q--phone.is-active .phone__glow{opacity:1}
.q--phone.is-active .q__lamp{transform:none;opacity:1;box-shadow:0 0 24px 8px rgba(255,210,160,.7)}
.js .q--phone.is-seen.is-active .phone{animation:ring 1s var(--out) both}
.q--phone.is-active .phone__buzz{animation:buzz 1s ease-out both}
.q--phone.is-active .phone__voice i{opacity:1;animation-duration:.8s;animation-play-state:running}
.q--phone.is-active .phone__btn--call .phone__ic::after{content:"";position:absolute;inset:0;border-radius:50%;animation:callPulse 1.6s ease-out infinite}
@keyframes ring{
  0%{transform:none}
  10%{transform:translate3d(-4px,0,0) rotate(-4deg)}
  20%{transform:translate3d(4px,0,0) rotate(4deg)}
  30%{transform:translate3d(-4px,0,0) rotate(-3deg)}
  40%{transform:translate3d(3px,0,0) rotate(3deg)}
  50%{transform:translate3d(-2px,0,0) rotate(-2deg)}
  60%{transform:translate3d(2px,0,0) rotate(1deg)}
  70%,100%{transform:none}}
@keyframes buzz{0%,100%{opacity:0;transform:scale(.8)}15%,55%{opacity:1;transform:scale(1)}}
@keyframes callPulse{0%{box-shadow:0 0 0 0 rgba(48,198,90,.6)}100%{box-shadow:0 0 0 1.6em rgba(48,198,90,0)}}

/* phones: one column beside the line, as wide as the screen allows (up to 270px) */
@media (max-width:760px){
  .qlist--phones{--pw:min(270px,calc(100vw - 54px - 34px));gap:64px}
  .q--phone .phone,.q--phone:nth-child(odd) .phone{margin-inline-start:0}
  .q--phone:nth-child(odd) .q__lamp,.q--phone:nth-child(even) .q__lamp{top:calc(var(--ph) / 2 - 3px)}
}
@media (prefers-reduced-motion:reduce){
  .js .q--phone .phone{opacity:1;transform:none}
  .js .q--phone.is-seen.is-active .phone,.q--phone.is-active .phone__buzz,.q--phone.is-active .phone__btn--call .phone__ic::after,.phone__voice i{animation:none}
  .phone__voice i{transform:scaleY(.5)}
}