/* ══════════════════════════════════════════════════════════════════════════
   THE SMALL PLANE, 8 Oct 2026. Pair with js/plane.js. Same file on both sites
   (build/academy/site/css/plane.css and build/landing/site/css/plane.css):
   🔴 change both.

   Founder, 8 Oct 2026: «i want anything that takes some time to load be
   represented with the flying plane … and use it to show off the loading of
   the sections of the page». The big plane (css/loader.css) covers the whole
   screen between pages. This one sits INSIDE a section while one thing loads:
   the booking calendar, a photo, the video.

   The same plane glyph and the same dotted trail as the big scene, so the two
   read as one family. It always flies left to right (his rule), loops while
   the wait lasts, and is gone the moment the thing is ready.

   Pure CSS motion: no script runs per frame. js/plane.js only adds and removes
   the element, and pauses it while it is off screen.
   ══════════════════════════════════════════════════════════════════════════ */
.mplane{
  --mp-ink:#2E1128;                 /* the plane on paper */
  --mp-trail:#9A630F;               /* gold that clears 4.5:1 on paper */
  --mp-guide:rgba(46,17,40,.16);
  --mp-txt:#5A4453;
  display:inline-flex;flex-direction:column;align-items:center;gap:8px;
  pointer-events:none;-webkit-user-select:none;user-select:none;
}
/* on the dark plum ground */
.mplane--light{--mp-ink:#FCF0E5;--mp-trail:#F0B760;--mp-guide:rgba(255,255,255,.2);--mp-txt:rgba(244,234,230,.8)}

.mplane__sky{position:relative;width:150px;height:46px;flex:none}
.mplane__sky svg{position:absolute;left:0;top:0;width:150px;height:46px;overflow:visible}
.mplane__guide{fill:none;stroke:var(--mp-guide);stroke-width:1.5;stroke-linecap:round;stroke-dasharray:1 7}
.mplane__trail{fill:none;stroke:var(--mp-trail);stroke-width:2.6;stroke-linecap:round;stroke-dasharray:1 7}
/* the trail is drawn behind the plane: a wipe from the left, in step with it */
.mplane__trailbox{position:absolute;left:0;top:0;width:150px;height:46px;
  clip-path:inset(-4px 100% -4px 0);animation:mpTrail 2.6s cubic-bezier(.5,.08,.4,1) infinite}
.mplane__plane{position:absolute;left:0;top:0;width:22px;height:22px;color:var(--mp-ink);
  offset-path:path('M 6 38 C 40 4, 110 4, 144 38');offset-rotate:auto 45deg;
  filter:drop-shadow(0 3px 3px rgba(46,17,40,.22));
  animation:mpFly 2.6s cubic-bezier(.5,.08,.4,1) infinite}
.mplane--light .mplane__plane{filter:drop-shadow(0 3px 4px rgba(0,0,0,.35))}
.mplane__plane svg{display:block;width:100%;height:100%}
.mplane__t{margin:0;font:600 14px/1.35 "Raleway",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  color:var(--mp-txt);text-align:center;max-width:26ch}

/* smaller, for a button or a line of text */
.mplane--s .mplane__sky,.mplane--s .mplane__sky svg,.mplane--s .mplane__trailbox{width:96px;height:30px}
.mplane--s .mplane__plane{width:16px;height:16px;offset-path:path('M 4 25 C 26 3, 70 3, 92 25')}
.mplane--s .mplane__t{font-size:13px}
.mplane--row{flex-direction:row;gap:10px}

@keyframes mpFly{
  0%{offset-distance:0%;opacity:0}
  9%{opacity:1}
  82%{opacity:1}
  100%{offset-distance:100%;opacity:0}
}
@keyframes mpTrail{
  0%{clip-path:inset(-4px 100% -4px 0);opacity:1}
  82%{opacity:1}
  100%{clip-path:inset(-4px 0 -4px 0);opacity:0}
}
/* off screen it rests (js/plane.js toggles is-anim): no work for what nobody sees */
.mplane:not(.is-anim) .mplane__plane,.mplane:not(.is-anim) .mplane__trailbox{animation-play-state:paused}

/* ── over a photo or a video while it loads ─────────────────────────────── */
/* :where() so it never outranks a frame that is already positioned (a photo print, the album board) */
:where(.has-mplane){position:relative}
.mplane--over{position:absolute;inset:0;z-index:3;justify-content:center;
  transition:opacity .35s ease}
.mplane--over.is-gone{opacity:0}
/* the photo waits under the plane, then comes up softly; only while js/plane.js
   says so (no script: the photo simply shows, as before) */
.has-mplane.is-wait img{opacity:0}
.has-mplane img{transition:opacity .5s ease}

@media (prefers-reduced-motion:reduce){
  .mplane__plane{animation:none;offset-distance:58%;opacity:1}
  .mplane__trailbox{animation:none;clip-path:inset(-4px 42% -4px 0)}
  .has-mplane img,.mplane--over{transition:none}
}