/* One centered source. Independent outputs spread from behind it on scroll. */
.recording-ripple{--output-ink:#d49ae7;--fan-progress:1;--fan-shrink:1;--fan-bar:90px;min-height:0;padding:0 18px;position:relative}
.recording-ripple.is-fan-ready:not(.is-fan-static){height:calc(100svh + 115svh)}
.ripple-sticky{position:relative;top:auto;max-width:1200px;margin:auto;padding:0 12px 24px;overflow:visible}
.is-fan-ready:not(.is-fan-static) .ripple-sticky{position:sticky;top:var(--fan-bar)}
.ripple-board{display:block;position:relative;isolation:isolate;width:100%;height:650px;min-height:0;margin:0;transform:none;touch-action:pan-y}
.is-fan-ready:not(.is-fan-static) .ripple-board{height:calc(100svh - var(--fan-bar) - 62px);max-height:780px}
.ripple-rings{position:absolute;inset:0;height:auto;pointer-events:none;z-index:-1;overflow:hidden}
.ripple-rings i{width:min(26vw,280px);height:auto;aspect-ratio:1;transform:scale(calc(.85 + var(--fan-progress)*.3));opacity:.65}
.ripple-rings i:nth-child(2){width:min(44vw,480px);height:auto;transform:scale(calc(.55 + var(--fan-progress)*.5))}
.ripple-rings i:nth-child(3){width:min(65vw,730px);height:auto;transform:scale(calc(.35 + var(--fan-progress)*.65))}
.recording-label{position:absolute;left:50%;top:50%;margin:0;padding:0;max-width:100%;font-size:clamp(28px,3.2vw,42px);line-height:1.15;z-index:5;transform:translate(-50%,-50%) translateY(var(--label-y,-125px));text-align:center;pointer-events:none}
.interview-core{position:absolute;left:50%;top:50%;width:clamp(250px,32vw,380px);height:auto;aspect-ratio:16/10;margin:0;opacity:1;transform:translate(-50%,-50%) scale(calc(1 - var(--fan-shrink)*.24));border-radius:24px;z-index:4;background:#201924;pointer-events:none}
.interview-caption{text-align:center;font-size:calc(14px + var(--fan-shrink)*4px);line-height:1.4;padding:10px 7px}
.ripple-group{display:contents}
.ripple-node{--near:0;--fan-show:1;position:absolute;left:50%;top:50%;width:var(--nw,42px);height:var(--nh,42px);transform:translate(-50%,-50%) translate(var(--fan-x,0px),var(--fan-y,0px));opacity:var(--fan-show);z-index:2;pointer-events:none}
.ripple-face{display:block;width:100%;height:100%;opacity:calc(.72 + var(--near)*.28);transform:scale(calc(.9 + var(--near)*.45));transition:transform .16s ease-out,opacity .16s ease-out,filter .16s ease-out}
.ripple-word{width:max-content;height:26px}
.ripple-word .ripple-face{font-size:16px;line-height:26px;color:#e9d8f0;white-space:nowrap;opacity:1;transform:scale(calc(1 + var(--near)*.12))}
.ripple-symbol{background:var(--output-ink);mask:var(--symbol) center/contain no-repeat;-webkit-mask:var(--symbol) center/contain no-repeat;filter:brightness(calc(1 + var(--near)*.25))}
.symbol-spotify{--symbol:url('/assets/platforms/spotify.svg')}
.symbol-applepodcasts{--symbol:url('/assets/platforms/applepodcasts.svg')}
.symbol-youtube{--symbol:url('/assets/platforms/youtube.svg')}
.symbol-tiktok{--symbol:url('/assets/platforms/tiktok.svg')}
.symbol-instagram{--symbol:url('/assets/platforms/instagram.svg')}
.symbol-facebook{--symbol:url('/assets/platforms/facebook.svg')}
.symbol-linkedin{--symbol:url('/assets/platforms/linkedin.svg')}
.ripple-media{position:relative;border:1px solid #aa7abb80;border-radius:17px;overflow:hidden;box-shadow:0 14px 28px #0004}
.ripple-media .preview-play{width:27px;height:27px;font-size:10px}
.ripple-group .audio-wave{display:flex;gap:4px;align-items:center;justify-content:center}
.ripple-group .audio-wave i{background:var(--output-ink)}
.transcript-visual{--nw:64px;--nh:78px}
.transcript-visual svg{width:100%;height:100%;fill:none;stroke:var(--output-ink);stroke-width:2.5;stroke-linecap:round}
.wave-visual{--nw:110px;--nh:50px}
.apple-symbol{--nw:38px;--nh:38px}
.episode-preview{--nw:155px;--nh:100px}
.short-preview-a{--nw:78px;--nh:127px}
.short-preview-b{--nw:70px;--nh:116px}
.tiktok-symbol{--nw:34px;--nh:38px}
.instagram-symbol{--nw:34px;--nh:34px}
.facebook-symbol{--nw:32px;--nh:32px}
.carousel-symbol{--nw:49px;--nh:40px}
.carousel-symbol svg{display:block;width:100%;height:100%;fill:none;stroke:var(--output-ink);stroke-width:2.5;stroke-linecap:round}
.carousel-preview-a{--nw:112px;--nh:140px}
.carousel-preview-b{--nw:105px;--nh:132px}
.carousel-slide{position:relative;border-radius:16px;overflow:hidden;border:1px solid #f7ddff77;background:#241d2c;box-shadow:0 14px 26px #0004}
.carousel-slide img{display:block;width:100%;height:100%;object-fit:cover}
.carousel-preview-a .carousel-slide img{object-position:45% 35%}
.carousel-preview-b .carousel-slide img{object-position:72% 50%}
.carousel-slide span{position:absolute;inset:auto 0 0;padding:8px 10px;background:#261630e6;color:#fff5ff;font:500 16px/1.05 Raleway,sans-serif;letter-spacing:-.02em}
.post-visual{--nw:126px;--nh:85px}
.post-visual .post-preview{background:#241a2c;border:1px solid #9673a355;border-radius:14px;padding:12px;min-height:0}
.post-preview>span{font-size:10px}
.linkedin-symbol{--nw:34px;--nh:34px}
.ripple-caption{font-size:15px;line-height:1.5;text-align:center;margin:12px auto 0;max-width:none;opacity:calc(.2 + var(--fan-progress)*.8)}
/* Portrait is its own constellation, not a stacked list or a miniature desktop. */
@media(max-width:700px){
 .recording-ripple{padding-inline:8px}
 .ripple-sticky{padding:0 6px 20px;max-width:none}
 .ripple-board{height:740px}
 .is-fan-ready:not(.is-fan-static) .ripple-board{min-height:580px}
 .interview-core{width:min(270px,74%);border-radius:20px}
 .recording-label{font-size:29px}
 .interview-caption{font-size:calc(14px + var(--fan-shrink)*4px);padding:8px 3px}
 .ripple-rings i{width:210px}.ripple-rings i:nth-child(2){width:320px}.ripple-rings i:nth-child(3){width:440px}
 .ripple-node{--nw:30px;--nh:30px}
 .ripple-word .ripple-face{font-size:14px}
 .transcript-visual{--nw:44px;--nh:55px}
 .wave-visual{--nw:76px;--nh:38px}
 .episode-preview{--nw:108px;--nh:72px}
 .short-preview-a{--nw:53px;--nh:86px}
 .short-preview-b{--nw:46px;--nh:76px}
 .post-visual{--nw:100px;--nh:64px}
 .carousel-symbol{--nw:34px;--nh:28px}
 .carousel-preview-a{--nw:64px;--nh:86px}
 .carousel-preview-b{--nw:64px;--nh:82px}
 .carousel-slide{border-radius:11px}
 .carousel-slide span{font-size:12px;padding:5px 6px}
 .post-visual .post-preview{padding:8px}
 .post-preview>span{font-size:8px;margin-bottom:8px}
 .post-preview>img{width:22px;height:22px}
 .post-preview i{height:2px;margin-top:3px}
 .ripple-caption{font-size:14px;max-width:none;margin-top:8px}
 .ripple-media{border-radius:12px}
 .ripple-media .preview-play{width:22px;height:22px;font-size:8px}
}
@media(hover:none),(pointer:coarse){.ripple-face{opacity:calc(.86 + var(--near)*.14);transform:scale(calc(.94 + var(--near)*.28))}.ripple-word .ripple-face{opacity:1;transform:none}}
/* No long scroll runway when movement is disabled or the viewport is too short. */
.recording-ripple.is-fan-static{height:auto;min-height:0;--fan-progress:1!important;--fan-shrink:1!important}
.is-fan-static .ripple-sticky{position:relative;top:auto}
.is-fan-static .ripple-face{opacity:1;transform:none;filter:none;transition:none}
@media(prefers-reduced-motion:reduce){.ripple-rings i{transform:none}.ripple-face{opacity:1;transform:none!important;filter:none;transition:none}.ripple-caption{opacity:1}}