/* Aparición al hacer scroll: solo si reveal.js activó la clase (sin reduced-motion). */
.has-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s ease, transform 0.8s ease;
  transition-delay: var(--delay, 0s);
}

.has-reveal [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes drift {
    from {
      transform: translateX(-14px);
    }
    to {
      transform: translateX(22px);
    }
  }

  @keyframes fly {
    0%,
    100% {
      transform: translate(0, 0) rotate(-3deg);
    }
    50% {
      transform: translate(-14px, -10px) rotate(3deg);
    }
  }

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

  @keyframes fall {
    0% {
      transform: translate3d(0, 0, 0) rotate(0deg);
      opacity: 0;
    }
    12% {
      opacity: 0.85;
    }
    100% {
      transform: translate3d(var(--sway, 40px), 105vh, 0) rotate(360deg);
      opacity: 0;
    }
  }

  .cover__cloud,
  .backdrop__cloud,
  .envelope-screen__cloud {
    animation: drift 14s ease-in-out infinite alternate;
  }

  .cover__cloud--b,
  .backdrop__cloud--b,
  .envelope-screen__cloud--b {
    animation-duration: 19s;
    animation-direction: alternate-reverse;
  }

  .cover__cloud--c,
  .backdrop__cloud--c {
    animation-duration: 23s;
  }

  .cover__dove {
    animation: fly 6s ease-in-out infinite;
  }

  .dove__wing {
    transform-origin: 130px 76px;
    animation: flap 2.4s ease-in-out infinite;
  }

  .petal {
    animation: fall calc(9s + var(--i) * 1.3s) linear infinite;
    animation-delay: calc(var(--i) * -1.7s);
    --sway: calc(30px + var(--i) * 6px);
  }

  .petal:nth-child(even) {
    --sway: calc(-30px - var(--i) * 6px);
  }

  /* Apertura del sobre */
  .envelope__flap {
    transition: transform 0.7s ease, z-index 0s 0.35s;
  }

  .envelope__letter {
    transition: transform 0.8s ease 0.55s;
  }

  .envelope__seal {
    transition: opacity 0.3s ease;
  }

  .envelope-screen {
    transition: opacity 0.5s ease 1.2s;
  }

  .envelope-screen.is-opening .envelope__flap {
    z-index: 0;
    transform: rotateX(180deg);
  }

  .envelope-screen.is-opening .envelope__letter {
    transform: translateY(-48%);
  }

  .envelope-screen.is-opening .envelope__seal {
    opacity: 0;
  }

  .envelope-screen.is-opening {
    opacity: 0;
  }
}