/* ---------- the phoenix ---------- */

/* The bird of the service lives on the edges of the page's cards: she perches
   where the visitor is working, flies between the forms as they change, keeps an
   eye on the cursor and answers a touch. She is drawn over the page and never
   takes a click from it: everything under her stays reachable. phoenix.js moves
   her; this file only says how she looks while doing it. */

.phoenix-layer {
  position: fixed;
  inset: 0;
  z-index: 50;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: visible;
  background: transparent;
  color: inherit;
  pointer-events: none;
  /* The header pinned over the page is its menu: nothing of hers, sparks and notes included, is
     drawn over it. phoenix.js keeps its bottom edge here, 0 while a dialog covers it. */
  clip-path: inset(var(--phoenix-ceiling, 0px) 0 0 0);
  --phoenix-size: 78px;
  --phoenix-gold: #ffd166;
}

.phoenix {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  opacity: 0;
  transition: opacity var(--normal) ease;
  will-change: transform;
}

.phoenix.is-here {
  opacity: 1;
}

/* Something else has the floor (a captcha challenge, say): she steps aside.
   And the operator may have sent her off altogether. */
.phoenix.is-away,
.phoenix.is-off {
  opacity: 0;
}

/* Pressed too often, she is ash for a while: gone at once, not fading back into sight
   while her burning ends; she rises when her time away is up. */
.phoenix.is-gone {
  opacity: 0;
  transition: none;
}

.phoenix-flip,
.phoenix-tilt,
.phoenix-pose {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
}

.phoenix-flip {
  transition: transform 0.22s var(--ease);
}

.phoenix-tilt {
  transition: transform 0.12s linear;
}

/* The point she stands on is the origin: (60, 107) of the 120-unit drawing. */
.phoenix-art {
  position: absolute;
  top: calc(var(--phoenix-size) * -0.8917);
  left: calc(var(--phoenix-size) * -0.5);
  width: var(--phoenix-size);
  height: var(--phoenix-size);
  overflow: visible;
  filter: drop-shadow(0 0 9px rgba(255, 107, 53, 0.5)) drop-shadow(0 3px 5px rgba(0, 0, 0, 0.35));
}

.phoenix-pose {
  transform-origin: 0 0;
  animation: phoenix-breathe 3.2s ease-in-out infinite;
}

.phx-head,
.phx-pupil,
.phx-eye,
.phx-jaw,
.phx-tail path,
.phx-tail g,
.phx-crest path,
.phx-wing,
.phx-body {
  transform-box: view-box;
}

.phx-head {
  transform-origin: 72px 54px;
  transition: transform 0.16s ease-out;
}

.phx-pupil {
  transition: transform 0.12s ease-out;
}

.phx-eye {
  transform-origin: 81px 40px;
  animation: phoenix-blink 5.4s infinite;
}

.phx-jaw {
  transform-origin: 89px 45px;
}

.phx-tail g {
  transform-origin: 50px 80px;
  animation: phoenix-sway 3.6s ease-in-out infinite;
}

.phx-tail g:nth-child(2) { animation-delay: -1.1s; animation-duration: 4.1s; }
.phx-tail g:nth-child(3) { animation-delay: -2.3s; animation-duration: 3.3s; }

.phx-crest path {
  transform-origin: 76px 31px;
  animation: phoenix-flicker 2.4s ease-in-out infinite;
}

.phx-crest path:nth-child(2) { animation-delay: -0.8s; }
.phx-crest path:nth-child(3) { animation-delay: -1.5s; }

.phx-wing {
  transform-origin: 63px 65px;
  opacity: 0;
}

.phx-folded,
.phx-legs {
  transition: opacity 0.12s ease;
}

/* ---------- in the air ---------- */

.phoenix.is-flying .phx-wing,
.phoenix.is-fluttering .phx-wing {
  opacity: 1;
  animation: phoenix-flap 0.26s ease-in-out infinite alternate;
}

.phoenix.is-flying .phx-wing.is-far,
.phoenix.is-fluttering .phx-wing.is-far {
  animation-delay: -0.05s;
}

.phoenix.is-flying .phx-folded,
.phoenix.is-fluttering .phx-folded,
.phoenix.is-flying .phx-legs {
  opacity: 0;
}

.phoenix.is-flying .phoenix-pose {
  animation: none;
}

.phoenix.is-flying .phx-tail g {
  animation-duration: 0.7s;
}

.phoenix.is-fluttering .phoenix-pose {
  animation: phoenix-startle 0.46s var(--ease);
}

.phoenix.is-landing .phoenix-pose {
  animation: phoenix-land 0.34s var(--spring);
}

/* ---------- moods ---------- */

.phoenix.is-happy .phx-eye,
.phoenix.is-asleep .phx-eye {
  animation: none;
  transform: scaleY(0.16);
}

.phoenix.is-happy .phx-blush {
  opacity: 1;
  transform: scale(1.35);
}

.phx-blush {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0.7;
  transition: opacity var(--fast) ease, transform var(--fast) var(--spring);
}

.phoenix.is-happy .phoenix-pose {
  animation: phoenix-wiggle 0.5s ease-in-out infinite;
}

.phoenix.is-asleep .phoenix-pose {
  animation-duration: 5.2s;
}

.phoenix.is-asleep .phx-head {
  transform: rotate(16deg) !important;
  transition-duration: 0.9s;
}

.phoenix.is-asleep .phoenix-art {
  filter: drop-shadow(0 0 5px rgba(255, 107, 53, 0.28)) drop-shadow(0 3px 5px rgba(0, 0, 0, 0.35));
}

.phoenix.is-singing .phx-jaw {
  animation: phoenix-sing 0.42s ease-in-out infinite alternate;
}

.phoenix.is-singing .phoenix-pose,
.phoenix.is-dancing .phoenix-pose {
  animation: phoenix-bob 0.62s ease-in-out infinite;
}

.phoenix.is-brooding .phoenix-art {
  animation: phoenix-glow 1.8s ease-in-out infinite;
}

.phoenix.is-excited .phoenix-pose {
  animation: phoenix-hop 0.5s var(--ease);
}

/* Touched by a click, she burns down to an ember and comes back new. */
.phoenix.is-burning .phoenix-pose {
  animation: phoenix-burn 0.7s ease-in forwards;
}

.phoenix.is-reborn .phoenix-pose {
  animation: phoenix-rise 0.7s var(--spring);
}

/* ---------- sparks, notes, and what else she sheds ---------- */

.phoenix-mote {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--mote-size, 5px);
  height: var(--mote-size, 5px);
  border-radius: 50%;
  background: radial-gradient(circle, #fff3c4 0, var(--phoenix-gold) 35%, var(--accent) 70%, transparent 72%);
  animation: phoenix-mote var(--mote-life, 0.9s) ease-out forwards;
}

.phoenix-mote.is-glyph {
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  color: var(--phoenix-gold);
  font-size: var(--mote-size, 15px);
  font-weight: 700;
  line-height: 1;
  text-shadow: 0 0 8px rgba(255, 107, 53, 0.8);
}

.phoenix-mote.is-heart {
  color: #ff7eb6;
}

.phoenix-mote.is-doze {
  color: var(--muted);
  text-shadow: none;
}

@keyframes phoenix-mote {
  0% {
    opacity: 0;
    transform: translate(var(--mote-x), var(--mote-y)) scale(0.4);
  }
  18% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(calc(var(--mote-x) + var(--mote-dx)), calc(var(--mote-y) + var(--mote-dy))) scale(1);
  }
}

@keyframes phoenix-breathe {
  0%, 100% { transform: scale(1, 1); }
  50% { transform: scale(1.015, 0.975); }
}

@keyframes phoenix-blink {
  0%, 46%, 50%, 100% { transform: scaleY(1); }
  48% { transform: scaleY(0.1); }
}

@keyframes phoenix-sway {
  0%, 100% { transform: rotate(-3deg); }
  50% { transform: rotate(5deg); }
}

@keyframes phoenix-flicker {
  0%, 100% { transform: rotate(-4deg) scaleY(1); }
  50% { transform: rotate(5deg) scaleY(1.08); }
}

@keyframes phoenix-flap {
  0% { transform: rotate(38deg) scaleY(0.55); }
  100% { transform: rotate(-30deg) scaleY(1.08); }
}

@keyframes phoenix-startle {
  0% { transform: translateY(0); }
  40% { transform: translateY(-16px) rotate(-6deg); }
  100% { transform: translateY(0); }
}

@keyframes phoenix-land {
  0% { transform: scale(0.94, 1.08); }
  45% { transform: scale(1.1, 0.86); }
  100% { transform: scale(1, 1); }
}

@keyframes phoenix-wiggle {
  0%, 100% { transform: rotate(-4deg); }
  50% { transform: rotate(4deg); }
}

@keyframes phoenix-sing {
  0% { transform: rotate(2deg); }
  100% { transform: rotate(22deg); }
}

@keyframes phoenix-bob {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50% { transform: translateY(-5px) rotate(3deg); }
}

@keyframes phoenix-glow {
  0%, 100% { filter: drop-shadow(0 0 8px rgba(255, 107, 53, 0.45)) drop-shadow(0 3px 5px rgba(0, 0, 0, 0.35)); }
  50% { filter: drop-shadow(0 0 20px rgba(255, 176, 66, 0.95)) drop-shadow(0 3px 5px rgba(0, 0, 0, 0.35)); }
}

@keyframes phoenix-hop {
  0%, 100% { transform: translateY(0) scale(1, 1); }
  20% { transform: translateY(0) scale(1.08, 0.88); }
  55% { transform: translateY(-14px) scale(0.96, 1.06); }
  85% { transform: translateY(0) scale(1.06, 0.92); }
}

@keyframes phoenix-burn {
  0% { transform: scale(1); filter: brightness(1); opacity: 1; }
  35% { transform: scale(1.14); filter: brightness(2.2) saturate(1.4); opacity: 1; }
  100% { transform: scale(0.08); filter: brightness(3); opacity: 0; }
}

@keyframes phoenix-rise {
  0% { transform: scale(0.1); filter: brightness(2.4); opacity: 0; }
  60% { transform: scale(1.12); filter: brightness(1.3); opacity: 1; }
  100% { transform: scale(1); filter: brightness(1); opacity: 1; }
}

/* ---------- the firebird ---------- */

/* The other bird the operator may pick: the same life, lived in sunlight. A sun
   turns behind her, her sparks are stars, and a click does not burn her down —
   she goes out in a flash of light and comes back out of it. The sunlight itself
   (the glow, the stars she sheds) she shares with the sun horse further down. */

.phoenix-layer:is([data-bird="firebird"], [data-bird="firehorse"]) {
  --phoenix-gold: #ffe27a;
}

:is([data-bird="firebird"], [data-bird="firehorse"]) .phoenix-art {
  filter: drop-shadow(0 0 12px rgba(255, 210, 63, 0.7)) drop-shadow(0 3px 5px rgba(0, 0, 0, 0.35));
}

.phx-halo {
  transform-box: view-box;
  transform-origin: 64px 62px;
  opacity: 0.85;
  transition: opacity 0.9s ease;
  animation: firebird-sun 26s linear infinite;
}

.phoenix.is-flying .phx-halo {
  opacity: 0.45;
}

.phoenix.is-asleep .phx-halo {
  opacity: 0.25;
  animation-duration: 60s;
}

.phoenix.is-happy .phx-halo,
.phoenix.is-singing .phx-halo,
.phoenix.is-dancing .phx-halo,
.phoenix.is-brooding .phx-halo {
  opacity: 1;
  animation-duration: 9s;
}

/* The stars of her crest flicker together with the feathers that carry them. */
[data-bird="firebird"] .phx-crest path:nth-child(4) { animation-delay: 0s; }
[data-bird="firebird"] .phx-crest path:nth-child(5) { animation-delay: -0.8s; }
[data-bird="firebird"] .phx-crest path:nth-child(6) { animation-delay: -1.5s; }

:is([data-bird="firebird"], [data-bird="firehorse"]) .phoenix.is-asleep .phoenix-art {
  filter: drop-shadow(0 0 5px rgba(255, 210, 63, 0.3)) drop-shadow(0 3px 5px rgba(0, 0, 0, 0.35));
}

:is([data-bird="firebird"], [data-bird="firehorse"]) .phoenix.is-brooding .phoenix-art {
  animation-name: firebird-glow;
}

[data-bird="firebird"] .phoenix.is-burning .phoenix-pose {
  animation-name: firebird-flash;
}

[data-bird="firebird"] .phoenix.is-reborn .phoenix-pose {
  animation-name: firebird-dawn;
}

:is([data-bird="firebird"], [data-bird="firehorse"]) .phoenix-mote {
  background: radial-gradient(circle, #ffffff 0, #fff3b0 35%, #ffd23f 65%, transparent 72%);
}

:is([data-bird="firebird"], [data-bird="firehorse"]) .phoenix-mote.is-glyph {
  background: none;
  text-shadow: 0 0 8px rgba(255, 210, 63, 0.9);
}

:is([data-bird="firebird"], [data-bird="firehorse"]) .phoenix-mote.is-spark {
  color: #fff6c2;
  text-shadow: 0 0 6px #ffd23f, 0 0 14px rgba(255, 182, 39, 0.8);
  animation-name: firebird-twinkle;
}

:is([data-bird="firebird"], [data-bird="firehorse"]) .phoenix-mote.is-heart {
  color: #ff7eb6;
}

:is([data-bird="firebird"], [data-bird="firehorse"]) .phoenix-mote.is-doze {
  color: var(--muted);
  text-shadow: none;
}

@keyframes firebird-sun {
  to { transform: rotate(360deg); }
}

@keyframes firebird-glow {
  0%, 100% { filter: drop-shadow(0 0 10px rgba(255, 210, 63, 0.55)) drop-shadow(0 3px 5px rgba(0, 0, 0, 0.35)); }
  50% { filter: drop-shadow(0 0 26px rgba(255, 240, 170, 1)) drop-shadow(0 3px 5px rgba(0, 0, 0, 0.35)); }
}

/* A star turns as it drifts away. */
@keyframes firebird-twinkle {
  0% {
    opacity: 0;
    transform: translate(var(--mote-x), var(--mote-y)) scale(0.3) rotate(0deg);
  }
  20% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(calc(var(--mote-x) + var(--mote-dx)), calc(var(--mote-y) + var(--mote-dy))) scale(1.1) rotate(140deg);
  }
}

@keyframes firebird-flash {
  0% { transform: scale(1); filter: brightness(1); opacity: 1; }
  40% { transform: scale(1.2); filter: brightness(3) saturate(0.6); opacity: 1; }
  100% { transform: scale(1.9); filter: brightness(5) saturate(0.2) blur(6px); opacity: 0; }
}

@keyframes firebird-dawn {
  0% { transform: scale(1.7); filter: brightness(4) blur(5px); opacity: 0; }
  55% { transform: scale(0.94); filter: brightness(1.6); opacity: 1; }
  100% { transform: scale(1); filter: brightness(1); opacity: 1; }
}

/* ---------- the sun horse ---------- */

/* Not a bird, and he has no wings: a small golden horse with a mane of sunrays.
   Where the birds fly he gallops through the air, rushed at he rears, and a click
   sends him bolting off into the light, to come galloping back from behind. */

.hrs-tail g,
.hrs-leg,
.hrs-glow {
  transform-box: view-box;
}

.hrs-tail g {
  transform-origin: 40px 77px;
  animation: phoenix-sway 3.4s ease-in-out infinite;
}

.hrs-tail g:nth-child(2) { animation-delay: -1.1s; animation-duration: 3.9s; }
.hrs-tail g:nth-child(3) { animation-delay: -2.3s; animation-duration: 3.1s; }

/* Each ray is drawn pointing up and turned into place: it grows from its own root. */
.hrs-mane path {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: firehorse-ray 2.6s ease-in-out infinite;
}

.hrs-mane g:nth-child(2n) path { animation-delay: -1.3s; }
.hrs-mane g:nth-child(3n) path { animation-duration: 3.3s; }

.hrs-glow {
  transform-origin: 76px 42px;
  opacity: 0.8;
  transition: opacity 0.9s ease;
  animation: firehorse-shine 4.2s ease-in-out infinite;
}

[data-bird="firehorse"] .phx-jaw {
  transform-origin: 85px 50.3px;
}

.hrs-leg.is-hind.is-far { transform-origin: 51px 85px; }
.hrs-leg.is-fore.is-far { transform-origin: 77px 85px; }
.hrs-leg.is-hind { transform-origin: 42px 85px; }
.hrs-leg.is-fore { transform-origin: 68px 85px; }

.phoenix.is-flying .hrs-leg.is-fore,
.phoenix.is-burning .hrs-leg.is-fore,
.phoenix.is-reborn .hrs-leg.is-fore,
.phoenix.is-fluttering .hrs-leg.is-fore {
  animation: firehorse-fore 0.3s ease-in-out infinite alternate;
}

.phoenix.is-flying .hrs-leg.is-hind,
.phoenix.is-burning .hrs-leg.is-hind,
.phoenix.is-reborn .hrs-leg.is-hind {
  animation: firehorse-hind 0.3s ease-in-out infinite alternate;
}

.phoenix-layer .phoenix .hrs-leg.is-far {
  animation-delay: -0.08s;
}

[data-bird="firehorse"] .phoenix.is-flying .phoenix-pose {
  animation: firehorse-canter 0.6s ease-in-out infinite;
}

.phoenix.is-flying .hrs-tail g {
  animation-duration: 0.6s;
}

.phoenix.is-flying .hrs-mane path,
.phoenix.is-happy .hrs-mane path,
.phoenix.is-singing .hrs-mane path,
.phoenix.is-dancing .hrs-mane path,
.phoenix.is-brooding .hrs-mane path {
  animation-duration: 0.8s;
}

.phoenix.is-happy .hrs-glow,
.phoenix.is-singing .hrs-glow,
.phoenix.is-dancing .hrs-glow,
.phoenix.is-brooding .hrs-glow {
  opacity: 1;
  animation-duration: 1.6s;
}

/* Asleep, his sun goes down to a glimmer. */
.phoenix.is-asleep .hrs-glow {
  opacity: 0.25;
}

.phoenix.is-asleep .hrs-mane path {
  animation-duration: 6s;
}

[data-bird="firehorse"] .phoenix.is-fluttering .phoenix-pose {
  animation: firehorse-rear 0.46s var(--ease);
}

[data-bird="firehorse"] .phoenix.is-burning .phoenix-pose {
  animation: firehorse-bolt 0.7s ease-in forwards;
}

[data-bird="firehorse"] .phoenix.is-reborn .phoenix-pose {
  animation: firehorse-return 0.7s var(--ease);
}

@keyframes firehorse-ray {
  0%, 100% { transform: scaleY(0.92); }
  50% { transform: scaleY(1.16); }
}

@keyframes firehorse-shine {
  0%, 100% { transform: scale(0.94); }
  50% { transform: scale(1.06); }
}

/* Forelegs reach out while the hind ones push off, then all four gather under him. */
@keyframes firehorse-fore {
  0% { transform: rotate(-52deg); }
  100% { transform: rotate(26deg); }
}

@keyframes firehorse-hind {
  0% { transform: rotate(48deg); }
  100% { transform: rotate(-28deg); }
}

@keyframes firehorse-canter {
  0%, 100% { transform: rotate(-5deg); }
  50% { transform: rotate(4deg) translateY(-2px); }
}

/* Up on the hind legs: they stand a little behind the point he is pinned to, so the
   turn is made about them and not about that point. */
@keyframes firehorse-rear {
  0%, 100% { transform: translateX(calc(var(--phoenix-size) * -0.12)) rotate(0deg) translateX(calc(var(--phoenix-size) * 0.12)); }
  45% { transform: translateX(calc(var(--phoenix-size) * -0.12)) rotate(-22deg) translateX(calc(var(--phoenix-size) * 0.12)); }
}

@keyframes firehorse-bolt {
  0% { transform: translate(0, 0) rotate(0deg); filter: brightness(1); opacity: 1; }
  28% { transform: translate(-4px, -2px) rotate(-20deg); filter: brightness(1.5); opacity: 1; }
  100% { transform: translate(190px, -70px) rotate(-10deg) scale(0.55); filter: brightness(4) blur(3px); opacity: 0; }
}

@keyframes firehorse-return {
  0% { transform: translate(-170px, -50px) rotate(8deg) scale(0.55); filter: brightness(4) blur(3px); opacity: 0; }
  70% { transform: translate(6px, 0) rotate(-6deg) scale(1.04); filter: brightness(1.4); opacity: 1; }
  100% { transform: translate(0, 0) rotate(0deg) scale(1); filter: brightness(1); opacity: 1; }
}

@media (max-width: 520px) {
  .phoenix-layer {
    --phoenix-size: 60px;
  }
}