.animation-hero{padding:24px var(--gutter) 30px}.flock-stage{--flock-bg:#0d1210;--doom:#e1724b;--bloom:#5cba7d;position:relative;height:clamp(360px,52vh,480px);border-radius:14px;overflow:hidden;background:var(--flock-bg);color:#e6ece8;touch-action:pan-y;isolation:isolate}.flock-stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:pan-y}.flock-veil{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 40% 34% at 50% 16%,rgba(13,18,16,.95) 0 45%,transparent 100%),radial-gradient(circle 96px at 50% max(52%,236px),rgba(13,18,16,.92) 0 70%,transparent 100%),linear-gradient(90deg,rgba(13,18,16,.8),transparent 26% 74%,rgba(13,18,16,.8));transition:opacity .4s}.flock-title{position:absolute;top:24px;left:10%;width:80%;text-align:center;pointer-events:none}.flock-title h1,.flock-title h2{font-family:"NoSpam Brand",Arial,sans-serif;font-size:clamp(28px,4.6vw,52px);font-weight:900;line-height:1.08;letter-spacing:-.045em;color:#fff;margin:0 0 13px}.flock-title p{font-size:clamp(.8125rem,1.3vw,1rem);line-height:1.5;color:#c9d3ce;margin:0 auto;max-width:800px;text-wrap:balance}.flock-side{position:absolute;top:52%;left:24px;max-width:38%;transform:translateY(-35%);pointer-events:none}.flock-side h2{font-family:"NoSpam Brand",Arial,sans-serif;font-weight:900;letter-spacing:-.045em;font-size:clamp(36px,5.5vw,64px);line-height:1.03;margin:9px 0 16px}.flock-kicker{font:500 .75rem/1.5 ui-monospace,monospace;text-transform:uppercase;letter-spacing:.13em}.flock-spam{color:var(--doom)}.flock-real{left:auto;right:24px;text-align:right;color:var(--bloom)}.flock-side p{font-size:.8125rem;line-height:1.65;color:#c9d3ce}.flock-side p span{display:block}.flock-ring{position:absolute;top:max(52%,236px);left:50%;transform:translateX(-50%);margin-top:-56px;text-align:center;pointer-events:none;width:112px}.ring-graphic{width:112px;height:112px;position:relative}.ring-graphic svg{width:112px;height:112px;transform:rotate(90deg);overflow:visible}.ring-graphic circle{fill:none;stroke-width:6}.ring-track{stroke:rgba(255,255,255,.1)}.ring-spam{stroke:var(--doom);stroke-linecap:round}.ring-real{stroke:var(--bloom);stroke-linecap:round}.ring-score{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:38px;letter-spacing:-.055em;font-weight:700}.ring-score span{font-size:18px;margin:6px 0 0 2px}.ring-label{display:block;font-size:.6875rem;white-space:nowrap;margin-top:12px;color:#c9d3ce}.flock-ring p{position:relative;left:50%;transform:translateX(-50%);width:max-content;font-size:.75rem;line-height:1.4;margin-top:10px}.ring-example{display:block;font:400 .625rem/1.5 ui-monospace,monospace;color:#a1afa7;margin-top:6px;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}.flock-period{position:absolute;top:14px;right:14px;display:flex;background:#ffffff0d;border:1px solid #ffffff26;border-radius:6px;overflow:hidden}.flock-period button,.flock-pause{font-size:.75rem;line-height:1.2;background:none;color:#c9d3ce;border:0;padding:9px 11px}.flock-period button[aria-pressed=true]{color:white;background:#ffffff1f}.flock-pause{position:absolute;bottom:14px;right:14px;background:#ffffff0d;border:1px solid #ffffff26;border-radius:6px;display:flex;align-items:center;gap:6px}.flock-pause:hover,.flock-period button:hover{background:#ffffff26}.flock-stage button:focus-visible{outline:2px solid #e6ece8;outline-offset:-3px}.flock-title,.flock-side,.flock-ring,.mood-stage-title{transition:opacity .35s}.flock-gather-note{position:absolute;bottom:25px;left:50%;transform:translateX(-50%);opacity:0;pointer-events:none;font:500 .8125rem/1.5 ui-monospace,monospace;white-space:nowrap;color:#c9d3ce}.is-gathering .flock-title,.is-gathering .flock-side,.is-gathering .flock-ring,.is-gathering .mood-stage-title,.is-gathering .flock-veil{opacity:0}.is-gathering .flock-gather-note{opacity:1}.flock-failed .flock-pause,.flock-failed canvas{display:none}.hero-action-bar{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-top:25px}.hero-action-bar .hero-note{margin-top:12px}.hero-extra-controls{display:flex;gap:25px;align-items:center}.animation-link{font-size:.875rem;color:var(--muted);text-decoration:underline;text-underline-offset:5px}.call-demo-disclosure{position:relative;border:0}.call-demo-disclosure>summary{padding:12px 24px 12px 0;font-size:.875rem}.call-demo-disclosure>summary::after{top:10px;right:0}.call-demo-disclosure>.hero-demo{position:absolute;right:0;top:100%;z-index:12;width:380px;box-shadow:0 8px 35px #0002;border:1px solid var(--line);padding:24px}.call-demo-disclosure .demo-caption{padding:0}.flock-feedback{font-size:.8125rem;color:var(--muted);line-height:1.5;min-height:20px;margin-top:12px}.animation-demo{padding:35px var(--gutter) 50px}.demo-page-heading>a{font-size:.8125rem;text-decoration:underline;text-underline-offset:4px}.demo-page-heading h1{font-size:clamp(2rem,4vw,3rem);margin:28px 0 14px}.demo-page-heading p{color:var(--muted);margin-bottom:28px}.flock-tabs{display:flex;gap:24px;border-bottom:1px solid var(--line);margin-bottom:24px}.flock-tabs button{background:none;border:0;border-bottom:2px solid transparent;padding:14px 0;font-weight:600;font-size:.9375rem;color:var(--muted)}.flock-tabs button[aria-selected=true]{color:var(--black);border-bottom-color:var(--red)}[data-flock-view][hidden]{display:none}.screen-actions{display:flex;gap:14px;margin-top:22px;flex-wrap:wrap}.button-outline{border:1px solid var(--black);background:white;color:var(--black)}.mood-stage-title{position:absolute;top:26px;left:26px;right:26px;pointer-events:none}.mood-stage-title h2{font-size:clamp(1.5rem,3vw,2.25rem);font-weight:700;line-height:1.15;margin-bottom:12px}.mood-stage-title p{font-size:.875rem;color:#c9d3ce}.mood-controls{display:grid;grid-template-columns:1fr auto;gap:14px;margin-top:25px;align-items:center}.mood-controls>label{font-size:1rem;font-weight:600}.mood-controls output{font:600 1.25rem ui-monospace,monospace}.mood-controls input[type=range]{width:100%;grid-column:1/-1;accent-color:var(--red);padding:0;border:0;cursor:ew-resize;height:32px;touch-action:pan-y}.mood-endpoints{display:flex;justify-content:space-between;grid-column:1/-1;font-size:.8125rem;color:var(--muted)}.mood-controls .button{justify-self:start;margin-top:12px;grid-column:1/-1}.demo-footnote{font-size:.8125rem;color:var(--muted);margin-top:30px}
@media(max-width:900px) and (min-width:701px){.flock-side h2{font-size:42px}.flock-side{max-width:35%}.flock-side p{font-size:.75rem}.flock-title{left:8%;width:84%}.flock-title p{max-width:540px}.flock-ring p{font-size:.6875rem}.hero-extra-controls{gap:15px}}
@media(max-width:700px){.animation-hero{padding:18px 16px 22px}.flock-stage{height:520px}.flock-title{top:65px;left:20px;right:20px;width:auto}.flock-title h1,.flock-title h2{font-size:clamp(28px,7.7vw,42px);line-height:1.1}.flock-title p{font-size:.9375rem;max-width:340px;line-height:1.5}.flock-side{top:auto;bottom:32px;left:20px;transform:none;max-width:46%}.flock-side h2{font-size:34px;margin:8px 0 0;line-height:1.06}.flock-real{left:auto;right:20px}.flock-side p{display:none}.flock-kicker{font-size:.6875rem}.flock-ring{top:max(52%,236px)}.flock-period{top:14px;right:14px}.flock-pause{top:14px;left:14px;bottom:auto;right:auto}.flock-ring p{font-size:.6875rem;width:260px}.flock-veil{background:radial-gradient(ellipse 70% 34% at 50% 23%,rgba(13,18,16,.95) 0 45%,transparent 100%),radial-gradient(circle 96px at 50% max(52%,236px),rgba(13,18,16,.92) 0 70%,transparent 100%),linear-gradient(90deg,rgba(13,18,16,.8),transparent 26% 74%,rgba(13,18,16,.8))}.hero-action-bar{display:block;margin-top:24px}.hero-extra-controls{margin-top:16px;justify-content:space-between;gap:14px}.call-demo-disclosure>.hero-demo{position:fixed;top:100px;right:16px;left:16px;width:auto;max-height:calc(100dvh - 120px);overflow:auto}.call-demo-disclosure[open]>summary{color:var(--red)}.animation-link{font-size:.8125rem}.animation-demo{padding:28px 16px 35px}.flock-tabs{gap:20px}.flock-tabs button{font-size:.875rem;text-align:left}.screen-actions .button{flex:1;min-width:145px;font-size:.8125rem;padding:15px}.mood-stage-title{top:72px;left:20px;right:20px}.flock-gather-note{bottom:28px;font-size:.75rem}.flock-feedback{margin-top:8px}}
@media(prefers-reduced-motion:reduce){.flock-title,.flock-side,.flock-ring,.mood-stage-title,.flock-veil{transition:none}}

@media(max-width:700px){.ring-label{margin-top:8px}.flock-ring p{margin-top:8px}.ring-example{margin-top:4px}}