/* ============================================================
   TCA WEBSITE — SHARED AMBIENT SCENE EFFECTS
   Three reusable motion primitives, pulled out of hero.css so
   about-scene can use the exact same engine instead of a second,
   slightly-different copy drifting out of sync over time:

     .fx-dandelion  — floating dandelion-seed sprites (drift + bob + spin)
     .fx-leaf       — falling leaves (existing hero technique, unchanged)
     .blade         — individually-swaying procedural grass (existing
                       hero technique, unchanged — moved here verbatim)

   Each scene still owns its OWN container element for z-index and
   positioning (.hero-dandelions vs .about-dandelions, etc.) — only
   the per-sprite animation lives here. See hero.css / about-scene.css
   for the container placement in each scene.
   ============================================================ */

/* ---- Floating dandelion seeds ----
   Per-instance custom props (set inline by PHP, same pattern as
   .hero-leaf): --x/--y start position, --dur/--delay timing, --size,
   --driftX total horizontal travel, --bob vertical wobble amplitude,
   --rot total rotation. Motion is a slow upward-and-sideways float
   with a gentle sine-like wobble, NOT a straight line — real
   dandelion seeds catch the wind and drift unevenly. */
.fx-dandelion {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--size);
  height: var(--size);
  opacity: 0;
  pointer-events: none;
  animation-name: fxDandelionFloat;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: var(--dur);
  animation-delay: var(--delay);
  will-change: transform, opacity;
}
.fx-dandelion img { width: 100%; height: 100%; display: block; }

@keyframes fxDandelionFloat {
  0%   { transform: translate(0, 0) rotate(0deg);
         opacity: 0; }
  8%   { opacity: 0.9; }
  25%  { transform: translate(calc(var(--driftX) * 0.28), calc(var(--bob) * -1))
                     rotate(calc(var(--rot) * 0.25)); }
  50%  { transform: translate(calc(var(--driftX) * 0.55), calc(var(--bob) * 0.65))
                     rotate(calc(var(--rot) * 0.5)); }
  75%  { transform: translate(calc(var(--driftX) * 0.8), calc(var(--bob) * -0.55))
                     rotate(calc(var(--rot) * 0.78)); }
  92%  { opacity: 0.82; }
  100% { transform: translate(var(--driftX), calc(var(--bob) * -1.3)) rotate(var(--rot));
         opacity: 0; }
}

/* ---- Falling leaves (moved verbatim from hero.css — same bezier
   leaf shape, same sway-then-reverse fall) ---- */
.fx-leaf {
  position: absolute;
  top: -5%;
  left: var(--x);
  width: var(--size);
  height: var(--size);
  opacity: 0;
  animation-name: fxLeafFall;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-duration: var(--dur);
  animation-delay: var(--delay);
}
.fx-leaf svg { width: 100%; height: 100%; display: block; transform: rotate(var(--rot0)); }

@keyframes fxLeafFall {
  0%   { transform: translate(0, 0) rotate(var(--rot0));   opacity: 0; }
  6%   { opacity: 0.92; }
  50%  { transform: translate(var(--sway), 55vh) rotate(var(--rot1)); }
  92%  { opacity: 0.85; }
  100% { transform: translate(calc(var(--sway) * -1), 92vh) rotate(var(--rot2)); opacity: 0; }
}

/* ---- Individually-swaying grass blades (moved verbatim from
   hero.css — spawned by parallax.js's spawnGrass() into any empty
   container passed to it) ---- */
.blade {
  position: absolute;
  bottom: 0;
  left: var(--x);
  width: var(--w);
  height: var(--h);
  transform-origin: bottom center;
  animation: bladeSway var(--dur) ease-in-out infinite;
  animation-delay: var(--delay);
}
.blade svg { width: 100%; height: 100%; display: block; overflow: visible; }

@keyframes bladeSway {
  0%, 100% { transform: rotate(var(--rot-a)); }
  50%      { transform: rotate(var(--rot-b)); }
}

@media (prefers-reduced-motion: reduce) {
  .fx-dandelion, .fx-leaf, .blade {
    animation: none !important;
  }
  .fx-dandelion, .fx-leaf { opacity: 0 !important; }
}