/* Planning geniuses: think, get an idea, check the calendar, then reset. */
.wusel-mascot {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  transform-origin: 50% 80%;
  animation-play-state: paused;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  --wusel-hop: 12px;
  --wusel-cycle: 4.6s;
}
.wusel-mascot[data-motion="welcome"] { animation-name: wusel-greet; animation-duration: var(--wusel-cycle); }
.wusel-mascot[data-motion="plan"] { --wusel-cycle:5.4s; animation-name: wusel-think; animation-duration:var(--wusel-cycle); transform-origin:50% 90%; }
.wusel-mascot[data-motion="review"] { --wusel-cycle:4.8s; animation-name: wusel-check; animation-duration:var(--wusel-cycle); }
.wusel-mascot[data-motion="ready"] { --wusel-cycle:4.2s; animation-name: wusel-step; animation-duration:var(--wusel-cycle); }
.wusel-mascot[data-motion="mail"] { --wusel-cycle:6.2s; animation-name: wusel-breathe; animation-duration:var(--wusel-cycle); }
.wusel-mascot[data-motion="organize"] { --wusel-cycle:5.2s; animation-name: wusel-organize; animation-duration:var(--wusel-cycle); }
.wusel-mascot[data-wusel-gesture] { animation-name:wusel-hello; animation-duration:1.2s; animation-iteration-count:1; }
.wusel-mascot[data-wusel-gesture="aha"] { animation-name:wusel-eureka; }
.wusel-mascot[data-visible="true"] { animation-play-state: running; }
.owl-mascot{position:relative;isolation:isolate;aspect-ratio:1;height:auto}
.mascot-image.owl-mascot{height:auto;max-height:none;padding:0}
.owl-mascot .owl-base{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:contain}
.owl-mascot .owl-blink{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;opacity:0;pointer-events:none;animation:wusel-owl-blink 6.9s step-end infinite;animation-play-state:paused}
.owl-mascot[data-visible="true"] .owl-blink{animation-play-state:running}
.owl-pair .owl-blink-left{clip-path:ellipse(11.5% 7% at 27.2% 37.8%)}
.owl-pair .owl-blink-right{clip-path:ellipse(11.5% 7% at 74.8% 42.2%);animation-delay:-3.1s}
.owl-plan .owl-blink{clip-path:ellipse(20% 9% at 50% 31.5%);animation-delay:-2.2s}
.owl-review .owl-blink{clip-path:ellipse(22% 9.5% at 54% 30.1%);animation-delay:-4.6s}
.owl-mail .owl-blink{clip-path:ellipse(21% 9.5% at 50% 31%);animation-delay:-1.1s}
@keyframes wusel-owl-blink{0%,42%,45%,77%,80%,83%,86%,100%{opacity:0}43%,44%,78%,79%,84%,85%{opacity:1}}
:root[data-mascot-paused] .owl-blink,:root[data-mascot-background] .owl-blink,#auth:focus-within .owl-blink{animation-play-state:paused!important;opacity:0!important}
:root[data-mascot-paused] .wusel-mascot,
:root[data-mascot-background] .wusel-mascot,
#auth:focus-within .wusel-mascot { animation-play-state: paused; }
.motion-toggle {
  display: inline-block;
  width: auto;
  min-height: 36px;
  padding: 8px 12px;
  margin: 0 0 14px;
  border: 1px solid #6b626d;
  border-radius: 20px;
  background: transparent;
  box-shadow: none;
  color: #514a53;
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}
.motion-toggle:hover { background: #e9e0ff; box-shadow: none; transform: none; }
.motion-toggle:focus-visible { outline: 3px solid #6740c0; outline-offset: 4px; }
.motion-toggle[hidden] { display: none; }
@keyframes wusel-greet {
  0%, 22%, 76%, 100% { transform: translate(0,0) rotate(0) scale(1); }
  7% { transform: translate(-3px,-3px) rotate(-4deg); }
  14% { transform: translate(3px,-1px) rotate(3deg); }
  29% { transform: translateY(2px) scale(1.035,.965); }
  36% { transform: translate(2px,calc(-1 * var(--wusel-hop))) rotate(3deg) scale(.99,1.02); }
  43% { transform: translate(0,2px) rotate(-2deg) scale(1.025,.975); }
  51% { transform: translate(-3px,calc(-.6 * var(--wusel-hop))) rotate(-3deg); }
  60% { transform: translate(2px,1px) rotate(1.5deg); }
}
@keyframes wusel-think {
  0%, 70%, 100% { transform: rotate(0) translateY(0); }
  12%, 20% { transform: rotate(-4.5deg) translateY(-2px); }
  29% { transform: rotate(2deg) translateY(1px) scale(1.025,.98); }
  37% { transform: rotate(3deg) translateY(calc(-1 * var(--wusel-hop))); }
  46% { transform: rotate(-2deg) translateY(1px); }
  55% { transform: rotate(1deg) translateY(-3px); }
}
@keyframes wusel-check {
  0%, 16%, 76%, 100% { transform: translateY(0) rotate(0); }
  23% { transform: translateY(2px) rotate(3deg); }
  34% { transform: translateY(calc(-1 * var(--wusel-hop))) rotate(-2.5deg); }
  43% { transform: translateY(2px) rotate(2deg); }
  51% { transform: translateY(-5px) rotate(-1.5deg); }
  60% { transform: translateY(1px) rotate(1deg); }
}
@keyframes wusel-step {
  0%, 15%, 62%, 100% { transform: translate(0,0) rotate(0); }
  25% { transform: translate(-5px,calc(-1 * var(--wusel-hop))) rotate(-4deg); }
  34% { transform: translate(-1px,1px) rotate(1deg); }
  43% { transform: translate(5px,calc(-.7 * var(--wusel-hop))) rotate(4deg); }
  52% { transform: translate(1px,1px) rotate(-1deg); }
}
@keyframes wusel-breathe {
  0%, 20%, 75%, 100% { transform: translateY(0) rotate(0); }
  35% { transform: translateY(calc(-.6 * var(--wusel-hop))) rotate(-2deg); }
  48% { transform: translateY(0) rotate(1.2deg); }
  61% { transform: translateY(-2px) rotate(-.8deg); }
}
@keyframes wusel-organize {
  0%, 15%, 68%, 100% { transform: rotate(0) translateY(0); }
  26% { transform: rotate(-4deg) translateY(-3px); }
  38% { transform: rotate(3deg) translateY(-2px); }
  52% { transform: rotate(-1deg) translateY(calc(-1 * var(--wusel-hop))); }
}
@keyframes wusel-hello {
  0%, 100% { transform: translateY(0) rotate(0) scale(1); }
  18% { transform: translateY(calc(-1 * var(--wusel-hop))) rotate(-6deg) scale(1.025,.985); }
  40% { transform: translateY(-2px) rotate(5deg); }
  62% { transform: translateY(-5px) rotate(-3.5deg); }
  82% { transform: translateY(1px) rotate(1deg) scale(1.01,.99); }
}
@keyframes wusel-eureka {
  0%,100%{transform:translateY(0) rotate(0) scale(1)}
  18%{transform:translateY(2px) rotate(-5deg) scale(1.03,.97)}
  40%{transform:translateY(calc(-1.2 * var(--wusel-hop))) rotate(4deg) scale(.99,1.025)}
  63%{transform:translateY(2px) rotate(-2deg) scale(1.02,.98)}
  80%{transform:translateY(-3px) rotate(1.5deg)}
}
.wusel-effect{position:absolute;display:grid;place-items:center;pointer-events:none;color:#242127;opacity:0;z-index:2;animation-duration:var(--wusel-cycle);animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-play-state:paused}
.wusel-effect svg{display:block;width:74%;height:74%}
.wusel-idea{right:2%;top:4%;width:clamp(34px,16%,82px);aspect-ratio:1;border:2px solid #242127;border-radius:24% 24% 24% 5%;background:#f9df67;box-shadow:3px 4px 0 #242127;animation-name:wusel-insight}
.wusel-idea::after{content:'Aha!';position:absolute;right:-17%;top:-16%;padding:3px 6px;border-radius:20px;background:#fff9ee;border:1px solid #242127;font-size:clamp(8px,1.1vw,12px);font-weight:800;transform:rotate(8deg)}
.owl-pair .wusel-idea{right:43%;top:11%}
.wusel-plan-result{left:0;bottom:17%;width:clamp(30px,14%,70px);aspect-ratio:1;background:#fff9ee;border:2px solid #242127;border-radius:17%;box-shadow:3px 3px 0 #c5b5ff;animation-name:wusel-plan-done}
.owl-pair .wusel-plan-result{left:5%;bottom:13%}
.wusel-mascot[data-visible="true"] .wusel-effect{animation-play-state:running}
.wusel-mascot[data-wusel-gesture] .wusel-idea{animation-name:wusel-aha-light;animation-duration:1.2s;animation-iteration-count:1}
.wusel-mascot[data-wusel-gesture] .wusel-plan-result{animation-name:wusel-aha-check;animation-duration:1.2s;animation-iteration-count:1}
@keyframes wusel-insight{0%,24%,64%,100%{opacity:0;transform:translateY(5px) scale(.8) rotate(-10deg)}34%,50%{opacity:1;transform:translateY(-3px) scale(1) rotate(5deg)}}
@keyframes wusel-plan-done{0%,44%,88%,100%{opacity:0;transform:translateY(6px) rotate(-8deg) scale(.85)}54%,72%{opacity:1;transform:translateY(0) rotate(3deg) scale(1)}}
@keyframes wusel-aha-light{0%,100%{opacity:0;transform:scale(.8) rotate(-8deg)}24%,76%{opacity:1;transform:scale(1.05) rotate(5deg)}}
@keyframes wusel-aha-check{0%,28%,100%{opacity:0;transform:translateY(5px) scale(.85)}48%,84%{opacity:1;transform:translateY(0) scale(1)}}
.wusel-guide .wusel-idea{right:-1px;top:-4px;width:20px;border-width:1px;border-radius:5px;box-shadow:1px 1px 0 #242127}
.wusel-guide .wusel-idea::after,.wusel-guide .wusel-plan-result{display:none}
.wusel-guide .wusel-mascot{--wusel-hop:3px;--wusel-cycle:7s}
:root[data-mascot-paused] .wusel-effect,:root[data-mascot-background] .wusel-effect,#auth:focus-within .wusel-effect{animation-play-state:paused!important;opacity:0!important}
@media (prefers-reduced-motion: reduce) {
  .wusel-mascot { animation: none !important; transform: none !important; }
  .owl-blink { animation: none !important; opacity:0!important; }
  .wusel-effect { animation:none!important;opacity:0!important; }
  .motion-toggle { display: none; }
}

/* The framing never moves. Only the skinned head/wing/body vertices move. */
.wusel-mascot,.wusel-mascot[data-motion],.wusel-mascot[data-wusel-gesture]{animation:none!important;transform:none!important}
.owl-puppet{position:absolute;inset:0;display:block;width:100%;height:100%;pointer-events:none;z-index:0}
.owl-mascot[data-rig-ready="true"]>.owl-base,.owl-mascot[data-rig-ready="true"]>.owl-blink{visibility:hidden}