/* AM Radio title sequence: flat 2D, mid-century, about 7.5 seconds.
   0.2s radio fades up · 1.2s tuning through static · 2.6s camera pulls back, signal reaches Victoria and Toronto
   4.6s A and M slide together · 5.4s RADIO.vc · 6.7s curtain lifts to the site */
#intro{position:fixed;inset:0;z-index:100;background:#0a0a0a;overflow:hidden;animation:curtain .8s cubic-bezier(.7,0,.3,1) 6.7s forwards}
#intro.skip{animation:fadeout .35s ease forwards}
#intro svg.scene{position:absolute;inset:0;width:100%;height:100%}
#intro canvas{position:absolute;inset:0;width:100%;height:100%;opacity:0;mix-blend-mode:screen;animation:static 1.6s linear 1.1s both}
#intro .stage{transform-box:view-box;transform-origin:800px 470px;animation:pullback 1.7s cubic-bezier(.6,0,.2,1) 2.6s both,dim .8s ease 4.5s forwards}
#intro .radio{opacity:0;animation:rise .9s cubic-bezier(.2,.8,.2,1) .2s forwards}
#intro .needle{animation:sweep 1.4s cubic-bezier(.4,0,.2,1) 1.2s both}
#intro .knob{transform-box:fill-box;transform-origin:center;animation:turn 1.4s cubic-bezier(.4,0,.2,1) 1.2s both}
#intro .glow{opacity:0;animation:on .4s ease 2.5s forwards}
#intro .city{opacity:0;animation:cityin 1.2s ease 3s forwards}
#intro .ripple{transform-box:fill-box;transform-origin:center;opacity:0;animation:ripple 2s ease-out infinite}
#intro .ripple:nth-child(1){animation-delay:2.7s}
#intro .ripple:nth-child(2){animation-delay:3.2s}
#intro .ripple:nth-child(3){animation-delay:3.7s}
#intro .ripple:nth-child(4){animation-delay:4.2s}
#intro .beam{stroke-dasharray:900;stroke-dashoffset:900;animation:beam 1.3s ease-out 3.3s forwards}
#intro .titles{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:14px;pointer-events:none;text-align:center;padding:0 20px}
#intro .am{display:flex;align-items:baseline;font:900 clamp(42px,12.5vw,190px)/.85 var(--f-display);letter-spacing:-.05em;color:#f5f5f5}
#intro .am .a{display:inline-block;opacity:0;transform:translateX(-100vw);animation:slideA 1s cubic-bezier(.2,.9,.2,1) 4.6s forwards}
#intro .am .m{display:inline-block;opacity:0;transform:translateX(100vw);animation:slideM 1s cubic-bezier(.2,.9,.2,1) 4.6s forwards}
#intro .am .dot{color:#c4262b;display:inline-block;transform:scale(0);animation:pop .35s cubic-bezier(.3,1.6,.5,1) 5.4s forwards}
#intro .am .rest{display:inline-block;clip-path:inset(0 100% 0 0);animation:wipe .7s cubic-bezier(.6,0,.2,1) 5.5s forwards}
#intro .am small{font:800 .3em/1 var(--f-mono);color:#c4262b;letter-spacing:-.02em;margin-left:.04em}
#intro .tag{font:500 clamp(12px,2.2vw,16px)/1.4 var(--f-mono);letter-spacing:.22em;text-transform:uppercase;color:#a3a3a3;opacity:0;animation:on .6s ease 5.9s forwards}
#intro .who{position:absolute;left:0;right:0;top:12%;text-align:center;font:700 clamp(11px,1.8vw,13px)/1 var(--f-mono);letter-spacing:.3em;text-transform:uppercase;color:#6b7280;opacity:0;animation:flash 1.6s ease .5s forwards}
#intro button{position:absolute;right:max(16px,env(safe-area-inset-right,0px));bottom:max(16px,env(safe-area-inset-bottom,0px));font:700 12px/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:#a3a3a3;background:transparent;border:1px solid #333;border-radius:4px;padding:12px 14px;min-height:44px;cursor:pointer}
#intro button:hover{color:#fff;border-color:#777}
@keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes sweep{0%{transform:translateX(0)}55%{transform:translateX(96px)}78%{transform:translateX(44px)}100%{transform:translateX(62px)}}
@keyframes turn{0%{transform:rotate(-40deg)}55%{transform:rotate(200deg)}78%{transform:rotate(90deg)}100%{transform:rotate(130deg)}}
@keyframes static{0%{opacity:0}12%{opacity:.38}80%{opacity:.28}100%{opacity:0}}
@keyframes on{to{opacity:1}}
@keyframes pullback{from{transform:scale(var(--z0,1.75))}to{transform:scale(var(--z1,1))}}
@keyframes dim{to{opacity:.22}}
@keyframes cityin{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
@keyframes ripple{0%{opacity:.9;transform:scale(.15)}100%{opacity:0;transform:scale(1)}}
@keyframes beam{to{stroke-dashoffset:0}}
@keyframes slideA{0%{opacity:0;transform:translateX(-100vw)}1%{opacity:1}100%{opacity:1;transform:none}}
@keyframes slideM{0%{opacity:0;transform:translateX(100vw)}1%{opacity:1}100%{opacity:1;transform:none}}
@keyframes pop{to{transform:none}}
@keyframes wipe{to{clip-path:inset(0 0 0 0)}}
@keyframes flash{0%{opacity:0}25%{opacity:1}75%{opacity:1}100%{opacity:0}}
@keyframes curtain{to{transform:translateY(-100%)}}
@keyframes fadeout{to{opacity:0}}
/* Phones held upright: start closer to the whole radio, and pull back far enough to see both cities */
@media (max-aspect-ratio:4/5){#intro .stage{--z0:1.1;--z1:.3}}
@media (min-aspect-ratio:4/5) and (max-aspect-ratio:5/4){#intro .stage{--z0:1.5;--z1:.62}}