/* Sturlese Field App home page: the logo's flight. Loaded after site.css. */
/* Logo: the pintail is its own layer. Reached for, it circles out over the marsh (toward
   you, round to the right, back behind) and turns into the wind to land on the wordmark. */
.lockup {
  --lockup-w: clamp(108px, 12vw, 164px); --orbit: calc(var(--lockup-w) * 0.9);
  position: relative; width: var(--lockup-w); aspect-ratio: 1154 / 1081; margin-bottom: clamp(18px, 3vw, 34px);
  perspective: 700px; perspective-origin: 40% 30%;
}
.lockup-script, .bird i { display: block; background: var(--cream); }
.lockup-script {
  position: absolute; left: 0; top: 70.12%; width: 100%; height: 29.88%; opacity: 0.94;
  -webkit-mask: url(sturlese-script.png) 0 0 / 100% 100% no-repeat; mask: url(sturlese-script.png) 0 0 / 100% 100% no-repeat;
}
/* Body and wings are separate masks that overlap at the shoulder; group opacity keeps the overlap invisible. */
.lockup-bird {
  position: absolute; left: 16.12%; top: 0; width: 73.74%; height: 73.27%; opacity: 0.94;
  perspective: 480px; will-change: transform, translate;
}
/* Own compositor layers: the moving parts glide on sub-pixels instead of snapping to whole pixels. */
.bird, .bird i { position: absolute; inset: 0; will-change: transform; }
.bird-body { -webkit-mask: url(pintail-body.png) 0 0 / 100% 100% no-repeat; mask: url(pintail-body.png) 0 0 / 100% 100% no-repeat; }
.bird-wing {
  transform-origin: 31% 57.8%;
  -webkit-mask: url(pintail-wing.png) 0 0 / 100% 100% no-repeat; mask: url(pintail-wing.png) 0 0 / 100% 100% no-repeat;
}
.lockup-bird.is-flying {
  animation: orbit 4.2s cubic-bezier(0.37, 0, 0.63, 1), climb 4.2s cubic-bezier(0.37, 0, 0.63, 1);
}
.lockup-bird.is-flying .bird { animation: bank 4.2s cubic-bezier(0.37, 0, 0.63, 1); }
/* Eight wingbeats (a quick downstroke, a slower recovery), then a one-second glide in with wings raised. */
.lockup-bird.is-flying .bird-wing { animation: flap 0.4s ease-in-out 8; }
.lockup-bird.is-flying .bird-body { animation: lift 0.4s ease-in-out 8; }
@keyframes flap { 40% { scale: 1 -0.5; } }
@keyframes lift { 40% { translate: 0 -3%; } }
@keyframes orbit {
  from { transform: translateX(var(--orbit)) rotateY(0deg) translateX(calc(-1 * var(--orbit))) rotateY(0deg); }
  to { transform: translateX(var(--orbit)) rotateY(360deg) translateX(calc(-1 * var(--orbit))) rotateY(-360deg); }
}
@keyframes climb { 60% { translate: 0 calc(-0.35 * var(--orbit)); } }
/* The bird keeps turning the same way round the circle: a half turn at the far point, the other half as it lands. */
@keyframes bank {
  0%, 38% { rotate: y 0deg; }
  62%, 84% { rotate: y 180deg; }
  100% { rotate: y 360deg; }
}
@media (prefers-reduced-motion: reduce) {
  .lockup-bird.is-flying, .lockup-bird.is-flying .bird, .lockup-bird.is-flying .bird i { animation: none; }
}