/* FOOT ID. Its own file, so the game can be added or removed cleanly. */

.lab--foot { padding: 0; background: none; border: 0; box-shadow: none; }

.foot {
  position: relative; overflow: hidden;
  background: #fffaf0; color: #23343a;
  border-radius: 24px;
  scroll-margin-top: 76px; /* Clear of the sticky site header. */
  padding: clamp(0.85rem, 2.5vw, 1.75rem);
  font-family: var(--sans);
  text-align: center;
}
.foot__screen { display: flex; flex-direction: column; align-items: center; gap: 0.9rem; }
.foot p { margin: 0; }
.foot__screen--open { padding-block: 0.5rem 1.25rem; }

.foot__logo { width: min(100%, 540px); height: auto; }
.foot__screen--end .foot__logo { width: min(70%, 320px); }
.foot__lead {
  max-width: 34em;
  font: 700 clamp(1.1rem, 2.6vw, 1.45rem)/1.3 var(--display);
}
.foot__big { font-family: var(--display); font-weight: 700; letter-spacing: 0.03em; min-width: 11rem; }

/* --- Progress ------------------------------------------------------------ */
.foot__top {
  display: flex; align-items: center; gap: 0.9rem; align-self: stretch;
  /* Clear of the Full screen button in the corner. */
  padding-right: 9rem; min-height: 2.2rem;
}
.foot__count { font: 700 1.2rem/1 var(--display); white-space: nowrap; }
.foot__dots { display: flex; gap: 0.4rem; margin: 0; padding: 0; list-style: none; }
.foot__dots li { width: 0.8rem; height: 0.8rem; border-radius: 50%; background: #e6dcc6; }
.foot__dots .is-done { background: #2e9e8f; }
.foot__dots .is-now { background: #f6a623; }

/* --- The bird ------------------------------------------------------------ */
.foot__bird { position: relative; line-height: 0; }
.foot__pic { position: relative; display: inline-block; }
.foot__bird-img {
  width: auto; height: clamp(170px, 30vh, 300px); max-width: 100%;
  -webkit-mask: linear-gradient(to bottom, #000 93%, transparent) no-repeat top / 100% calc(var(--line) + 3%);
  mask: linear-gradient(to bottom, #000 93%, transparent) no-repeat top / 100% calc(var(--line) + 3%);
  transition: -webkit-mask-size 1s ease 0.1s, mask-size 1s ease 0.1s;
}
/* A second copy of the bird, fogged and drained of colour: yellow or orange
   toes would give the answer away just as surely as sharp ones. */
.foot__fog {
  /* Bigger than the bird, so the smear can spread without being cut off in a box. */
  position: absolute; inset: -22px; pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent calc(22px + (100% - 44px) * var(--n) - 12px), #000 calc(22px + (100% - 44px) * var(--n) + 6px));
  mask-image: linear-gradient(to bottom, transparent calc(22px + (100% - 44px) * var(--n) - 12px), #000 calc(22px + (100% - 44px) * var(--n) + 6px));
}
.foot__bird-blur {
  position: absolute; inset: 22px; width: calc(100% - 44px); height: calc(100% - 44px);
  filter: blur(14px) grayscale(1);
  transition: filter 1s ease 0.1s, opacity 0.5s ease 0.7s;
}
.foot__pic.is-revealed .foot__bird-img { -webkit-mask-size: 100% 130%; mask-size: 100% 130%; }
.foot__pic.is-revealed .foot__bird-blur { filter: blur(0) grayscale(0); opacity: 0; }
.foot__sparks { position: absolute; left: 50%; top: calc((var(--line) + 100%) / 2); width: 0; height: 0; }
.foot__spark {
  position: absolute; left: -0.6rem; top: -0.8rem; font: normal 1.5rem/1 var(--sans); opacity: 0;
  animation: foot-spark 1s ease-out forwards;
}
.foot__gasp {
  position: absolute; top: 0; right: -1.6rem; opacity: 0;
  font: 800 2.6rem/1 var(--display); color: #e4572e;
}
.foot__bird.is-surprised .foot__pic { animation: foot-surprised 0.75s ease; transform-origin: 50% 100%; }
.foot__bird.is-surprised .foot__gasp { animation: foot-gasp 0.95s ease; }
.foot__bird.is-happy .foot__pic { animation: foot-hop 0.8s ease; transform-origin: 50% 100%; }

.foot__ask { font: 500 clamp(1.15rem, 2.8vw, 1.5rem)/1.25 var(--display); }
.foot__ask b { font-weight: 700; }
.foot__ask.is-oops { color: #c8401c; animation: foot-pop 0.35s ease; }

/* --- The feet ------------------------------------------------------------ */
.foot__play { align-self: stretch; }
.foot__options {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.5rem, 1.5vw, 1rem);
  margin: 0; padding: 0; list-style: none;
}
.foot__option, .foot__winner {
  display: block; width: 100%; padding: clamp(0.5rem, 1.4vw, 1rem);
  background: #fff; border: 4px solid #eadfc8; border-radius: 20px;
  line-height: 0;
}
.foot__option {
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease, opacity 0.2s ease;
  touch-action: manipulation;
}
.foot__option:hover:not(:disabled) { transform: translateY(-5px) rotate(-1deg); border-color: #f6a623; }
.foot__option:active:not(:disabled) { transform: scale(0.96); }
.foot__option:focus-visible { outline: 4px solid #168d99; outline-offset: 2px; }
.foot__option:disabled { opacity: 0.35; cursor: default; }
.foot__option.is-wrong { animation: foot-shake 0.45s ease; }
.foot__feet-img { width: 100%; height: clamp(150px, 26vh, 290px); object-fit: contain; }

/* --- After a match ------------------------------------------------------- */
.foot__play.is-solved {
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: 1rem; align-items: center;
}
.foot__winner { border-color: #2e9e8f; animation: foot-pop 0.45s ease; }
.foot__said { display: flex; flex-direction: column; align-items: center; gap: 0.55rem; animation: foot-pop 0.45s ease; }
.foot__great { font: 800 clamp(1.9rem, 5vw, 2.8rem)/1 var(--display); color: #1f8476; }
.foot__type { font-size: 1.05rem; }
.foot__fact { max-width: 30em; font-size: clamp(1.1rem, 2.4vw, 1.3rem); line-height: 1.4; }
.foot__credit { font-size: 0.78rem; color: #6c7a7e; }

/* --- The end ------------------------------------------------------------- */
.foot__flock {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: end;
  align-self: stretch; gap: 0.4rem; margin: 0; padding: 0; list-style: none;
}
.foot__flock-img { width: 100%; height: clamp(80px, 18vh, 190px); object-fit: contain; }
.foot__expert { margin: 0; font: 800 clamp(1.6rem, 5vw, 2.7rem)/1.05 var(--display); color: #c8401c; }
.foot__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; }

.foot__bit {
  position: absolute; top: -16px; width: 10px; height: 16px; border-radius: 50% 0;
  pointer-events: none; animation: foot-fall 1.7s ease-in forwards;
}

/* --- Full screen --------------------------------------------------------- */
.lab--foot.is-full { background: #fffaf0; }
.lab--foot.is-full .foot { border-radius: 0; overflow-y: auto; justify-content: safe center; }
.lab--foot.is-full .foot__top { padding-right: 3.6rem; }

/* --- Phones: two feet over one, so each stays big enough to read ---------- */
@media (max-width: 560px) {
  .foot { border-radius: 0; }
  .foot__top { padding-right: 3.2rem; }
  .foot__options { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .foot__options li { grid-column: span 2; }
  .foot__options li:last-child { grid-column: 2 / span 2; }
  .foot__feet-img { height: 135px; }
  .foot__bird-img { height: 170px; }
  .foot__play.is-solved { grid-template-columns: 1fr; }
  .foot__winner { max-width: 230px; justify-self: center; }
  .foot__actions { flex-direction: column; align-self: stretch; }
}

@keyframes foot-spark {
  0% { opacity: 0; transform: scale(0.2); }
  25% { opacity: 1; transform: scale(1.3); }
  100% { opacity: 0; transform: translate(var(--x), var(--y)) rotate(200deg) scale(0.6); }
}
@keyframes foot-surprised {
  0% { transform: none; }
  18% { transform: translateY(-20px) scale(1.08, 0.94) rotate(-7deg); }
  36% { transform: translateY(0) scale(0.92, 1.08) rotate(6deg); }
  54% { transform: rotate(-5deg); }
  72% { transform: rotate(4deg); }
  100% { transform: none; }
}
@keyframes foot-gasp {
  0% { opacity: 0; transform: scale(0.3); }
  25%, 75% { opacity: 1; transform: scale(1.1); }
  100% { opacity: 0; transform: scale(1); }
}
@keyframes foot-hop {
  0%, 100% { transform: none; }
  25% { transform: translateY(-28px); }
  50% { transform: translateY(0) scale(1.05, 0.95); }
  70% { transform: translateY(-14px); }
}
@keyframes foot-shake {
  20% { transform: translateX(-9px) rotate(-2deg); }
  40% { transform: translateX(8px) rotate(2deg); }
  60% { transform: translateX(-6px); }
  80% { transform: translateX(4px); }
}
@keyframes foot-pop {
  0% { transform: scale(0.82); opacity: 0.2; }
  65% { transform: scale(1.05); opacity: 1; }
  100% { transform: none; }
}
@keyframes foot-fall {
  to { transform: translate(var(--drift), 760px) rotate(var(--spin)); opacity: 0.2; }
}

@media (prefers-reduced-motion: reduce) {
  .foot *, .foot { animation: none !important; transition: none !important; }
  .foot__bird.is-surprised .foot__gasp { opacity: 1; }
}

/* --- Level 2: Foot Rain -------------------------------------------------- */
.foot__screen--rain { gap: 0.5rem; }
.foot__score { margin-left: auto !important; font: 800 1.35rem/1 var(--display); color: #c97a06; }
.foot__arena {
  position: relative; overflow: hidden; align-self: stretch;
  display: flex; flex-direction: column;
  background: linear-gradient(#d9f0f2, #fffaf0 85%);
  border-radius: 18px;
}
.foot__sky { position: relative; height: clamp(300px, 50vh, 470px); }
.foot__perch {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: end; gap: 0.25rem; padding: 0 0.25rem 0.4rem;
}
.foot__slot {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.2rem;
  padding: 0.15rem 0; background: none; border: 0; border-radius: 14px; color: inherit; cursor: pointer;
}
.foot__slot:focus-visible { outline: 3px solid #168d99; }
.foot__slot .foot__bird-img {
  display: block; width: auto; max-width: none; height: min(16.5vw, clamp(84px, 15vh, 140px));
}
.foot__slot .foot__bird-blur { filter: blur(7px) grayscale(1); }
.foot__name { font: 700 clamp(0.66rem, 1.7vw, 0.95rem)/1.1 var(--display); }
.foot__bird.is-spit .foot__pic { animation: foot-spit 0.6s ease; transform-origin: 50% 100%; }

.foot__drop {
  position: absolute; left: 0; top: 0; z-index: 3;
  width: clamp(104px, 15vw, 165px); line-height: 0;
  cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none;
  filter: drop-shadow(0 5px 6px rgb(30 50 55 / 0.3));
}
.foot__drop.is-held { cursor: grabbing; z-index: 4; }
.foot__drop-img { width: 100%; height: auto; pointer-events: none; }

.foot__bubble {
  position: absolute; bottom: 100%; left: 50%; z-index: 5; width: max-content; max-width: 10rem;
  margin-bottom: 0.2rem; padding: 0.35rem 0.6rem;
  background: #fff; border-radius: 14px; box-shadow: 0 3px 10px rgb(30 50 55 / 0.25);
  font: 800 clamp(0.8rem, 2vw, 1.05rem)/1.15 var(--display);
  pointer-events: none; animation: foot-bubble 1.7s ease forwards;
  --shift: -50%;
}
.foot__bubble--good { color: #1f8476; }
.foot__bubble--silly { color: #c8401c; }
.foot__slot:first-child .foot__bubble { left: 0.2rem; --shift: 0%; }
.foot__slot:last-child .foot__bubble { left: auto; right: 0.2rem; --shift: 0%; }

.foot__slow {
  position: absolute; left: 0; right: 0; bottom: 18%; opacity: 0; pointer-events: none;
  font: 800 clamp(1.5rem, 4.5vw, 2.4rem)/1 var(--display); color: #7b8b8f;
}
.foot__slow.is-on { animation: foot-slow 0.9s ease; }

.lab--foot.is-full .foot__screen--rain { flex: 1 1 auto; min-height: 0; }
.lab--foot.is-full .foot__arena { flex: 1 1 auto; min-height: 0; }
.lab--foot.is-full .foot__sky { flex: 1 1 auto; height: auto; }

@media (max-width: 560px) {
  .foot { scroll-margin-top: 92px; }
  .foot__bubble { max-width: 7.2rem; }
}

@keyframes foot-spit {
  0% { transform: none; }
  30% { transform: rotate(-12deg) scale(0.92, 1.1); }
  52% { transform: translateY(-5px) rotate(12deg) scale(1.16, 0.88); }
  76% { transform: rotate(-5deg); }
  100% { transform: none; }
}
@keyframes foot-bubble {
  0% { opacity: 0; transform: translate(var(--shift), 10px) scale(0.7); }
  15%, 75% { opacity: 1; transform: translate(var(--shift), 0) scale(1); }
  100% { opacity: 0; transform: translate(var(--shift), -14px) scale(1); }
}
@keyframes foot-slow {
  0% { opacity: 0; transform: scale(0.7); }
  25%, 70% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; }
}

/* --- Level complete, and the results arriving piece by piece -------------- */
.foot__screen--done { justify-content: center; min-height: inherit; gap: 1.2rem; }
.foot__done {
  font: 800 clamp(2.4rem, 8vw, 4.6rem)/1 var(--display); color: #c8401c;
  animation: foot-slam 0.7s cubic-bezier(0.2, 1.6, 0.4, 1) both;
}
.foot__done span { display: block; color: #1f8476; font-size: 0.6em; }
.foot__stars { display: flex; gap: 0.6rem; font-size: clamp(2.6rem, 8vw, 4.2rem); line-height: 1; }
.foot__stars i { font-style: normal; color: #f6a623; animation: foot-star 0.55s cubic-bezier(0.2, 1.8, 0.4, 1) both; }
.foot__stars i:nth-child(1) { animation-delay: 0.6s; }
.foot__stars i:nth-child(2) { animation-delay: 0.85s; font-size: 1.3em; }
.foot__stars i:nth-child(3) { animation-delay: 1.1s; }

.foot__screen--end > * { animation: foot-rise 0.6s ease both; }
.foot__screen--end > .foot__logo { animation-delay: 0.1s; }
.foot__screen--end > .foot__flock { animation: none; }
.foot__screen--end .foot__flock li { animation: foot-star 0.5s cubic-bezier(0.2, 1.6, 0.4, 1) both; }
.foot__screen--end .foot__flock li:nth-child(1) { animation-delay: 0.5s; }
.foot__screen--end .foot__flock li:nth-child(2) { animation-delay: 0.7s; }
.foot__screen--end .foot__flock li:nth-child(3) { animation-delay: 0.9s; }
.foot__screen--end .foot__flock li:nth-child(4) { animation-delay: 1.1s; }
.foot__screen--end .foot__flock li:nth-child(5) { animation-delay: 1.3s; }
.foot__screen--end > .foot__expert { animation: foot-slam 0.6s cubic-bezier(0.2, 1.6, 0.4, 1) 1.7s both; }
.foot__screen--end > .foot__lead { animation-delay: 2.2s; }
.foot__screen--end > .btn, .foot__screen--end > .foot__actions { animation-delay: 2.6s; }

@keyframes foot-slam {
  0% { opacity: 0; transform: scale(2.2) rotate(-6deg); }
  100% { opacity: 1; transform: none; }
}
@keyframes foot-star {
  0% { opacity: 0; transform: scale(0) rotate(-90deg); }
  100% { opacity: 1; transform: none; }
}
@keyframes foot-rise {
  0% { opacity: 0; transform: translateY(24px); }
  100% { opacity: 1; transform: none; }
}