/* Felix (design/proposals/2026-10-23-characters-rome/felix-v6.html) with the extra states of this proposal */
.nf .m-talk,
.nf .m-happy,
.nf .m-puzzled,
.nf .wink,
.nf .shut,
.nf .arm-up,
.nf .phone-in {
  display: none;
}
.nf[data-s='talk'] .m-idle,
.nf[data-s='happy'] .m-idle,
.nf[data-s='puzzled'] .m-idle,
.nf[data-s='happy'] .eye-l,
.nf[data-s='happy'] .eye-r,
.nf[data-s='talk'] .paw-rest,
.nf[data-s='happy'] .paw-rest,
.nf[data-s='phone'] .paw-rest,
.nf[data-s='sleep'] .eye-l,
.nf[data-s='sleep'] .eye-r {
  display: none;
}
.nf[data-s='talk'] .m-talk,
.nf[data-s='happy'] .m-happy,
.nf[data-s='puzzled'] .m-puzzled,
.nf[data-s='happy'] .wink,
.nf[data-s='sleep'] .shut,
.nf[data-s='talk'] .arm-up,
.nf[data-s='happy'] .arm-up,
.nf[data-s='phone'] .arm-up,
.nf[data-s='phone'] .phone-in,
.nf.hold .phone-in {
  display: inline;
}
.nf .breathe {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: nbr 3.6s ease-in-out infinite;
}
.nf[data-s='sleep'] .breathe {
  animation-duration: 5.5s;
}
@keyframes nbr {
  50% {
    transform: scale(1.015, 1.03);
  }
}
.nf .blink {
  transform-box: fill-box;
  transform-origin: center;
  animation: nbl 6s infinite;
}
@keyframes nbl {
  0%,
  80%,
  100% {
    transform: scaleY(1);
  }
  85%,
  91% {
    transform: scaleY(0.08);
  }
}
.nf .m-talk {
  transform-box: fill-box;
  transform-origin: 50% 0;
  animation: ntk 0.26s ease-in-out infinite alternate;
}
@keyframes ntk {
  from {
    transform: scaleY(0.45);
  }
  to {
    transform: scaleY(1);
  }
}
.nf .nhead,
.nf .ear-r,
.nf .brow-r,
.nf .brow-l,
.nf .arm-up,
.nf .wave,
.nf .pen {
  transform-box: view-box;
}
.nf .nhead,
.nf .ear-r,
.nf .brow-r,
.nf .brow-l,
.nf .arm-up {
  transition: transform 0.45s ease;
}
.nf .nhead {
  transform-origin: 110px 132px;
}
.nf[data-s='listen'] .nhead,
.nf[data-s='puzzled'] .nhead {
  transform: rotate(-7deg);
}
.nf[data-s='happy'] .nhead {
  transform: rotate(4deg);
}
.nf[data-s='sleep'] .nhead {
  transform: rotate(9deg) translateY(3px);
}
.nf[data-s='look'] .nhead {
  transform: rotate(5deg);
}
.nf.down .eye-l,
.nf.down .eye-r {
  transform: translateY(4px);
}
.nf .ear-r {
  transform-origin: 136px 58px;
}
.nf[data-s='listen'] .ear-r {
  transform: rotate(12deg);
}
.nf[data-s='puzzled'] .ear-r {
  transform: rotate(26deg);
}
.nf .ear-l {
  transform-box: view-box;
  transform-origin: 84px 58px;
  animation: nfl 7s infinite;
}
.nf.flick .ear-l {
  animation: nfl2 0.5s 2;
}
@keyframes nfl {
  0%,
  88%,
  100% {
    transform: rotate(0);
  }
  91% {
    transform: rotate(-10deg);
  }
  94% {
    transform: rotate(2deg);
  }
}
@keyframes nfl2 {
  50% {
    transform: rotate(-14deg);
  }
}
.nf[data-s='listen'] .brow-r,
.nf[data-s='puzzled'] .brow-r {
  transform: translateY(-5px);
}
.nf[data-s='puzzled'] .brow-l {
  transform: translateY(3px) rotate(6deg);
  transform-origin: 88px 64px;
}
.nf .arm-up,
.nf .wave {
  transform-origin: 146px 142px;
}
.nf[data-s='happy'] .arm-up {
  transform: rotate(-6deg);
}
.nf[data-s='phone'] .arm-up,
.nf.hold .arm-up {
  transform: rotate(-14deg);
}
.nf[data-s='talk'] .wave,
.nf[data-s='happy'] .wave {
  animation: nwv 0.9s ease-in-out infinite alternate;
}
.nf[data-s='phone'] .wave {
  animation: raise 0.6s ease-out;
}
.nf.hold .wave {
  animation: none;
}
@keyframes nwv {
  from {
    transform: rotate(-5deg);
  }
  to {
    transform: rotate(6deg);
  }
}
@keyframes raise {
  from {
    transform: translate(-16px, 44px) rotate(28deg);
    opacity: 0;
  }
}
.nf[data-s='write'] .pen {
  animation: write 2.8s linear infinite;
}
@keyframes write {
  0% {
    transform: translate(0px, 0px);
  }
  10% {
    transform: translate(1px, -1.25px);
  }
  20% {
    transform: translate(2px, 0px);
  }
  30% {
    transform: translate(3px, -1.25px);
  }
  40% {
    transform: translate(4px, 0px);
  }
  50% {
    transform: translate(5px, -1.25px);
  }
  60% {
    transform: translate(6px, 0px);
  }
  70% {
    transform: translate(7px, -1.25px);
  }
  80% {
    transform: translate(8px, 0px);
  }
  84% {
    transform: translate(8px, -3px);
  }
  92% {
    transform: translate(0, -3px);
  }
  97% {
    transform: translate(0, -3px);
  }
  100% {
    transform: translate(0, 0);
  }
}
.nf[data-s='write'] .fa {
  animation: fa 2.8s linear infinite;
}
@keyframes fa {
  0%,
  100% {
    d: path('M80 126Q66 150 78 164Q86 168 100 168');
  }
  80% {
    d: path('M80 126Q66 150 78 164Q86 168 108 168');
  }
  84% {
    d: path('M80 126Q66 150 78 164Q86 168 108 165');
  }
  92%,
  97% {
    d: path('M80 126Q66 150 78 164Q86 168 100 165');
  }
}
.nf .ink {
  stroke-dasharray: 20;
  stroke-dashoffset: 0;
}
.nf[data-s='write'] .ink {
  animation: inkd 2.8s linear infinite;
}
@keyframes inkd {
  0% {
    stroke-dashoffset: 20;
    opacity: 1;
  }
  80%,
  96% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
  98.5% {
    stroke-dashoffset: 0;
    opacity: 0;
  }
  100% {
    stroke-dashoffset: 20;
    opacity: 0;
  }
}
.nf .tail {
  transform-box: view-box;
  transform-origin: 152px 184px;
  animation: ntl 3.2s ease-in-out infinite alternate;
}
.nf[data-s='sleep'] .tail {
  animation-duration: 6s;
}
@keyframes ntl {
  from {
    transform: rotate(-2deg);
  }
  to {
    transform: rotate(2.5deg);
  }
}
.nf[data-s='happy'] .bob {
  animation: nhop 0.5s ease-in-out infinite alternate;
}
.nf.hold[data-s='happy'] .bob {
  animation: nod 0.8s ease-in-out 1;
}
@keyframes nhop {
  to {
    transform: translateY(-6px);
  }
}
@keyframes nod {
  40% {
    transform: translateY(-5px);
  }
}
.nf .page {
  transform-box: fill-box;
  transform-origin: 0 50%;
  animation: page 9s ease-in-out infinite;
}
@keyframes page {
  0%,
  86%,
  100% {
    transform: scaleX(1);
  }
  92% {
    transform: scaleX(-1);
  }
  93% {
    transform: scaleX(1);
    opacity: 0;
  }
  96% {
    opacity: 1;
  }
}
/* scene props */
.pop {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transform: scale(0.3);
  opacity: 0;
  transition:
    transform 0.45s cubic-bezier(0.3, 1.6, 0.5, 1),
    opacity 0.25s;
}
.pop.on {
  transform: scale(1);
  opacity: 1;
}
.fadeall {
  transition: opacity 0.6s;
}
.fadeall.off {
  opacity: 0;
}
.hand {
  transform-box: view-box;
  transition: transform 0.35s cubic-bezier(0.3, 1.8, 0.5, 1);
}
.steam path {
  animation: steam 2.6s ease-in-out infinite;
  opacity: 0;
}
.steam path:nth-child(2) {
  animation-delay: 1.3s;
}
@keyframes steam {
  0% {
    opacity: 0;
    transform: translateY(4px);
  }
  40% {
    opacity: 0.85;
  }
  100% {
    opacity: 0;
    transform: translateY(-10px);
  }
}
.tw {
  animation: tw 1.8s ease-in-out infinite alternate;
}
.tw2 {
  animation: tw 2.4s 0.7s ease-in-out infinite alternate;
}
@keyframes tw {
  from {
    opacity: 0.25;
  }
  to {
    opacity: 1;
  }
}
.cloud {
  animation: cl 18s linear infinite;
}
@keyframes cl {
  from {
    transform: translateX(-90px);
  }
  to {
    transform: translateX(400px);
  }
}
.bird {
  animation: bird 11s linear infinite;
}
@keyframes bird {
  from {
    transform: translate(380px, 30px);
  }
  to {
    transform: translate(-40px, 6px);
  }
}
.rays {
  transform-box: fill-box;
  transform-origin: center;
  animation: spin 24s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.zz text {
  animation: zz 4.2s linear infinite;
  opacity: 0;
}
.zz text:nth-child(2) {
  animation-delay: 1.4s;
}
.zz text:nth-child(3) {
  animation-delay: 2.8s;
}
@keyframes zz {
  0% {
    opacity: 0;
    transform: translate(0, 0);
  }
  20% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(16px, -34px);
  }
}
.fly {
  animation: fly 1.6s ease-in-out infinite alternate;
}
.fly2 {
  animation: fly 2.1s 0.5s ease-in-out infinite alternate;
}
@keyframes fly {
  from {
    opacity: 0.2;
    transform: translate(0, 0);
  }
  to {
    opacity: 1;
    transform: translate(6px, -8px);
  }
}
.wing {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: flap 0.22s ease-in-out infinite alternate;
}
@keyframes flap {
  to {
    transform: scaleY(0.25);
  }
}
@media (prefers-reduced-motion: reduce) {
  .nf *,
  .scene * {
    animation: none !important;
    transition: none !important;
  }
  .steam path {
    opacity: 0.8;
  }
}