<style id="oui-faces">
.face-bg { fill:#fff; }
.face-ring { fill:none; stroke:#fff; stroke-width:5; }
.face-halo { fill:var(--pink); opacity:0; transition:opacity .5s; }
.face-tie { stroke:#fff; stroke-width:2.5; stroke-linecap:round; }
.face-pill { fill:#fff; filter:drop-shadow(0 4px 8px rgba(60,44,30,.12)); }
.face-txt { font:800 12.5px Inter, sans-serif; fill:var(--dark); letter-spacing:-.01em; }
.face-in { filter:drop-shadow(0 12px 22px rgba(60,44,30,.18)); transition:transform .6s cubic-bezier(.34,1.56,.64,1); }
.face.is-on .face-in { transform:scale(1.12); }
.face.is-on .face-halo { opacity:.55; animation:faceHalo 2.2s ease-out infinite; }
.face.is-on .face-ring { stroke:var(--teal); }
.face.is-on .face-pill { fill:var(--dark); }
.face.is-on .face-txt { fill:#fff; }
@keyframes faceHalo { 0% { transform:scale(1); opacity:.55; } 100% { transform:scale(1.35); opacity:0; } }
.js-anim .face-in { opacity:0; transform:scale(.3); animation:faceIn .9s cubic-bezier(.34,1.56,.64,1) forwards; animation-delay:calc(1.1s + var(--i) * .22s); }
@keyframes faceIn { to { opacity:1; transform:none; } }
.js-anim .face.is-on .face-in { animation:faceIn .9s cubic-bezier(.34,1.56,.64,1) forwards calc(1.1s + var(--i) * .22s); transform:scale(1.12); }
@media (max-width:760px) { .hero--c .hero-art.hero-threads { height:300px; width:190%; margin-left:-45%; } .face-txt { font-size:15px; } }
@media (prefers-reduced-motion: reduce) { .js-anim .face-in { opacity:1; transform:none; animation:none; } .face.is-on .face-halo { animation:none; } }
</style>
