/* Audio versions of v1 (v1a to v1d): voice, waveforms, earphones. Loaded after fx.css and the page's own styles. */

/* ---------- hero arch: no photo, a voice instead ---------- */
.arch{background:radial-gradient(120% 70% at 50% 62%,rgba(255,90,47,.28),transparent 62%),#0d0a09}
.arch::before{background:linear-gradient(180deg,rgba(5,5,5,.55) 0%,rgba(5,5,5,0) 38%,rgba(5,5,5,0) 62%,rgba(5,5,5,.7) 100%)}
.viz{position:absolute;left:12%;right:12%;top:36%;bottom:29%;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(8px,1.4vw,16px);pointer-events:none}
.viz>*{pointer-events:auto}
.bars{display:flex;align-items:center;justify-content:center;gap:3px;width:100%;height:clamp(54px,8vw,104px)}
.bars i{flex:1;max-width:7px;height:100%;border-radius:4px;background:linear-gradient(180deg,var(--amber),var(--ember));transform:scaleY(var(--h,.5));animation:eq 1.1s ease-in-out var(--d,0s) infinite alternate}
@keyframes eq{from{transform:scaleY(calc(var(--h,.5)*.28))}to{transform:scaleY(var(--h,.5))}}
.buds{width:clamp(50px,6.4vw,80px);flex:none;overflow:visible}

/* B: a breathing orb */
.orb{height:92%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 38% 34%,#ffd9a8,var(--amber) 22%,var(--ember) 58%,#7a1f08 100%);box-shadow:0 0 60px 10px rgba(255,90,47,.45),inset 0 -10px 30px rgba(0,0,0,.3);animation:breathe 4.2s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(.92)}50%{transform:scale(1.08)}}

/* C: flat until it is "talking", then the bars move */
.arch[data-hero=c] .bars i,.arch[data-hero=d] .bars i{animation:none;transform:scaleY(.1);transition:transform .5s}
.arch[data-hero=c].talk .bars i,.arch[data-hero=d].speaking .bars i{animation:eq 1.1s ease-in-out var(--d,0s) infinite alternate}

/* D: tap to hear it */
.arch-play{flex:none;width:clamp(54px,6vw,72px);aspect-ratio:1;border:0;border-radius:50%;background:var(--ember);color:#fff;cursor:pointer;display:grid;place-items:center;font:700 18px/1 var(--display);animation:ping 2.4s ease-out infinite}
.arch-play::before{content:"\25B6";padding-left:3px}
.arch-play[aria-pressed=true]{animation:none}
.arch-play[aria-pressed=true]::before{content:"\25A0";padding:0}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(255,90,47,.55)}80%,100%{box-shadow:0 0 0 22px rgba(255,90,47,0)}}

/* ---------- collage: voice notes ---------- */
.sw-bubble .sw-in{background:#17171a;border:1px solid #2a2a2e;border-radius:18px 18px 18px 4px;padding:12px 14px;box-shadow:0 18px 40px -22px rgba(0,0,0,.9)}
.nb-top{display:flex;align-items:center;gap:8px}
.nb-play{flex:none;width:22px;height:22px;border-radius:50%;background:var(--ember);position:relative}
.nb-play::before{content:"";position:absolute;left:9px;top:6px;border-left:8px solid #fff;border-block:5px solid transparent}
.nb-wave{flex:1;display:flex;align-items:center;gap:2px;height:22px}
.nb-wave i{flex:1;height:var(--h);border-radius:2px;background:var(--amber);opacity:.85}
.nb-len{font-size:10px;font-weight:600;color:var(--dim);font-variant-numeric:tabular-nums}
.sw-bubble q{display:block;margin-top:10px;font:italic 400 clamp(15px,1.4vw,19px)/1.1 var(--fx-serif);letter-spacing:-.02em;quotes:"\201C" "\201D"}
.sw-bubble figcaption{margin-top:8px}
.sw-line{width:calc(var(--sz,200px)*1.25)}
.sw-line .sw-in{padding:0}
.sw-line q{display:block;font:italic 400 clamp(22px,2.4vw,34px)/1.02 var(--fx-serif);letter-spacing:-.025em;quotes:none;color:var(--fx-fg)}
.sw-line figcaption{margin-top:10px}
@media (max-width:699px){.nb-len{display:none}.sw-bubble q{font-size:13px}.sw-line q{font-size:17px}}

/* ---------- phone screens ---------- */
.scr .art-ear{display:grid;place-items:center;width:100%;aspect-ratio:1;border-radius:18px;background:radial-gradient(circle at 50% 62%,#e9b48a,#a8522e 72%)}
.scr .art-ear svg{width:64%}
.scr .clip{margin-top:auto;display:flex;align-items:center;gap:8px;background:#2B231D;color:#F4EDE3;border-radius:14px;padding:10px 12px;font-size:10px;font-weight:600}
.scr .clip em{flex:none;font-style:normal;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#A8522E;color:#FFF8F0;font-size:11px}
.scr .clip .wave{flex:1;height:22px}
.scr .clip .wave b{background:#E9B48A}

/* ---------- footer: member card on a thin earphone cable ---------- */
.lanyard{--fx-strap:#f4f4f4;--fx-strap-w:3}
.idcard .idart{display:flex;align-items:center;justify-content:center;gap:2px;width:100%;aspect-ratio:1/1.05;border-radius:9px;padding:14%;background:radial-gradient(circle at 50% 70%,rgba(255,90,47,.55),transparent 70%),#0c0c0e;pointer-events:none}
.idcard .idart i{flex:1;height:var(--h);max-width:6px;border-radius:3px;background:linear-gradient(180deg,var(--amber),var(--ember))}

/* the o sends out sound rings */
.wordmark .sun{position:relative;animation:beat 2.4s ease-in-out infinite}
.wordmark .sun::before,.wordmark .sun::after{content:"";position:absolute;inset:0;border-radius:50%;border:.022em solid rgba(255,255,255,.85);animation:ring 2.4s ease-out infinite}
.wordmark .sun::after{animation-delay:1.2s}
@keyframes ring{from{transform:scale(1);opacity:.85}to{transform:scale(2.3);opacity:0}}
@keyframes beat{0%,100%{transform:scale(1)}8%{transform:scale(1.09)}}
/* the y whose tail becomes the wire */
.wordmark.yy{font-size:20.5vw}
.wordmark.wire{padding-bottom:.26em}
.wordmark .wy-wrap{display:inline-block;position:relative;width:.55em;height:0}
.wordmark .wy{position:absolute;left:0;bottom:-.48em;width:.55em;height:1em;overflow:visible}

@media (prefers-reduced-motion:reduce){
  .bars i,.orb,.arch-play,.wordmark .sun,.wordmark .sun::before,.wordmark .sun::after{animation:none!important}
  .wordmark .sun::before,.wordmark .sun::after{display:none}
}