/* ===============================
   VINE DRAW ANIMATION
   =============================== */

   .vine-main,
   .vine-tendril {
     stroke-dasharray: 1200;
     stroke-dashoffset: 1200;
     animation-fill-mode: forwards;
   }
   
   .floral-divider.visible .vine-main {
     animation: draw-vine 2.2s ease-out forwards;
   }
   
   .floral-divider.visible .vine-tendril.delay-1 {
     animation: draw-vine 1.2s ease-out forwards;
     animation-delay: 1.8s;
   }
   .floral-divider.visible .vine-tendril.delay-2 {
     animation: draw-vine 1.2s ease-out forwards;
     animation-delay: 2.1s;
   }
   .floral-divider.visible .vine-tendril.delay-3 {
     animation: draw-vine 1.2s ease-out forwards;
     animation-delay: 2.4s;
   }
   
   @keyframes draw-vine {
     to {
       stroke-dashoffset: 0;
     }
   }
   
   /* ===============================
      FLOWER BLOOM + SWAY
      =============================== */
   
   .flower {
     transform-box: fill-box;
     transform-origin: center;
     opacity: 0;
     transform: scale(0);
   }
   
   .floral-divider.visible .flower.bloom {
     animation: bloom 0.9s ease-out forwards;
     animation-delay: 3.2s, 4.2s;
   }
   
   /* Stagger blooms */
   .flower.delay-1 { animation-delay: 3.2s, 4.2s; }
   .flower.delay-2 { animation-delay: 3.4s, 4.4s; }
   .flower.delay-3 { animation-delay: 3.6s, 4.6s; }
   .flower.delay-4 { animation-delay: 3.8s, 4.8s; }
   
   @keyframes bloom {
     0% {
       opacity: 0;
       transform: scale(0.2);
     }
     70% {
       opacity: 1;
       transform: scale(1.1);
     }
     100% {
       opacity: 1;
       transform: scale(1);
     }
   }
   
   @keyframes sway {
     0%   { transform: rotate(0deg); }
     25%  { transform: rotate(2deg); }
     50%  { transform: rotate(0deg); }
     75%  { transform: rotate(-2deg); }
     100% { transform: rotate(0deg); }
   }