/* The Dimeowl owl's blink. Needs tokens.css.
   Made by brand/tools/build-tokens.mjs from brand/tokens/tokens.json. Do not edit by hand. */

/* The owl blinks (brand-system.md, section 9): each eye is squashed to 13% of its height about its own centre
   while its pupil fades out, stays shut, then opens the same way: 70 + 40 + 70 ms.
   Works on any logo or owl head placed inline as <svg> (not as <img>): in those files each eye is <g data-owl="eye">
   with <g data-owl="pupil"> inside. Add the class dimeowl-blink to the svg or to an element around it, and remove it
   after --motion-owl-blink-duration. Once in --motion-owl-blink-interval at most. */

[data-owl="eye"], [data-owl="pupil"] { transform-box: fill-box; transform-origin: center; }

.dimeowl-blink [data-owl="eye"] { animation: dimeowl-blink-eye var(--motion-owl-blink-duration) var(--motion-owl-blink-easing) 1; }
.dimeowl-blink [data-owl="pupil"] { animation: dimeowl-blink-pupil var(--motion-owl-blink-duration) var(--motion-owl-blink-easing) 1; }

@keyframes dimeowl-blink-eye { 0%, 100% { transform: scaleY(1); } 38.889%, 61.111% { transform: scaleY(0.13); } }
@keyframes dimeowl-blink-pupil { 0%, 100% { opacity: 1; } 38.889%, 61.111% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .dimeowl-blink [data-owl="eye"], .dimeowl-blink [data-owl="pupil"] { animation: none; }
}