/* The one bird's layers. js/bird.js builds all of these elements itself.
   Z-order from the brief: peek bird 3, flying bird 40, carried thing 41. */

.bird-layer {
  pointer-events: none;
  z-index: 40;
}

/* In flight the bird lives here: fixed, so it's in the viewport whatever the page does. */
.bird-layer--fixed {
  position: fixed;
  inset: 0;
  overflow: hidden;
  contain: strict;
}

/* Perched, it lives here instead, in the page, so it scrolls exactly with what it's standing on.
   Its height is set from JS, and it clips, so a bird near an edge can't make the page bigger. */
.bird-layer--page {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  overflow: clip;
}

.bird-layer--carry {
  position: fixed;
  inset: 0;
  overflow: hidden;
  z-index: 41;
  contain: strict;
}

.bird-whole {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  pointer-events: none;
  will-change: transform;
  transition: filter 120ms ease-out;
}

/* The hit area of a perched bird. A flying bird has none: it never blocks a click. */
.bird-hit {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: auto;
  border-radius: 50%;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* The icon bird rises over a hard line: the bottom of this box. Only that side is clipped. */
.bird-peek {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  clip-path: inset(-300vh -300vw 0 -300vw);

  --bird-ink-hi: #2e2a35;
  --bird-ink-lo: #141217;
  --bird-ink: var(--magpie);
  --bird-paper-hi: #fffdf7;
  --bird-paper-lo: #f1e9d6;
}

/* Evening: the bird's lighter slate, as in the app. */
@media (prefers-color-scheme: dark) {
  .bird-peek {
    --bird-ink-hi: #5a5666;
    --bird-ink-lo: var(--magpie);
  }
  /* On the icon's own green field it stays the icon's own ink. */
  .bird-peek--icon-ink {
    --bird-ink-hi: #2e2a35;
    --bird-ink-lo: #141217;
    --bird-ink: #121015;
  }
}

.bird-icon {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  overflow: visible;
  pointer-events: none;
  transform-origin: 50% 100%;
}

.bird-icon .bird-hit-path,
.bird-icon .bird-eye {
  pointer-events: auto;
}

@media (hover: hover) and (pointer: fine) {
  .bird-icon .bird-hit-path,
  .bird-icon .bird-eye {
    cursor: var(--cursor-press, pointer);
  }
}

.bird-stop-ink-hi { stop-color: var(--bird-ink-hi); }
.bird-stop-ink-lo { stop-color: var(--bird-ink-lo); }
.bird-stop-paper-hi { stop-color: var(--bird-paper-hi); }
.bird-stop-paper-lo { stop-color: var(--bird-paper-lo); }

.bird-paper { fill: var(--sticky-paper); }
.bird-pupil { fill: var(--bird-ink, var(--magpie)); }
.bird-pleased {
  fill: none;
  stroke: var(--sticky-paper);
  stroke-linecap: round;
}

/* The notch's eye: black behind it, like the notch. */
.bird-notch-eye {
  --bird-ink: var(--notch);
  position: absolute;
  top: 50%;
  right: 16px;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  overflow: visible;
  pointer-events: none;
}

.bird-notch-eye.in-spot {
  position: static;
  width: 100%;
  height: 100%;
  margin: 0;
}

/* Things in the beak. Moved by transform only. */
.bird-carried {
  will-change: transform;
}

/* Fast asleep: the one thing that keeps moving, on the compositor, so the script can rest. */
@media (prefers-reduced-motion: no-preference) {
  .bird-peek.is-asleep .bird-icon {
    animation: bird-breathe 4.2s ease-in-out infinite;
  }
}

@keyframes bird-breathe {
  50% { translate: 0 1.2%; }
}