/* animations.css — мягкие цветочные движения */
@layer motion {

  @keyframes bloomIn {
    from { opacity: 0; transform: scale(.55) rotate(-14deg); }
    to   { opacity: 1; transform: none; }
  }

  @keyframes stemDraw {
    from { stroke-dashoffset: 320; }
    to   { stroke-dashoffset: 0; }
  }

  @keyframes driftUp {
    0%   { transform: translate3d(0, 0, 0) rotate(0deg); opacity: 0; }
    12%  { opacity: var(--o, .5); }
    88%  { opacity: var(--o, .5); }
    100% { transform: translate3d(var(--dx, 20px), -120px, 0) rotate(220deg); opacity: 0; }
  }

  @keyframes petalFall {
    0%   { transform: translate3d(0, -8%, 0) rotate(0deg); opacity: 0; }
    8%   { opacity: .55; }
    92%  { opacity: .45; }
    100% { transform: translate3d(var(--dx, 30px), 108%, 0) rotate(var(--rot, 320deg)); opacity: 0; }
  }

  @keyframes revealUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: none; }
  }

  @keyframes sway {
    0%, 100% { transform: rotate(-1.6deg); }
    50%      { transform: rotate(1.6deg); }
  }

  @keyframes bump {
    0% { transform: scale(1); } 40% { transform: scale(1.32); } 100% { transform: scale(1); }
  }

  @keyframes rippleOut {
    from { transform: translate(-50%, -50%) scale(1); opacity: .55; }
    to   { transform: translate(-50%, -50%) scale(26); opacity: 0; }
  }

  @keyframes leafIn {
    from { opacity: 0; transform: rotateX(-40deg) translateY(-4px); }
    to   { opacity: 1; transform: none; }
  }

  @keyframes hueBreath {
    from { opacity: .45; }
    to   { opacity: .8; }
  }

  /* --------------------------------------------------------- утилиты */

  .reveal { opacity: 0; }
  .reveal.is-in { animation: revealUp var(--t-slow) var(--ease) forwards; }

  /* раскрытие соцветий в hero и в модалке */
  .bloom-unit {
    transform-box: fill-box;
    transform-origin: center;
    animation: bloomIn 760ms var(--ease) both;
    animation-delay: var(--d, 0ms);
  }

  .stems { stroke-dasharray: 320; animation: stemDraw 1400ms var(--ease) both 240ms; }

  /* дыхание фона */
  .pollen, .fallzone { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
  .pollen__g, .fallzone__p {
    position: absolute; border-radius: 50%; background: var(--petal-deep);
    filter: blur(.3px);
  }
  .pollen__g { animation: driftUp var(--dur, 22s) linear infinite; animation-delay: var(--delay, 0s); }
  .fallzone__p { border-radius: 60% 40% 55% 45%; background: var(--petal); animation: petalFall var(--dur, 26s) linear infinite; animation-delay: var(--delay, 0s); }

  /* колыхание иллюстраций в сетке */
  .sway { animation: sway 7s var(--ease-soft) infinite; animation-delay: var(--delay, 0s); transform-origin: 50% 92%; }
  .sway--slow { animation-duration: 9s; }

  /* раскрытие строк состава */
  .comp__row { animation: leafIn 520ms var(--ease) both; animation-delay: calc(var(--i, 0) * 70ms + 120ms); }

  /* ------------------------------------------------------------ reduced motion */
  @media (prefers-reduced-motion: reduce) {
    .pollen, .fallzone, .sway, .bloom-unit, .comp__row { display: none !important; animation: none !important; }
    .reveal, .reveal.is-in { opacity: 1 !important; animation: none !important; transform: none !important; }
    .drawer__panel, .modal__panel, .toast { transition: none !important; transform: none !important; }
    .stems { stroke-dasharray: none; animation: none; }
  }

  /* видимость после загрузки — чтобы не мигало */
  .js-on [data-stagger] > * { opacity: 0; }
}