/* Frog animations, shared by the board page and the home page tile */
.frog { color: #14141a; }
.frog svg { width: 100%; height: 100%; overflow: visible; filter: url(#wobble-lite); }
.frog text { font-family: "Caveat", cursive; font-weight: 700; }

/* Big 12 frog: head sways, tongue wags, arm swings down and up */
.frog.mid .f-head { transform-origin: 110px 100px; animation: frog-head 2.4s ease-in-out infinite alternate; }
.frog.mid .f-tongue { transform-origin: 110px 98px; animation: frog-tongue .35s ease-in-out infinite alternate; }
.frog.mid .f-arm { transform-origin: 172px 125px; animation: frog-arm 1.6s ease-in-out infinite alternate; }
@keyframes frog-head { from { transform: rotate(-6deg); } to { transform: rotate(6deg); } }
@keyframes frog-tongue { from { transform: rotate(-16deg); } to { transform: rotate(16deg); } }
@keyframes frog-arm { from { transform: rotate(-4deg); } to { transform: rotate(38deg); } }
@media (prefers-reduced-motion: reduce) { .frog.mid .f-head, .frog.mid .f-tongue, .frog.mid .f-arm { animation: none; } }

/* ACC frog: hops, blinks */
.frog.c-ACC { transform-origin: 50% 100%; animation: frog-hop 1.8s ease-in-out infinite; }
.frog.c-ACC .f-eyes, .frog.c-BigTen .f-eyes { transform-origin: 110px 66px; animation: frog-blink 4s infinite; }
@keyframes frog-hop {
  0%, 100% { transform: translateY(0) scale(1.04, .95); }
  15% { transform: translateY(0) scale(1, 1); }
  40% { transform: translateY(-16px) scale(.98, 1.04); }
  65% { transform: translateY(0) scale(1, 1); }
  80% { transform: translateY(0) scale(1.04, .95); }
}
@keyframes frog-blink { 0%, 90%, 100% { transform: scaleY(1); } 94% { transform: scaleY(.08); } }
/* Big Ten frog: slow nod, twitching hair, blinks */
.frog.c-BigTen .f-head { animation: frog-nod 3.2s ease-in-out infinite; }
.frog.c-BigTen .f-hair { transform-origin: 110px 45px; animation: frog-hair .5s ease-in-out infinite alternate; }
@keyframes frog-nod { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
@keyframes frog-hair { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }
/* SEC frog: bobs to a beat, the bills in the briefcase pop up and down */
.frog.c-SEC .f-head { transform-origin: 110px 100px; animation: frog-beat .6s ease-in-out infinite alternate; }
.frog.c-SEC .f-bills { animation: frog-bills 1.1s ease-in-out infinite alternate; }
@keyframes frog-beat { from { transform: rotate(-3deg) translateY(0); } to { transform: rotate(3deg) translateY(3px); } }
@keyframes frog-bills { from { transform: translateY(0); } to { transform: translateY(-9px); } }
@media (prefers-reduced-motion: reduce) { .frog.c-ACC, .frog.c-ACC *, .frog.c-BigTen *, .frog.c-SEC * { animation: none !important; } }

/* Big Ten frog: clipboard lifts to his mouth and back down */
.frog.c-BigTen .f-clip { animation: frog-clip 3.2s ease-in-out infinite; }
@keyframes frog-clip {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-19px); }
}
/* Oklahoma frog: leans back, the cigar glows and puffs, smoke drifts up */
.frog.c-Oklahoma .f-head { transform-origin: 110px 100px; animation: ou-lean 3s ease-in-out infinite alternate; }
.frog.c-Oklahoma .f-cigar { transform-origin: 146px 92px; animation: ou-puff 3.6s ease-in-out infinite; }
.frog.c-Oklahoma .f-ember { animation: ou-ember .8s ease-in-out infinite alternate; }
.frog.c-Oklahoma .sm { opacity: 0; transform-box: fill-box; transform-origin: center; animation: ou-smoke 3.6s ease-out infinite; }
.frog.c-Oklahoma .sm.s2 { animation-delay: 1.2s; }
.frog.c-Oklahoma .sm.s3 { animation-delay: 2.4s; }
@keyframes ou-lean { from { transform: rotate(-3deg); } to { transform: rotate(4deg); } }
@keyframes ou-puff { 0%, 70%, 100% { transform: rotate(0deg); } 80%, 90% { transform: rotate(-7deg) translateY(-2px); } }
@keyframes ou-ember { from { fill: #ff7a1a; } to { fill: #ffd34d; } }
@keyframes ou-smoke { 0% { opacity: 0; transform: translate(0, 0) scale(.5); } 15% { opacity: .95; } 100% { opacity: 0; transform: translate(14px, -38px) scale(1.8); } }
@media (prefers-reduced-motion: reduce) { .frog.c-Oklahoma, .frog.c-Oklahoma * { animation: none !important; } .frog.c-Oklahoma .sm { opacity: 0; } }

.frog.c-Oklahoma .f-arm { transform-origin: 168px 128px; animation: ou-horns 1.2s ease-in-out infinite alternate; }
@keyframes ou-horns { from { transform: rotate(-3deg); } to { transform: rotate(5deg); } }

/* click the Oklahoma sticker and he breathes smoke through his nose */
.frog.c-Oklahoma .np { opacity: 0; transform-box: fill-box; transform-origin: center; }
.puffing .frog.c-Oklahoma .np { animation: nose-puff 1.9s ease-out both; }
.puffing .frog.c-Oklahoma .np.n2, .puffing .frog.c-Oklahoma .np.n4, .puffing .frog.c-Oklahoma .np.n6, .puffing .frog.c-Oklahoma .np.n8 { animation-name: nose-puff-r; }
.puffing .frog.c-Oklahoma .np.n3, .puffing .frog.c-Oklahoma .np.n4 { animation-delay: .3s; }
.puffing .frog.c-Oklahoma .np.n5, .puffing .frog.c-Oklahoma .np.n6 { animation-delay: .6s; }
.puffing .frog.c-Oklahoma .np.n7, .puffing .frog.c-Oklahoma .np.n8 { animation-delay: .9s; }
@keyframes nose-puff { 0% { opacity: 0; transform: translate(0, 0) scale(.9); } 12% { opacity: 1; } 100% { opacity: 0; transform: translate(-34px, 50px) scale(3.8); } }
@keyframes nose-puff-r { 0% { opacity: 0; transform: translate(0, 0) scale(.9); } 12% { opacity: 1; } 100% { opacity: 0; transform: translate(34px, 50px) scale(3.8); } }
.puffing .frog.c-Oklahoma .f-head { animation: ou-snort .6s ease-out; }
@keyframes ou-snort { 0% { transform: rotate(0); } 30% { transform: rotate(-6deg) translateY(2px); } 100% { transform: rotate(0); } }

.frog.c-Oklahoma .np { fill: #c9c3b0; stroke: #4d4838; stroke-width: 2.2; }