/* Timmy, the KidWings barn owl: on the homepage and inside games. */

/* --- The homepage: the words on the left, Timmy and the logo on the right --
   Timmy floats in the top right corner, facing left, and the logo sits
   below him in the bottom right. On this page he is drawn mirrored, so he
   looks towards the words and flies right to left. */
.open__side {
  position: relative; z-index: 2;
  display: grid; align-content: center;
}
/* His space is held from the start: the chalk on the board is laid out
   before Timmy's script runs, and a box that grew afterwards pushed the
   logo onto writing that had already been placed. */
[data-timmy] { width: clamp(150px, 13vw, 210px); aspect-ratio: 1; }

@media (min-width: 900px) {
  .open__in { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
  .open__side { justify-self: stretch; justify-items: end; }
  .open__side [data-timmy] { order: -1; margin: 0 0 -4.5rem 0; z-index: 3; }
  .open__side .open__mark { justify-self: end; width: clamp(260px, 30vw, 440px); }
}
@media (max-width: 899px) {
  /* One column on a phone: the logo and Timmy side by side, at the top. */
  .open__side {
    order: -1; justify-self: center;
    grid-template-columns: auto auto; align-items: end;
  }
  .open__side [data-timmy] { order: 1; width: clamp(84px, 26vw, 130px); }
  .open__side .open__mark { order: 0; margin-bottom: 0; width: clamp(180px, 56vw, 330px); }
}

/* Mirrored on the homepage: beak to the left. */
.timmy--home .timmy__body { scale: -1 1; }
/* So he talks to his left, towards the words. */
.timmy--home .timmy__bubble { left: auto; right: 92%; }
.timmy--home .timmy__bubble::after {
  left: auto; right: -8px;
  border: 9px solid transparent; border-left-color: #fff; border-right: 0;
}
@media (min-width: 900px) {
  .timmy--home .timmy__chat { left: auto; right: 96%; }
}

/* --- Timmy ---------------------------------------------------------------- */
.timmy { position: relative; }

.timmy__btn {
  display: block; width: 100%; padding: 0; margin: 0;
  background: none; border: 0; border-radius: 50%; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.timmy__btn:focus-visible { outline: 3px solid var(--amber, #f6a623); outline-offset: 4px; }

.timmy__body {
  position: relative; display: block; aspect-ratio: 1;
  filter: drop-shadow(0 10px 14px rgb(0 0 0 / 0.35));
  animation: timmy-bob 5s ease-in-out infinite;
}
.timmy__btn:hover .timmy__body { transform: scale(1.05); }
.timmy__fly img, .timmy__blink img, .timmy__pose {
  position: absolute; inset: 0; width: 100%; height: 100%;
  -webkit-user-select: none; user-select: none; pointer-events: none;
}

/* Mostly he glides, wings level. Every few seconds timmy.js sets
   .is-flapping and he gives two slow wingbeats: up, level, down, level. */
.timmy__fly img { opacity: 0; }
.timmy__fly img:nth-child(2) { opacity: 1; }
.timmy__fly img:nth-child(1) { translate: 2.5% 6%; } /* keeps his head still while the wings go up */
.timmy.is-flapping .timmy__fly img { animation: 0.95s steps(1, end) 2; }
.timmy.is-flapping .timmy__fly img:nth-child(1) { animation-name: timmy-wing-1; }
.timmy.is-flapping .timmy__fly img:nth-child(2) { animation-name: timmy-wing-2; }
.timmy.is-flapping .timmy__fly img:nth-child(3) { animation-name: timmy-wing-3; }

.timmy__pose { display: none; }
.timmy.is-posing .timmy__fly { visibility: hidden; }
.timmy.is-posing .timmy__pose { display: block; }
.timmy.is-popping .timmy__pose { animation: timmy-pop 0.45s cubic-bezier(0.2, 1.6, 0.4, 1); }
.timmy.is-sleeping .timmy__body { animation-duration: 6s; }

/* --- Speech bubble --------------------------------------------------------- */
.timmy__bubble {
  position: absolute; z-index: 3; margin: 0;
  left: 92%; top: 8%;
  width: max-content; max-width: 230px;
  padding: 0.6rem 0.8rem; border-radius: 16px;
  background: #fff; color: #1f2d33;
  font: 700 0.95rem/1.3 var(--display, sans-serif); text-align: left;
  box-shadow: 0 6px 18px rgb(0 0 0 / 0.3);
  pointer-events: none;
}
.timmy__bubble::after {
  content: ""; position: absolute; left: -8px; top: 1rem;
  border: 9px solid transparent; border-right-color: #fff; border-left: 0;
}
.timmy__bubble.is-in { animation: timmy-pop 0.35s cubic-bezier(0.2, 1.6, 0.4, 1); }
@media (max-width: 899px) {
  .timmy--home .timmy__bubble { left: auto; right: 30%; top: auto; bottom: 92%; max-width: 200px; font-size: 0.85rem; }
  .timmy--home .timmy__bubble::after { left: auto; right: 1.2rem; top: auto; bottom: -8px; border: 9px solid transparent; border-top-color: #fff; border-bottom: 0; }
}

/* --- The chat --------------------------------------------------------------- */
.timmy__chat {
  position: absolute; z-index: 5;
  left: 96%; top: 0;
  width: min(340px, calc(100vw - 2rem));
  padding: 1rem; border-radius: 20px;
  background: #fffaf0; color: #1f2d33; text-align: left;
  box-shadow: 0 18px 40px rgb(0 0 0 / 0.45);
}
@media (max-width: 899px) {
  /* A panel along the bottom of the screen on a phone. */
  .timmy__chat {
    position: fixed; z-index: 450; left: 1rem; right: 1rem; top: auto; bottom: 1rem;
    width: auto; max-width: 420px; margin-inline: auto;
  }
}
.timmy.is-open .timmy__bubble { display: none; }
.timmy__x {
  position: absolute; top: 0.4rem; right: 0.5rem;
  width: 2rem; height: 2rem; border: 0; border-radius: 50%;
  background: none; color: #6c7a7e; font-size: 1.5rem; line-height: 1; cursor: pointer;
}
.timmy__x:hover { background: #efe5d0; color: #1f2d33; }
.timmy__text { margin: 0 2rem 0.6rem 0; font: 700 1.05rem/1.35 var(--display, sans-serif); }
.timmy__links { display: grid; gap: 0.4rem; margin-bottom: 0.7rem; }
.timmy__links:empty { display: none; }
.timmy__link {
  display: block; padding: 0.55rem 0.7rem; border-radius: 12px;
  background: #fff; border: 2px solid #eadfc8; color: #1f2d33;
  font-size: 0.92rem; line-height: 1.3; text-decoration: none;
}
.timmy__link:hover, .timmy__link:focus-visible { border-color: #f6a623; color: #1f2d33; }
.timmy__link b {
  display: inline-block; margin-right: 0.3rem; padding: 0.05rem 0.45rem; border-radius: 99px;
  background: #2e9e8f; color: #fff; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em;
}
.timmy__link--film b { background: #4a6fd9; }
.timmy__link--activity b { background: #c97a06; }
.timmy__link--place b { background: #e4572e; }
.timmy__chips { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 0.7rem; }
.timmy__chip {
  padding: 0.35rem 0.7rem; border-radius: 99px; cursor: pointer;
  background: #eef7f6; border: 1px solid #bfe0dc; color: #155f56;
  font: 600 0.82rem/1.2 var(--sans, sans-serif);
}
.timmy__chip:hover { background: #d9efec; }
.timmy__ask { display: flex; gap: 0.4rem; }
.timmy__ask input {
  flex: 1 1 auto; min-width: 0; padding: 0.55rem 0.75rem;
  border: 2px solid #eadfc8; border-radius: 99px; background: #fff; color: #1f2d33;
  font: 500 1rem var(--sans, sans-serif);
}
.timmy__ask input:focus { outline: none; border-color: #2e9e8f; }

/* --- Timmy in a game corner ---------------------------------------------------- */
.timmy--game {
  position: absolute; z-index: 6; left: 1%; bottom: 1%;
  width: clamp(80px, 13%, 140px);
  pointer-events: none;
}
.timmy--game .timmy__bubble {
  right: auto; left: 92%; top: auto; bottom: 55%;
  max-width: min(260px, 60vw); font-size: 0.9rem;
}
.timmy--game .timmy__bubble::after {
  right: auto; left: -8px; top: auto; bottom: 0.8rem;
  border: 9px solid transparent; border-right-color: #fff; border-left: 0;
}

@keyframes timmy-bob {
  0%, 100% { translate: 0 0; rotate: -2deg; }
  50% { translate: 0 -12px; rotate: 2deg; }
}
@keyframes timmy-wing-1 { 0% { opacity: 1; } 25%, 100% { opacity: 0; } }
@keyframes timmy-wing-2 { 0% { opacity: 0; } 25% { opacity: 1; } 50% { opacity: 0; } 75%, 100% { opacity: 1; } }
@keyframes timmy-wing-3 { 0% { opacity: 0; } 50% { opacity: 1; } 75%, 100% { opacity: 0; } }
@keyframes timmy-pop {
  0% { transform: scale(0.6); opacity: 0; }
  100% { transform: none; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .timmy__body, .timmy__fly img, .timmy__pose, .timmy__bubble { animation: none !important; }
  .timmy__fly img:nth-child(2) { opacity: 1; }
}

/* Hoot & Hunt: the aiming happens bottom left and the mother hangs top left,
   so Timmy sits in the grass bottom right and talks to his left. */
.timmy--hoot { left: auto; right: 1%; }
.timmy--hoot .timmy__bubble { left: auto; right: 92%; }
.timmy--hoot .timmy__bubble::after {
  left: auto; right: -8px;
  border: 9px solid transparent; border-left-color: #fff; border-right: 0;
}

/* --- Timmy the visitor, on the other pages -----------------------------------
   Placed on the page itself (absolute, not fixed), so once he has landed he
   scrolls away with what is under him. */
.timmy--visitor { position: absolute; z-index: 300; width: clamp(110px, 10vw, 150px); }
@media (max-width: 699px) { .timmy--visitor { width: 92px; } }
.timmy--visitor .timmy__body { filter: drop-shadow(0 10px 18px rgb(0 0 0 / 0.4)); }
/* He is at the right edge, so he talks to his left. */
.timmy--visitor .timmy__bubble { left: auto; right: 92%; }
.timmy--visitor .timmy__bubble::after {
  left: auto; right: -8px;
  border: 9px solid transparent; border-left-color: #fff; border-right: 0;
}
@media (min-width: 900px) {
  .timmy--visitor .timmy__chat { left: auto; right: 96%; top: 0; bottom: auto; }
}
/* Always left to right, the way he faces: in from the left side of the screen,
   out past the right. While he flies the page is clipped sideways, so his
   exit cannot push it into a sideways scroll. The flight path itself is
   drawn by fly() in timmy.js. */
html.timmy-flying, html.timmy-flying body { overflow-x: clip; }

/* On a flight: two wingbeats and a glide, over and over, the way an owl
   actually flies. Nothing else moves him meanwhile: the resting float and
   the soft shadow wait until he lands, so the path is the only motion. */
.timmy--visitor { will-change: translate; }
.timmy:is(.is-arriving, .is-leaving, .is-fleeing) .timmy__body { animation: none; filter: none; }
.timmy:is(.is-arriving, .is-leaving, .is-fleeing) .timmy__fly img { animation: 1.5s steps(1, end) infinite; }
.timmy:is(.is-arriving, .is-leaving, .is-fleeing) .timmy__fly img:nth-child(1) { animation-name: timmy-glide-1; }
.timmy:is(.is-arriving, .is-leaving, .is-fleeing) .timmy__fly img:nth-child(2) { animation-name: timmy-glide-2; }
.timmy:is(.is-arriving, .is-leaving, .is-fleeing) .timmy__fly img:nth-child(3) { animation-name: timmy-glide-3; }
/* Up, level, down, level; twice; then wings level for the glide. */
@keyframes timmy-glide-1 { 0% { opacity: 1; } 7.5% { opacity: 0; } 30% { opacity: 1; } 37.5%, 100% { opacity: 0; } }
@keyframes timmy-glide-2 {
  0% { opacity: 0; } 7.5% { opacity: 1; } 15% { opacity: 0; } 22.5% { opacity: 1; }
  30% { opacity: 0; } 37.5% { opacity: 1; } 45% { opacity: 0; } 52.5%, 100% { opacity: 1; }
}
@keyframes timmy-glide-3 { 0% { opacity: 0; } 15% { opacity: 1; } 22.5% { opacity: 0; } 45% { opacity: 1; } 52.5%, 100% { opacity: 0; } }

/* --- Blinking ---------------------------------------------------------------
   Every few seconds at rest he swaps to his blinking drawing for under a
   second: open, half, shut, half, open, then back to gliding. */
.timmy__blink img { opacity: 0; }
.timmy.is-blinking .timmy__fly { visibility: hidden; }
.timmy.is-blinking .timmy__blink img { animation: 0.9s steps(1, end) both; }
.timmy.is-blinking .timmy__blink img:nth-child(1) { animation-name: timmy-blink-1; }
.timmy.is-blinking .timmy__blink img:nth-child(2) { animation-name: timmy-blink-2; }
.timmy.is-blinking .timmy__blink img:nth-child(3) { animation-name: timmy-blink-3; }
@keyframes timmy-blink-1 { 0% { opacity: 1; } 38% { opacity: 0; } 62%, 100% { opacity: 1; } }
@keyframes timmy-blink-2 { 0% { opacity: 0; } 38% { opacity: 1; } 45% { opacity: 0; } 55% { opacity: 1; } 62%, 100% { opacity: 0; } }
@keyframes timmy-blink-3 { 0% { opacity: 0; } 45% { opacity: 1; } 55%, 100% { opacity: 0; } }

/* --- When the barn owls get out ---------------------------------------------
   He flees flapping as hard as he can (no glides, twice the speed), and is
   simply not there until they have gone home. His spot keeps its size so the
   page does not shift while he is away. */
.timmy:is(.is-arriving, .is-leaving, .is-fleeing) { will-change: translate; }
.timmy.is-fleeing .timmy__fly img { animation-duration: 0.36s; }
.timmy.is-fleeing .timmy__fly img:nth-child(1) { animation-name: timmy-flee-1; }
.timmy.is-fleeing .timmy__fly img:nth-child(2) { animation-name: timmy-flee-2; }
.timmy.is-fleeing .timmy__fly img:nth-child(3) { animation-name: timmy-flee-3; }
@keyframes timmy-flee-1 { 0%, 24.9% { opacity: 1; } 25%, 100% { opacity: 0; } }
@keyframes timmy-flee-2 { 0%, 24.9% { opacity: 0; } 25%, 49.9% { opacity: 1; } 50%, 74.9% { opacity: 0; } 75%, 100% { opacity: 1; } }
@keyframes timmy-flee-3 { 0%, 49.9% { opacity: 0; } 50%, 74.9% { opacity: 1; } 75%, 100% { opacity: 0; } }
.timmy.is-away { visibility: hidden; }
.timmy.is-away * { visibility: hidden; }