/* Lo the owl (js/mascot.js) and the extra motion. Every animation is switched off by the
   prefers-reduced-motion rule at the end of app.css. */
:root { --owl: #8a63d2; --owl-d: #6d47bd; --owl-belly: #f3e8ff; --owl-beak: #f59e0b; --owl-eye: #fff; --owl-pupil: #1e2a5a; }
#owl { position: fixed; right: max(10px, env(safe-area-inset-right)); bottom: max(8px, env(safe-area-inset-bottom)); width: clamp(60px, 12vw, 100px); pointer-events: none; z-index: 5; }
#owl svg { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 4px 4px rgba(30, 42, 90, .25)); }
main { padding-bottom: 96px; }

.o-body { fill: var(--owl); } .o-feet ellipse { fill: var(--owl-beak); }
.o-belly { fill: var(--owl-belly); } .o-belly-lines { fill: none; stroke: var(--owl); stroke-width: 3; stroke-linecap: round; opacity: .45; }
.o-wing path { fill: var(--owl-d); }
.o-eye { fill: var(--owl-eye); } .o-pupil { fill: var(--owl-pupil); } .o-shine { fill: #fff; }
.o-lid { fill: var(--owl); } .o-beak { fill: var(--owl-beak); }

.o-all, .o-wing, .o-lid, .o-beak { transform-box: fill-box; }
.o-all { transform-origin: 50% 100%; animation: bob 2.8s ease-in-out infinite; }
.o-lid { transform-origin: 50% 0; transform: scaleY(0); animation: blink 4.5s infinite; }
.o-wing-l { transform-origin: 100% 10%; } .o-wing-r { transform-origin: 0 10%; }
.o-beak { transform-origin: 50% 0; }

[data-mood="cheer"] .o-all { animation: jump .55s ease-out 2; }
[data-mood="cheer"] .o-wing-l { animation: flap-l .28s ease-in-out 5 alternate; }
[data-mood="cheer"] .o-wing-r { animation: flap-r .28s ease-in-out 5 alternate; }
[data-mood="oops"] .o-all { animation: nope .5s ease-in-out; }
[data-mood="wave"] .o-wing-r { animation: flap-r .35s ease-in-out 5 alternate; }
[data-talk] .o-beak { animation: talk .24s ease-in-out infinite alternate; }

@keyframes bob { 50% { transform: translateY(-3px); } }
@keyframes blink { 0%, 93%, 100% { transform: scaleY(0); } 96% { transform: scaleY(1); } }
@keyframes jump { 0%, 100% { transform: translateY(0); } 45% { transform: translateY(-24px) rotate(-4deg); } }
@keyframes nope { 20% { transform: rotate(-7deg); } 60% { transform: rotate(7deg); } }
@keyframes flap-l { to { transform: rotate(40deg); } }
@keyframes flap-r { to { transform: rotate(-40deg); } }
@keyframes talk { to { transform: scaleY(1.55); } }

/* star and dot burst */
.burst { position: fixed; z-index: 20; width: 0; height: 0; pointer-events: none; }
.burst svg { position: absolute; width: 22px; height: 22px; left: -11px; top: -11px; animation: fly .9s ease-out forwards; }
@keyframes fly { 0% { transform: scale(.4); opacity: 1; } 70% { opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) scale(1) rotate(var(--r)); opacity: 0; } }

/* movement without extra pictures: cards rise, pictures bounce in, options and tiles drop in one by one, memory cards flip */
.card { animation: rise .35s ease-out; }
.pic { animation: bounce-in .5s ease-out; }
.opt, .tile { animation: drop .4s ease-out backwards; }
.opt:nth-child(2), .tile:nth-child(2) { animation-delay: .08s; } .opt:nth-child(3), .tile:nth-child(3) { animation-delay: .16s; }
.tile:nth-child(4) { animation-delay: .24s; } .tile:nth-child(5) { animation-delay: .32s; } .tile:nth-child(6) { animation-delay: .4s; } .tile:nth-child(7) { animation-delay: .48s; }
.opt.shake, .tile.shake { animation: drop .4s ease-out backwards, shake .3s; } /* keep the entry animation in the list so it does not replay */
.opt.good { animation: drop .4s ease-out backwards, pop .5s ease-out; }
.mc.up { animation: flip .3s ease-out; }
@keyframes rise { from { transform: translateY(18px) scale(.97); opacity: 0; } }
@keyframes bounce-in { 0% { transform: scale(.6); } 60% { transform: scale(1.1); } }
@keyframes drop { from { transform: translateY(-14px) scale(.8); opacity: 0; } }
@keyframes flip { from { transform: rotateY(90deg); } }