/* ===== Fusée « envol serein » — primschool.com =====
   Une entrée en scène unique (~3 s), puis un lent flottement.
   Aucune vibration. Uniquement transform / opacity. */
.rc-scene{
  position:relative;
  width:460px;max-width:100%;        /* adaptez la largeur à votre mise en page */
  margin:0 auto;
  aspect-ratio:924 / 961;isolation:isolate;
}
.rc-scene img,.rc-scene .rc-layer{
  position:absolute;inset:0;width:100%;height:100%;
  display:block;pointer-events:none;user-select:none;
}
/* Protège les calques des styles génériques du site (ex. « .hero-image img ») */
.rc-scene img{max-width:none;margin:0;padding:0;border:0;border-radius:0;box-shadow:none;filter:none;background:none}

/* ---------- Fumée ---------- */
.rc-smoke{transform-origin:50% 88%;animation:rc-smoke-in 2.2s cubic-bezier(.22,.7,.25,1) .1s both}
.rc-smoke img{transform-origin:50% 88%;animation:rc-smoke-drift 14s ease-in-out 2.4s infinite alternate}
@keyframes rc-smoke-in{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}
@keyframes rc-smoke-drift{from{transform:scale(1)}to{transform:scale(1.03) translateY(-.5%)}}

/* Bouffées : morceaux du nuage qui gonflent, s'étalent et s'estompent */
.rc-puffs{transform-origin:52% 62%;transition:transform 1.2s cubic-bezier(.2,.7,.2,1),opacity 1.2s}
.rc-scene .rc-puff{
  --mx:50%;--my:80%;--rx:26%;--ry:20%;--tx:0%;--ty:-3%;--s:1.2;--d:8s;--delay:0s;
  transform-origin:52% 62%;opacity:0;will-change:transform,opacity;
  -webkit-mask-image:radial-gradient(ellipse var(--rx) var(--ry) at var(--mx) var(--my),#000 25%,transparent 100%);
          mask-image:radial-gradient(ellipse var(--rx) var(--ry) at var(--mx) var(--my),#000 25%,transparent 100%);
  animation:rc-puff var(--d) cubic-bezier(.25,.6,.35,1) calc(1.2s + var(--delay)) infinite;
}
@keyframes rc-puff{
  0%{opacity:0;transform:translate(0,0) scale(1)}
  22%{opacity:.75}
  100%{opacity:0;transform:translate(var(--tx),var(--ty)) scale(var(--s))}
}
/* Bouffées « jet » : parcourent le panache dans l'axe de la flamme */
.rc-scene .rc-puff.rc-jet{transform-origin:59% 47%;animation-name:rc-jet}
@keyframes rc-jet{
  0%{opacity:0;transform:translate(0,0) scale(1)}
  25%{opacity:.8}
  100%{opacity:0;transform:translate(var(--tx),var(--ty)) scale(var(--s))}
}

/* ---------- Halo ---------- */
.rc-scene .rc-layer.rc-glow{
  inset:auto;left:42%;top:40%;width:26%;height:34%;
  background:radial-gradient(ellipse at 50% 38%,rgba(255,190,110,.9),rgba(255,140,70,.4) 45%,transparent 72%);
  mix-blend-mode:screen;filter:blur(6px);
  transform:rotate(30deg);opacity:0;
  animation:rc-glow-in 1.6s ease-out .9s forwards,rc-glow-pulse 4.5s ease-in-out 2.5s infinite alternate;
  transition:filter .9s;
}
@keyframes rc-glow-in{to{opacity:.5}}
@keyframes rc-glow-pulse{from{opacity:.5}to{opacity:.64}}

/* ---------- Étoiles : chacune scintille à son rythme, avec halo et éclat ---------- */
.rc-stars{animation:rc-fade 1.6s ease-out .4s both}
@keyframes rc-fade{from{opacity:0}to{opacity:1}}
.rc-tw{position:absolute;inset:0;pointer-events:none}
.rc-scene .rc-star{position:absolute;overflow:hidden;transform-origin:50% 50%;
  animation:rc-star var(--d) ease-in-out var(--delay) infinite}
.rc-scene .rc-star img{position:absolute;max-width:none}
@keyframes rc-star{
  0%,100%{opacity:.6;transform:scale(.92)}
  30%{opacity:1;transform:scale(1.08)}
  52%{opacity:.72;transform:scale(.96)}
  72%{opacity:1;transform:scale(1.04)}
}
.rc-halo{position:absolute;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle,rgba(255,244,205,.9),rgba(255,236,170,.28) 38%,transparent 68%);
  mix-blend-mode:screen;opacity:0;
  animation:rc-halo var(--d) ease-in-out var(--delay) infinite}
.rc-halo.rc-warm{background:radial-gradient(circle,rgba(255,170,110,.85),rgba(255,140,80,.25) 40%,transparent 68%)}
@keyframes rc-halo{
  0%,100%{opacity:0;transform:translate(-50%,-50%) scale(.3)}
  30%{opacity:.26;transform:translate(-50%,-50%) scale(.48)}
  52%{opacity:.04;transform:translate(-50%,-50%) scale(.34)}
  72%{opacity:.2;transform:translate(-50%,-50%) scale(.44)}
}
/* Éclat en croix, uniquement sur les plus grosses étoiles, au pic de brillance */
.rc-flare{position:absolute;transform:translate(-50%,-50%);opacity:0;
  background:
    linear-gradient(90deg,transparent,rgba(255,246,215,.95) 50%,transparent) center/100% 1.5px no-repeat,
    linear-gradient(0deg,transparent,rgba(255,246,215,.95) 50%,transparent) center/1.5px 100% no-repeat;
  animation:rc-flare var(--d) ease-in-out var(--delay) infinite}
@keyframes rc-flare{
  0%,27%,38%,100%{opacity:0;transform:translate(-50%,-50%) scale(.3) rotate(0deg)}
  32%{opacity:.55;transform:translate(-50%,-50%) scale(.7) rotate(20deg)}
}
/* une étoile sur deux seulement a droit à l'éclat */
.rc-tw:nth-child(odd) .rc-flare{display:none}

/* ---------- Fusée : entrée, flottement, léger surcroît de poussée au survol ---------- */
.rc-rise{animation:rc-rise 2.4s cubic-bezier(.16,.8,.24,1) .15s both}
@keyframes rc-rise{from{transform:translate(-1.6%,5.5%)}to{transform:translate(0,0)}}

.rc-lift{transform:translate(0,0);transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
.rc-float{
  transform-origin:60% 50%;
  /* trois mouvements indépendants, de durées différentes : le résultat paraît organique */
  animation:
    rc-float  5.6s ease-in-out 2.5s infinite alternate,   /* flottement vertical + dérive */
    rc-sway   8.4s ease-in-out 2.5s infinite alternate,   /* balancement lent */
    rc-tremor .46s linear 2.5s infinite;                  /* frémissement du moteur, à peine visible */
}
@keyframes rc-float{
  from{transform:translate(-.3%,.4%)}
  to  {transform:translate(.5%,-1.9%)}
}
@keyframes rc-sway{
  from{rotate:-.55deg}
  to  {rotate:.55deg}
}
@keyframes rc-tremor{
  0%,100%{translate:0 0}
  20%{translate:.09% -.07%}
  40%{translate:-.08% .06%}
  60%{translate:.1% .04%}
  80%{translate:-.06% -.08%}
}

/* Flamme : s'allume à l'arrivée, respire, s'allonge un peu au survol */
.rc-flame-boost{
  transform-origin:59.3% 47.3%;
  transform:rotate(30deg) scaleY(1) rotate(-30deg);
  transition:transform 1.1s cubic-bezier(.2,.7,.2,1);
}
.rc-scene .rc-flame{
  transform-origin:59.3% 47.3%;
  animation:rc-ignite 1.4s cubic-bezier(.2,.8,.3,1) .7s both,rc-breathe 2.6s ease-in-out 2.1s infinite alternate;
}
@keyframes rc-ignite{
  from{opacity:0;transform:rotate(30deg) scaleY(.35) rotate(-30deg)}
  to{opacity:1;transform:rotate(30deg) scaleY(1) rotate(-30deg)}
}
@keyframes rc-breathe{
  from{transform:rotate(30deg) scale(1,1) rotate(-30deg)}
  to{transform:rotate(30deg) scale(.97,1.07) rotate(-30deg)}
}

.rc-scene.is-boost .rc-puffs{transform:scale(1.05)}
.rc-scene.is-boost .rc-lift{transform:translate(.4%,-1.4%)}
.rc-scene.is-boost .rc-flame-boost{transform:rotate(30deg) scaleY(1.2) rotate(-30deg)}
.rc-scene.is-boost .rc-glow{filter:blur(6px) brightness(1.25)}

/* ---------- Réduire les animations : image fixe ---------- */
@media (prefers-reduced-motion:reduce){
  .rc-scene *{animation:none !important;transition:none !important}
  .rc-puff,.rc-halo,.rc-flare{display:none}
  .rc-scene .rc-layer.rc-glow{opacity:.5}
}