/* ===========================================================================
   FENNEC ANIMATION · V28 — IntersectionObserver-driven (works everywhere)
   Each fennec element starts at opacity 0; JS adds `.is-visible` when it
   enters viewport, which triggers the entry animation.
   Continuous idle animations (bounce, breathe, sway, strut) play on the
   inner <img> with time-based loops — independent of scroll.
   =========================================================================== */

/* ============ HERO · small burrow right of "Votre talent" (65% smaller) ============ */
.fn-hero { position: relative; overflow: hidden; }
.fn-hero-burrow {
  position: absolute;
  top: 14%;
  left: 32%;
  /* 65% smaller than the previous 55-90px */
  width: clamp(20px, 2.3vw, 32px);
  height: auto;
  pointer-events: none;
  overflow: visible;
  z-index: 3;
  opacity: 0;
  transform: translateY(10px) scale(0.92);
  transition: opacity .6s cubic-bezier(.32, .72, .42, 1),
              transform .6s cubic-bezier(.32, .72, .42, 1);
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5));
}
.fn-hero-burrow.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.fn-hero-burrow img {
  display: block; width: 100%; height: auto;
  animation: heroBurrowBreathe 3.6s ease-in-out infinite;
}
@keyframes heroBurrowBreathe {
  0%, 100% { transform: scale(1)    translateY(0); }
  50%      { transform: scale(1.05) translateY(-1px); }
}

/* ============ SERVICES · run traverses left → right when section is visible ============ */
.fn-section#services { position: relative; overflow: hidden; } /* clip the fennec inside the section */
.fn-services-runner {
  position: absolute;
  left: 0; right: 0; bottom: -36px;
  height: clamp(110px, 14vw, 180px);
  pointer-events: none;
  overflow: visible;
  z-index: 2;
}
.fn-services-runner__img {
  position: absolute;
  height: 100%;
  width: auto;
  bottom: 0;
  left: -20%;
  /* Source image faces right naturally — no mirror */
  opacity: 0;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.55));
  /* Idle strut runs always; the traverse runs when wrapper has .is-visible */
  animation: servicesRunStrut 0.5s ease-in-out infinite;
  will-change: transform, left, opacity;
}
.fn-services-runner.is-visible .fn-services-runner__img {
  animation:
    servicesRunStrut 0.5s ease-in-out infinite,
    servicesRunTraverse 6s cubic-bezier(.32, .42, .42, 1) forwards;
}
@keyframes servicesRunTraverse {
  0%   { opacity: 0; left: -20%; }
  10%  { opacity: 1; left: -8%;  }
  90%  { opacity: 1; left: 100%; }
  100% { opacity: 0; left: 115%; }
}
@keyframes servicesRunStrut {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}

/* ============ À PROPOS · static slides in from right at value 02 level ============ */
#about { position: relative; overflow: hidden; }
.fn-values-static {
  position: absolute;
  top: 50%;
  right: 6%;
  width: clamp(45px, 5vw, 70px);
  height: auto;
  pointer-events: none;
  overflow: visible;
  z-index: 2;
  opacity: 0;
  transform: translateX(60px);
  transition: opacity .7s cubic-bezier(.32, .72, .42, 1),
              transform .7s cubic-bezier(.32, .72, .42, 1);
  filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.55));
}
.fn-values-static.is-visible {
  opacity: 1;
  transform: translateX(0);
}
.fn-values-static img {
  display: block; width: 100%; height: auto;
  animation: valuesStaticIdle 4.2s ease-in-out infinite;
}
@keyframes valuesStaticIdle {
  0%, 100% { transform: translateY(0)   rotate(0deg); }
  25%      { transform: translateY(-2px) rotate(0.6deg); }
  50%      { transform: translateY(0)   rotate(0deg); }
  75%      { transform: translateY(-2px) rotate(-0.6deg); }
}

/* ============ FOOTER · jump fennec at bottom of page, continuous bouncing ============ */
.fn-footer { position: relative; overflow: hidden; }
.fn-footer-jump {
  position: absolute;
  top: -80px;
  right: 8%;
  width: clamp(90px, 11vw, 150px);
  height: auto;
  pointer-events: none;
  overflow: visible;
  z-index: 3;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .8s cubic-bezier(.34, 1.2, .42, 1),
              transform .8s cubic-bezier(.34, 1.2, .42, 1);
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.6));
}
.fn-footer-jump.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.fn-footer-jump img {
  display: block; width: 100%; height: auto;
  animation: footerJumpBounce 2.4s cubic-bezier(.34, 1.2, .42, 1) infinite;
}
@keyframes footerJumpBounce {
  0%   { transform: translateY(0)    scale(1);    }
  18%  { transform: translateY(8px)  scale(0.98); }   /* squat */
  40%  { transform: translateY(-32px) scale(1.02); }  /* peak */
  60%  { transform: translateY(6px)  scale(0.98); }   /* landing */
  72%  { transform: translateY(0)    scale(1);    }
  100% { transform: translateY(0)    scale(1);    }
}

/* ============ ACCESSIBILITY ============ */
@media (prefers-reduced-motion: reduce) {
  .fn-hero-burrow, .fn-hero-burrow img,
  .fn-services-runner__img,
  .fn-values-static, .fn-values-static img,
  .fn-footer-jump, .fn-footer-jump img {
    animation: none !important;
    transition: none !important;
    opacity: 0.85 !important;
    transform: none !important;
  }
  .fn-hero-burrow.is-visible, .fn-values-static.is-visible, .fn-footer-jump.is-visible {
    opacity: 0.85 !important;
  }
}

/* ============ RESPONSIVE ============ */
@media (max-width: 900px) {
  .fn-hero-burrow       { top: 16%; left: 30%; width: 24px; }
  .fn-values-static     { top: 50%; right: 4%; width: 50px; }
  .fn-footer-jump       { right: 5%; width: 100px; }
}
@media (max-width: 540px) {
  .fn-hero-burrow       { display: none; }
  .fn-values-static     { display: none; }
  .fn-services-runner   { height: 90px; }
  .fn-footer-jump       { width: 80px; top: -60px; }
}