/* Movimiento de vuelo vertical */
@keyframes fly {
    0% {
      opacity: 0;
      transform: translateY(70vh);
    }
    10%, 90% {
      opacity: 1;
    }
    20% {
      transform: translateY(50vh) translateX(-10%);
    }
    40% {
      transform: translateY(30vh) translateX(20%);
    }
    60% {
      transform: translateY(10vh) translateX(-15%);
    }
    80% {
      transform: translateY(-10vh) translateX(10%);
    }
    100% {
      opacity: 0;
      transform: translateY(-70vh);
    }
  }
  
  /* Movimiento horizontal y rotación */
  @keyframes turn {
    0%, 100% { transform: translateX(-20%) rotateZ(30deg); }
    25% { transform: translateX(50%) rotateZ(-45deg); }
    50% { transform: translateX(-80%) rotateZ(60deg); }
    75% { transform: translateX(30%) rotateZ(-15deg); }
  }
  
  /* Animación de aleteo - ala derecha */
  @keyframes flutter-r {
    0%, 100% { transform: rotateY(0deg); }
    50% { transform: rotateY(-60deg); }
  }
  
  /* Animación de aleteo - ala izquierda */
  @keyframes flutter-l {
    0%, 100% { transform: rotateY(0deg); }
    50% { transform: rotateY(60deg); }
  }
  
  /* Contenedor de la mariposa (vuelo vertical) */
  .mariposa {
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    width: 300px;
    height: 800px;
    opacity: 0; /* Inicia invisible para evitar parpadeo */
    -webkit-animation-fill-mode: backwards;
    animation-fill-mode: backwards;
    animation: fly 8s infinite ease-in-out; /* Duración más larga y suave */
    animation-delay: .125s;
    
    /* Efecto escalonado para múltiples mariposas */
    &:nth-child(2) {
      animation-delay: 0.4s;
      
      /* Retardo en la rotación */
      .mariposa-turn {
        animation-delay: 0.75s;
        
        /* Variación en tamaño y rotación */
        .mariposa-flutter {
          transform: scale(0.7) rotateX(65deg);
        }
      }
    }
  
    &:nth-child(3) {
      animation-delay: 0.75s;
      
      .mariposa-turn {
        animation-delay: 1.25s;
        
        .mariposa-flutter {
          transform: scale(0.3) rotateX(45deg);
        }
      }   
    }
    
    /* Configuración de perspectiva y animación de giro */
    .mariposa-turn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 200px;
      height: 150px;
      perspective: 1000px;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto;
      transform-origin: 50% 80%;
      -webkit-animation-fill-mode: both;
      animation-fill-mode: both;
      animation: turn 5s infinite ease-in-out; /* Duración más larga y suave */
      transform-style: preserve-3d;
      filter: drop-shadow(50px 30px 10px rgba(0, 0, 0, 0.5));
    }
  }
  
  /* Estructura y animación de las alas */
  .mariposa-flutter {
    width: 2rem;
    height: 8rem;
    position: relative;
    top: 0;
    margin: 0 auto;
    /*background: url("https://assets.codepen.io/2273448/butterfly-body.png");*/
    background: url("/xv/img/butterbody.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    transform-style: preserve-3d;
    transform: rotateX(25deg) rotateY(5deg);
    
    /* Alas */
    &::before,
    &::after {
      position: absolute;
      top: 5%;
      margin: auto;
      content: "";
      height: 100%;
      width: 250%;
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
      transform-style: preserve-3d;
      animation-delay: 0;
    }
    
    &::before {
      background-image: url("/xv/img/butterwing-lI.png");
      transform-origin: 0% 50%;
      animation: flutter-r 0.2s infinite ease-in-out; /* Aleteo más rápido */
      left: 55%;
    }
    
    &::after {
      background-image: url("/xv/img/butterwing-l.png");
      transform-origin: 100% 50%;
      animation: flutter-l 0.2s infinite ease-in-out; /* Aleteo más rápido */
      right: 55%;
    }
  }