/* Grow Your Success — le logo CPE qui pousse.
   Ordre : colline, vague, tronc, feuilles une à une, cartable ; ensuite les
   feuilles balancent doucement en boucle.
   Animation CSS pure (transform / opacity / clip) et parallaxe en JS. */

.grow{
  position:relative;
  width:100%;
  max-width:520px;
  margin-inline:auto;
  aspect-ratio:1/1;
  isolation:isolate;
}
.grow-svg{width:100%;height:100%;overflow:visible}

/* --- halo derrière l'arbre --- */
.grow-halo{
  transform-box:view-box;transform-origin:627px 600px;
  animation:grow-halo 10s cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes grow-halo{
  0%,100%{transform:scale(1);opacity:.55}
  50%{transform:scale(1.06);opacity:.8}
}

/* --- le sol : la colline lime, puis la vague turquoise --- */
.grow-hill,.grow-wave{
  transform-box:fill-box;transform-origin:50% 100%;
  opacity:0;
  animation:grow-rise .7s cubic-bezier(.22,1,.36,1) var(--d,0s) forwards;
}
@keyframes grow-rise{
  from{opacity:0;transform:translateY(18px) scaleY(.7)}
  to{opacity:1;transform:translateY(0) scaleY(1)}
}

/* --- puis le tronc, les branches, le CPE et la flèche, révélés du bas vers le haut --- */
.grow-trunk-clip{
  y:1254px;height:0px;
  animation:grow-trunk 1.05s cubic-bezier(.22,1,.36,1) 1.15s forwards;
}
@keyframes grow-trunk{to{y:0px;height:1254px}}

/* --- puis les feuilles, une à une. Chacune surgit du point où elle rejoint
       sa branche (--ox/--oy) puis balance lentement autour de ce même point,
       pour que le feuillage ne soit jamais complètement figé. --- */
.grow-rleaf{
  transform-box:fill-box;
  transform-origin:var(--ox,50%) var(--oy,50%);
  opacity:0;
  animation:grow-badge .5s cubic-bezier(.2,1.4,.3,1) var(--d,2.7s) forwards,
            grow-sway var(--sd,6s) ease-in-out calc(var(--d,2.7s) + .5s) infinite;
}
@keyframes grow-sway{
  0%,100%{transform:rotate(0deg)}
  50%{transform:rotate(var(--sw,2deg))}
}

/* --- le cartable, en dernier --- */
.grow-case{
  transform-box:fill-box;transform-origin:center;opacity:0;
  animation:grow-badge .55s cubic-bezier(.2,1.4,.3,1) var(--d,5s) forwards;
}

@keyframes grow-badge{
  0%{opacity:0;transform:scale(.3)}
  70%{opacity:1;transform:scale(1.1)}
  100%{opacity:1;transform:scale(1)}
}

/* --- particules qui montent, en boucle --- */
.grow-mote{
  transform-box:fill-box;transform-origin:center;
  opacity:0;
  animation:grow-mote var(--dur,8s) ease-in-out var(--d,2s) infinite;
}
@keyframes grow-mote{
  0%{opacity:0;transform:translate(0,0) scale(.5)}
  12%{opacity:.85}
  70%{opacity:.45}
  100%{opacity:0;transform:translate(var(--tx,20px),var(--ty,-300px)) scale(1.15)}
}

/* --- couches de parallaxe pilotées par le JS --- */
.grow-layer{transition:transform .5s cubic-bezier(.22,1,.36,1)}
.grow[data-parallax="on"] .grow-layer{
  transform:translate3d(calc(var(--px,0) * var(--depth,1)),calc(var(--py,0) * var(--depth,1)),0);
}

@media (prefers-reduced-motion:reduce){
  .grow *{animation:none !important;opacity:1 !important;transform:none !important}
  .grow-trunk-clip{y:0px !important;height:1254px !important}
}

/* « JDM 2026 » remplace le sigle CPE et apparaît juste après le tronc, comme
   lui. Le mot suit la colline : la taille et le départ sont calés pour qu'il
   parte du même endroit que le sigle et s'arrête avant le tronc. */
.grow-word{font-family:"Poppins",var(--font-display),sans-serif;font-weight:700;
  font-size:74px;
  opacity:0;animation:grow-word .5s var(--ease) var(--d) forwards}
@keyframes grow-word{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.grow-word{animation:none;opacity:1}}