/* EulClavie dragonfly loader
   Layers are pixel-exact slices of ref/logo_dragonfly.png (no redrawn art).
   wings_left / wings_right / body share one 804x524 canvas, so they stack 1:1.
   Only transform + opacity are animated. */

.loader {
  --ldr-bg: #FBF8F5;
  --ldr-accent: #F05A28;
  --ldr-ink: #0F2739;
  --ldr-size: 240px;            /* dragonfly width */
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  background: var(--ldr-bg);
  opacity: 1; visibility: visible;
  transition: opacity .8s cubic-bezier(.22,.61,.36,1), visibility 0s linear 0s;
}
.loader.done {
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .8s cubic-bezier(.22,.61,.36,1), visibility 0s linear .8s;
}

.ldr { display: flex; flex-direction: column; align-items: center; gap: 18px; }

/* ---------- dragonfly ---------- */
.ldr-fly {
  position: relative;
  width: var(--ldr-size);
  aspect-ratio: 804 / 524;
  max-width: 70vw;
}
.ldr-bob {                      /* body + wings move together */
  position: absolute; inset: 0;
  perspective: 640px;
  perspective-origin: 50% 40%;
  animation: ldr-bob 1.6s ease-in-out infinite alternate;
  will-change: transform;
}
.ldr-bob img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block; user-select: none; -webkit-user-drag: none;
  pointer-events: none;
}
.ldr-body { z-index: 2; }
.ldr-wing { z-index: 1; will-change: transform; backface-visibility: visible; }
/* hinge = inner end of each wing pair, right at the globe edge */
.ldr-wing--l { transform-origin: 36% 34%; animation: ldr-flap-l 1.24s linear infinite; }
.ldr-wing--r { transform-origin: 63% 34%; animation: ldr-flap-r 1.24s linear infinite; }

/* 4 quick beats (~0.2s each) then a short glide, like a hovering dragonfly */
@keyframes ldr-flap-l {
  0%      { transform: rotateY(4deg);  animation-timing-function: cubic-bezier(.45,0,.55,1); }
  8%      { transform: rotateY(64deg); animation-timing-function: cubic-bezier(.45,0,.55,1); }
  16%     { transform: rotateY(2deg);  animation-timing-function: cubic-bezier(.45,0,.55,1); }
  24%     { transform: rotateY(62deg); animation-timing-function: cubic-bezier(.45,0,.55,1); }
  32%     { transform: rotateY(2deg);  animation-timing-function: cubic-bezier(.45,0,.55,1); }
  40%     { transform: rotateY(64deg); animation-timing-function: cubic-bezier(.45,0,.55,1); }
  48%     { transform: rotateY(2deg);  animation-timing-function: cubic-bezier(.45,0,.55,1); }
  56%     { transform: rotateY(58deg); animation-timing-function: cubic-bezier(.3,0,.3,1); }
  66%     { transform: rotateY(0deg);  animation-timing-function: ease-in-out; }
  84%     { transform: rotateY(9deg);  animation-timing-function: ease-in-out; }
  100%    { transform: rotateY(4deg); }
}
@keyframes ldr-flap-r {
  0%      { transform: rotateY(-4deg);  animation-timing-function: cubic-bezier(.45,0,.55,1); }
  8%      { transform: rotateY(-64deg); animation-timing-function: cubic-bezier(.45,0,.55,1); }
  16%     { transform: rotateY(-2deg);  animation-timing-function: cubic-bezier(.45,0,.55,1); }
  24%     { transform: rotateY(-62deg); animation-timing-function: cubic-bezier(.45,0,.55,1); }
  32%     { transform: rotateY(-2deg);  animation-timing-function: cubic-bezier(.45,0,.55,1); }
  40%     { transform: rotateY(-64deg); animation-timing-function: cubic-bezier(.45,0,.55,1); }
  48%     { transform: rotateY(-2deg);  animation-timing-function: cubic-bezier(.45,0,.55,1); }
  56%     { transform: rotateY(-58deg); animation-timing-function: cubic-bezier(.3,0,.3,1); }
  66%     { transform: rotateY(0deg);   animation-timing-function: ease-in-out; }
  84%     { transform: rotateY(-9deg);  animation-timing-function: ease-in-out; }
  100%    { transform: rotateY(-4deg); }
}
@keyframes ldr-bob {
  from { transform: translate3d(0, -4px, 0); }
  to   { transform: translate3d(0,  4px, 0); }
}

/* ---------- wordmark + progress ---------- */
.ldr-word {
  display: block;
  width: calc(var(--ldr-size) * .86);
  max-width: 62vw;
  height: auto;
  opacity: 0;
  transform: translate3d(0, 8px, 0);
  animation: ldr-in .9s cubic-bezier(.22,.61,.36,1) .25s forwards;
}
.ldr-bar {
  position: relative;
  width: calc(var(--ldr-size) * .7);
  height: 2px; border-radius: 2px;
  background: rgba(240, 90, 40, .14);
  overflow: hidden;
  opacity: 0;
  animation: ldr-in .9s cubic-bezier(.22,.61,.36,1) .45s forwards;
}
/* #loaderBar width is driven by the page script (0 to 100%) */
.ldr-bar i {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 0%;
  background: var(--ldr-accent);
  border-radius: inherit;
  transition: width .35s cubic-bezier(.22,.61,.36,1);
}
.ldr-pct {
  font: 600 11px/1 'DM Sans', system-ui, sans-serif;
  letter-spacing: .14em;
  color: rgba(15, 39, 57, .45);
  margin-top: -8px;
  opacity: 0;
  animation: ldr-in .9s cubic-bezier(.22,.61,.36,1) .55s forwards;
}
@keyframes ldr-in { to { opacity: 1; transform: translate3d(0, 0, 0); } }

/* ---------- reduced motion: gentle slow flap only ---------- */
@media (prefers-reduced-motion: reduce) {
  .ldr-bob { animation: none; }
  .ldr-wing--l { animation: ldr-soft-l 2.6s ease-in-out infinite alternate; }
  .ldr-wing--r { animation: ldr-soft-r 2.6s ease-in-out infinite alternate; }
  .ldr-word, .ldr-bar, .ldr-pct { animation: none; opacity: 1; transform: none; }
}
@keyframes ldr-soft-l { from { transform: rotateY(0deg); } to { transform: rotateY(26deg); } }
@keyframes ldr-soft-r { from { transform: rotateY(0deg); } to { transform: rotateY(-26deg); } }