/* Services dragon: two wisps of smoke curl from its nostril and its eye closes in a blink now and then. */

/* Smoke: the site's nostril wisp, anchored by its lower right corner at the nostril so it drifts up and ahead of the face */
.nb-svc-smoke{position:absolute;right:calc(100% - var(--nx,45.8%));bottom:calc(100% - var(--ny,10%));width:17%;aspect-ratio:1230/1278;background:url(assets/beyond-nostril-smoke-optimized.webp) right bottom/contain no-repeat;filter:brightness(1.25) drop-shadow(0 0 4px rgba(255,250,235,.25));transform-origin:100% 100%;opacity:0;pointer-events:none;animation:nb-svc-wisp 8s ease-in-out infinite;animation-play-state:paused}
.nb-svc-smoke+.nb-svc-smoke{width:13%;animation-delay:-4s;animation-duration:9s}
.b-services-hoard[data-visible=true] .nb-svc-smoke,.sv-hoard[data-visible=true] .nb-svc-smoke{animation-play-state:running}
@keyframes nb-svc-wisp{0%{opacity:0;transform:translate(6px,8px) scale(.45)}25%{opacity:.95}70%{opacity:.6}100%{opacity:0;transform:translate(-12px,-18px) scale(1.05)}}

/* Blink: a patch of the cheek just below the eye slides up over it like a lid, with a fine lash line at its edge */
.nb-svc-lid{position:absolute;pointer-events:none;background-repeat:no-repeat;clip-path:inset(0 0 100% 0);-webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 55%,transparent);mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 55%,transparent)}
.nb-svc-lid i{position:absolute;left:18%;right:18%;top:0;height:1px;background:rgba(70,45,28,.75);border-radius:1px;opacity:0}
.nb-svc-lid.nb-blink{animation:nb-svc-lid 1.2s ease-in-out}
.nb-svc-lid.nb-blink i{animation:nb-svc-lash 1.2s ease-in-out}
@keyframes nb-svc-lid{0%,100%{clip-path:inset(0 0 100% 0)}42%,58%{clip-path:inset(0 0 12% 0)}}
@keyframes nb-svc-lash{0%,100%{top:0;opacity:0}42%,58%{top:88%;opacity:1}}

.paused .nb-svc-smoke,.paused .nb-svc-lid{display:none}
@media(prefers-reduced-motion:reduce){.nb-svc-smoke,.nb-svc-lid{display:none}}