/* Shared 30-second clip player */
.clip{margin:0 auto;max-width:900px}
.clip-stage{position:relative;aspect-ratio:16/9;max-width:100%;border-radius:14px;overflow:hidden;background:var(--clip-bg,#eef2f6);box-shadow:0 30px 60px -40px rgba(0,0,0,.4)}
.clip-stage svg{position:absolute;inset:0;width:100%;height:100%}
.clip .sc{opacity:0;transition:opacity .5s}
.clip .sc.on{opacity:1}
.clip-cap{position:absolute;left:0;right:0;bottom:0;padding:14px 18px calc(14px + 6px);background:linear-gradient(transparent,rgba(0,0,0,.55));color:#fff;font-size:clamp(.95rem,2.4vw,1.25rem);font-weight:600;text-shadow:0 1px 2px rgba(0,0,0,.4);line-height:1.3;min-height:3.2em;display:flex;align-items:flex-end}
.clip-cap span{opacity:0;transform:translateY(6px);transition:opacity .35s,transform .35s}
.clip-cap span.on{opacity:1;transform:none}
.clip-bar{position:absolute;left:0;right:0;bottom:0;height:5px;background:rgba(255,255,255,.3)}
.clip-bar i{display:block;height:100%;width:0;background:#fff}
.clip-ui{position:absolute;top:10px;right:10px;display:flex;gap:6px}
.clip-ui button{font:inherit;font-size:.78rem;font-weight:700;border:0;border-radius:999px;padding:6px 11px;background:rgba(255,255,255,.9);color:#1d1f24;cursor:pointer}
.clip-ui button:focus-visible{outline:2px solid #fff}
.clip-tag{font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;font-weight:700;opacity:.7;margin:0 0 8px}
.clip-cta{position:absolute;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.45)}
.clip-cta.on{display:flex}
.clip-cta a{background:#fff;color:#1d1f24;text-decoration:none;font-weight:800;padding:14px 22px;border-radius:10px;font-size:1.05rem}
/* generic drawing helpers */
.clip .bob{animation:bob 2.2s ease-in-out infinite}
.clip .bob2{animation:bob 2.6s ease-in-out .4s infinite}
.clip .spin{transform-origin:center;transform-box:fill-box;animation:spin 6s linear infinite}
.clip .pulse{transform-origin:center;transform-box:fill-box;animation:pulse 1.2s ease-in-out infinite}
.clip .pop{transform-origin:center;transform-box:fill-box;transform:scale(0);opacity:0}
.clip .sc.on .pop{animation:pop .45s cubic-bezier(.2,1.4,.4,1) forwards}
.clip .sc.on .d1{animation-delay:.3s}.clip .sc.on .d2{animation-delay:.9s}.clip .sc.on .d3{animation-delay:1.5s}.clip .sc.on .d4{animation-delay:2.1s}.clip .sc.on .d5{animation-delay:2.7s}
.clip .fly{transform-box:fill-box;transform-origin:center}
.clip .sc.on .fly{animation:fly 2.2s ease-in-out .4s forwards}
.clip .type{clip-path:inset(0 100% 0 0)}
.clip .sc.on .type{animation:type 1.6s steps(24) forwards}
.clip .sc.on .type.t2{animation-delay:1.2s}.clip .sc.on .type.t3{animation-delay:2.4s}.clip .sc.on .type.t4{animation-delay:3.6s}
.clip .stamp{transform-box:fill-box;transform-origin:center;transform:rotate(-14deg) scale(2);opacity:0}
.clip .sc.on .stamp{animation:stamp .4s cubic-bezier(.2,1.4,.4,1) 3.2s forwards}
.clip .blink{animation:blink 4s steps(1) infinite}
.clip .shake{transform-box:fill-box;transform-origin:center}
.clip .sc.on .shake{animation:shake .7s ease-in-out 2}
.clip .grow{transform-box:fill-box;transform-origin:bottom center;transform:scaleY(0)}
.clip .sc.on .grow{animation:grow .6s ease-out forwards}
.clip .sc.on .grow.g2{animation-delay:.5s}.clip .sc.on .grow.g3{animation-delay:1s}.clip .sc.on .grow.g4{animation-delay:1.5s}
.clip .draw{stroke-dasharray:600;stroke-dashoffset:600}
.clip .sc.on .draw{animation:draw 1.8s ease-out forwards}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
@keyframes pop{to{transform:scale(1);opacity:1}}
@keyframes fly{0%{transform:translate(0,0) scale(1)}60%{transform:translate(var(--fx,220px),var(--fy,-120px)) scale(.6)}100%{transform:translate(var(--fx,220px),var(--fy,-120px)) scale(.6);opacity:0}}
@keyframes type{to{clip-path:inset(0 0 0 0)}}
@keyframes stamp{to{transform:rotate(-14deg) scale(1);opacity:.95}}
@keyframes blink{0%,92%,100%{opacity:1}94%,98%{opacity:0}}
@keyframes shake{0%,100%{transform:rotate(0)}25%{transform:rotate(-4deg)}75%{transform:rotate(4deg)}}
@keyframes grow{to{transform:scaleY(1)}}
@keyframes draw{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){.clip *{animation:none !important;transition:none !important}.clip .pop,.clip .stamp,.clip .grow{transform:none;opacity:1}.clip .type{clip-path:none}}