/* yanaweb · home v3 : effets fusée (décor seulement, la page est complète sans ce fichier ni son script) */
.fusee { pointer-events: none; --fz-body: #0F3A28; --fz-line: #0B1A11; }
.fusee svg { display: block; width: 100%; height: auto; overflow: visible; }
.fz-body { fill: var(--fz-body); }
.fz-accent { fill: #E34A1C; }
.fz-hublot { fill: #EDE8D9; stroke: var(--fz-line); stroke-width: 3; }
.fz-tuyere { fill: var(--fz-line); }
.fz-flamme { transform-box: fill-box; transform-origin: 50% 0; animation: fz-brule .14s linear infinite alternate; }
.fz-flamme .f1 { fill: #FF7B47; }
.fz-flamme .f2 { fill: #EDE8D9; }
@keyframes fz-brule {
  from { transform: scaleY(calc(var(--burn, 1) * .82)) scaleX(.94); }
  to { transform: scaleY(calc(var(--burn, 1) * 1.14)) scaleX(1.04); }
}

/* 1. La fusée du hero : elle décolle au chargement, plane, puis file vers le haut quand on fait défiler */
.fusee-hero { position: absolute; z-index: 2; top: clamp(-4px, .4vw, 8px); right: calc(var(--gut) + clamp(8px, 4vw, 72px)); width: clamp(64px, 6.6vw, 100px); transform: translate3d(0, var(--fly, 0px), 0); will-change: transform; }
.fusee-hero .fusee-in { opacity: 0; transform: translateY(90px) rotate(9deg); }
.fusee-hero.is-go .fusee-in { animation: fz-decolle 1.5s cubic-bezier(.18, .72, .2, 1) .25s forwards, fz-plane 5.2s ease-in-out 1.75s infinite; }
@keyframes fz-decolle {
  0% { opacity: 0; transform: translateY(90px) rotate(9deg); }
  18% { opacity: 1; }
  100% { opacity: 1; transform: translateY(0) rotate(9deg); }
}
@keyframes fz-plane {
  0%, 100% { opacity: 1; transform: translateY(0) rotate(9deg); }
  50% { opacity: 1; transform: translateY(-9px) rotate(7deg); }
}
.fusee-trainee { position: absolute; left: 50%; top: 100%; display: grid; gap: 9px; justify-items: center; margin-top: 6px; transform: translateX(-50%) rotate(9deg); transform-origin: 50% -80px; }
.fusee-trainee i { display: block; border-radius: 50%; background: var(--fz-line); opacity: 0; animation: fz-fume 1.6s ease-out infinite; }
.fusee-trainee i:nth-child(1) { width: 7px; height: 7px; }
.fusee-trainee i:nth-child(2) { width: 5px; height: 5px; animation-delay: .22s; }
.fusee-trainee i:nth-child(3) { width: 3px; height: 3px; animation-delay: .44s; }
@keyframes fz-fume {
  0% { opacity: 0; transform: translateY(-10px) scale(.6); }
  25% { opacity: .28; }
  100% { opacity: 0; transform: translateY(14px) scale(1.5); }
}

/* 2. La fusée de progression : elle monte le long du bord gauche à mesure qu'on descend la page */
.fusee-rail { position: fixed; z-index: 40; left: 26px; top: calc(var(--nav-h, 64px) + 30px); bottom: 30px; width: 18px; display: none; --fz-body: #EDE8D9; }
.fusee-rail::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; border-left: 2px dotted rgba(110, 113, 118, .45); transform: translateX(-1px); }
.fusee-rail .fusee-in { position: absolute; left: 0; width: 100%; bottom: calc(var(--t, 0) * (100% - 34px)); }
.fusee-rail .fz-body { stroke: var(--fz-line); stroke-width: 5; }
@media (min-width: 1280px) { .fusee-rail { display: block; } }

/* 3. Les boutons : la flèche prend son envol au survol */
.btn > span[aria-hidden="true"] { display: inline-block; transition: transform .32s cubic-bezier(.2, .8, .2, 1); }
.btn:hover > span[aria-hidden="true"], .btn:focus-visible > span[aria-hidden="true"] { transform: translate(4px, -4px) rotate(-45deg); }

@media (max-width: 860px) {
  .fusee-hero { width: 34px; top: 14px; right: var(--gut); }
  .fusee-trainee { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .fusee-hero { transform: none; }
  .fusee-hero .fusee-in, .fusee-hero.is-go .fusee-in { opacity: 1; transform: rotate(9deg); animation: none; }
  .fz-flamme, .fusee-trainee i { animation: none; }
  .fusee-trainee { display: none; }
  .btn > span[aria-hidden="true"] { transition: none; }
}