/* leaf-fx.css v3 — 8 modes, dark plasma-green theme.
   Colors: plasma green #2BE8A0 / rgba(43,232,160,…)
           plasma teal  #2FD9D9 / rgba(47,217,217,…)
   Modes: calm | drift | pulse | shake | spin | bounce | storm | rave */

/* ── Stage + 3D ── */
.leaf-stage{
  position:relative;display:inline-block;flex-shrink:0;
  perspective:620px;cursor:pointer;outline:none;-webkit-tap-highlight-color:transparent;
}
.leaf-3d{
  position:relative;width:100%;height:100%;transform-style:preserve-3d;
  transition:transform .15s var(--ease-out);
  will-change:transform;
}
.leaf-float{
  position:relative;width:100%;height:100%;transform-origin:50% 82%;
  animation:lf-float 2.5s ease-in-out infinite;
}
.leaf-stage .pp-leaf-anim{
  position:relative;width:100%!important;height:100%!important;transform-style:preserve-3d;
  animation:pp-leaf-breathe 3.2s ease-in-out infinite;
}
.leaf-stage:focus-visible{box-shadow:0 0 0 3px rgba(43,232,160,.5);border-radius:14px}

/* Login leaf — faster + more intense */
.leaf-stage[data-login] .leaf-float{animation-duration:1.8s!important}
.leaf-stage[data-login] .pp-leaf-anim{animation-duration:2.4s!important}

/* ── BASE float (calm) ── */
@keyframes lf-float{
  0%,100%{transform:translateY(0) rotate(0deg)}
  35%{transform:translateY(-15px) rotate(-4deg)}
  65%{transform:translateY(-6px) rotate(2.5deg)}
}

/* ── MODE drift: lazy figure-8 pendulum ── */
.leaf-stage[data-mode="drift"] .leaf-float{animation:lf-drift 7s ease-in-out infinite}
@keyframes lf-drift{
  0%,100%{transform:translate(0,0) rotate(0deg)}
  20%{transform:translate(9px,-14px) rotate(4.5deg)}
  45%{transform:translate(2px,-20px) rotate(1.5deg)}
  65%{transform:translate(-9px,-12px) rotate(-4.5deg)}
  82%{transform:translate(-3px,-5px) rotate(-1.5deg)}
}

/* ── MODE pulse: sharp heartbeat then long rest ── */
.leaf-stage[data-mode="pulse"] .pp-leaf-anim{
  animation:lf-pulse 4s ease-in-out infinite,pp-leaf-breathe 3.2s ease-in-out infinite;
}
@keyframes lf-pulse{
  0%,34%,100%{transform:scale(1);filter:brightness(1)}
  5%{transform:scale(1.28);filter:brightness(1.45) drop-shadow(0 0 20px rgba(43,232,160,.95))}
  12%{transform:scale(0.82);filter:brightness(0.88)}
  19%{transform:scale(1.16);filter:brightness(1.22) drop-shadow(0 0 12px rgba(43,232,160,.65))}
  27%{transform:scale(0.96)}
  34%{transform:scale(1)}
}

/* ── MODE shake: rattlesnake tremor then freeze ── */
.leaf-stage[data-mode="shake"] .leaf-float{animation:lf-shake 3s ease-in-out infinite}
.leaf-stage[data-mode="shake"] .pp-leaf-anim{animation:pp-leaf-breathe 3.2s ease-in-out infinite}
@keyframes lf-shake{
  0%,42%,100%{transform:translateX(0) rotate(0deg)}
  3%{transform:translateX(-11px) rotate(-5.5deg)}
  7%{transform:translateX(11px) rotate(5.5deg)}
  11%{transform:translateX(-9px) rotate(-4.5deg)}
  15%{transform:translateX(9px) rotate(4.5deg)}
  19%{transform:translateX(-6px) rotate(-3deg)}
  23%{transform:translateX(6px) rotate(3deg)}
  27%{transform:translateX(-2.5px) rotate(-1.2deg)}
  31%{transform:translateX(2.5px) rotate(1.2deg)}
  36%{transform:translateX(0) rotate(0deg)}
}

/* ── MODE spin: 3D coin flip ── */
.leaf-stage[data-mode="spin"] .pp-leaf-anim{
  animation:lf-spin 2.3s linear infinite,pp-leaf-breathe 3.2s ease-in-out infinite;
}
@keyframes lf-spin{0%{transform:rotateY(0deg)}100%{transform:rotateY(360deg)}}

/* ── MODE bounce: squash & stretch ── */
.leaf-stage[data-mode="bounce"] .leaf-float{animation:lf-bounce .9s var(--ease-out) infinite}
@keyframes lf-bounce{
  0%,100%{transform:translateY(0) scale(1,1)}
  25%{transform:translateY(-20px) scale(.89,1.13)}
  50%{transform:translateY(0) scale(1.13,.87)}
  70%{transform:translateY(-7px) scale(.97,1.04)}
}

/* ── MODE storm: wild 3D tumble then settle ── */
.leaf-stage[data-mode="storm"] .pp-leaf-anim{animation:lf-storm 4s ease-in-out infinite}
@keyframes lf-storm{
  0%,55%,100%{transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg)}
  12%{transform:rotateX(42deg) rotateY(138deg) rotateZ(-18deg)}
  25%{transform:rotateX(-26deg) rotateY(268deg) rotateZ(14deg)}
  38%{transform:rotateX(18deg) rotateY(360deg) rotateZ(-8deg)}
  50%{transform:rotateX(0deg) rotateY(360deg) rotateZ(0deg)}
}

/* ── MODE rave: rainbow + fast spin + rapid bounce ── */
.leaf-stage[data-mode="rave"] .pp-leaf-anim{animation:lf-spin .95s linear infinite,lf-rave 1.8s linear infinite}
.leaf-stage[data-mode="rave"] .leaf-float{animation:lf-bounce .48s ease-in-out infinite}
.leaf-stage[data-mode="rave"] .pp-leaf-anim::before{animation:pp-aura-pulse .75s ease-in-out infinite}
@keyframes lf-rave{
  0%{filter:hue-rotate(0deg) saturate(2) brightness(1.2) drop-shadow(0 0 26px rgba(43,232,160,.95))}
  100%{filter:hue-rotate(360deg) saturate(2) brightness(1.2) drop-shadow(0 0 26px rgba(43,232,160,.95))}
}

/* ── Click FX: plasma sparks + ripple ── */
.leaf-spark{
  position:absolute;left:50%;top:46%;border-radius:50%;pointer-events:none;z-index:3;
  transform:translate(-50%,-50%);background:radial-gradient(circle,#7CF5C4,#2BE8A0);
  animation:lf-spark .72s var(--ease-out) forwards;
}
@keyframes lf-spark{
  0%{opacity:1;transform:translate(-50%,-50%) translate(0,0) scale(.28)}
  100%{opacity:0;transform:translate(-50%,-50%) translate(var(--dx),var(--dy)) scale(1.1)}
}
.leaf-ripple{
  position:absolute;left:50%;top:48%;width:100%;height:100%;border-radius:50%;
  pointer-events:none;z-index:2;border:2.5px solid rgba(43,232,160,.6);
  animation:lf-ripple .65s ease-out forwards;transform:translate(-50%,-50%) scale(.3);
}
@keyframes lf-ripple{
  0%{opacity:.9;transform:translate(-50%,-50%) scale(.3)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(2.5)}
}

/* ── Mode tag — plasma dark style ── */
.leaf-mode-tag{
  position:absolute;left:50%;bottom:calc(100% + 5px);transform:translateX(-50%);
  font:700 10px/1 'Saira',system-ui,sans-serif;letter-spacing:.02em;color:var(--primary,#2BE8A0);
  background:rgba(11,25,19,.92);border:1px solid rgba(43,232,160,.35);border-radius:999px;
  padding:3px 8px;white-space:nowrap;pointer-events:none;opacity:0;z-index:200;
  box-shadow:0 4px 14px rgba(43,232,160,.18);cursor:default;
}
.leaf-mode-tag.show{animation:lf-tag 1.5s var(--ease-out) forwards}
@keyframes lf-tag{
  0%{opacity:0;transform:translateX(-50%) translateY(4px)}
  16%{opacity:1;transform:translateX(-50%) translateY(0)}
  72%{opacity:1;transform:translateX(-50%) translateY(0)}
  100%{opacity:0;transform:translateX(-50%) translateY(-3px)}
}

/* ── GrowFlow wordmark FX ──
   "Grow" = static span · "Flow" = <b> with animated plasma gradient  */
.gf-mark{cursor:default}
.gf-name{cursor:default;user-select:none}
.gf-name b{user-select:none}

/* "Flow" — plasma green → teal wave */
.gf-name b{
  background:linear-gradient(90deg,#2BE8A0 0%,#2BE8A0 33%,#2FD9D9 66%,#2BE8A0 100%);
  background-size:300% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:gf-flow 4s ease-in-out infinite;
  display:inline-block;
}
@keyframes gf-flow{
  0%,100%{background-position:0% 50%}
  50%{background-position:100% 50%}
}

/* "Grow" word span — periodic bloom triggered by JS */
.gf-grow-word{display:inline-block;user-select:none}
.gf-grow-word.blooming{animation:gf-bloom .65s var(--ease-out) both}
@keyframes gf-bloom{
  0%{transform:scale(.84) translateY(4px);opacity:.6}
  58%{transform:scale(1.08) translateY(-2px)}
  100%{transform:scale(1) translateY(0);opacity:1}
}

@media (prefers-reduced-motion:reduce){
  .leaf-float,.leaf-stage .pp-leaf-anim,
  .gf-name b,.gf-grow-word,.leaf-mode-tag.show{animation:none!important}
  .leaf-3d{transition:none}
}