/* BYM v25 — transición 3D suave entre las secciones principales */
.bym-cube-face {
  position: relative;
  z-index: 0;
  backface-visibility: hidden;
  transform-style: preserve-3d;
}

@supports (animation-timeline: view(block)) {
  .bym-cube-face {
    animation: bym-cube-turn linear both;
    animation-timeline: view(block);
    animation-range: entry 0% exit 100%;
    will-change: transform, opacity, filter;
  }

  @keyframes bym-cube-turn {
    0% {
      opacity: .42;
      filter: brightness(.72) saturate(.82);
      transform: perspective(1600px) translate3d(0, 10vh, -170px) rotateX(58deg) scale(.965);
    }

    22%,
    78% {
      opacity: 1;
      filter: brightness(1) saturate(1);
      transform: perspective(1600px) translate3d(0, 0, 0) rotateX(0deg) scale(1);
    }

    100% {
      opacity: .42;
      filter: brightness(.72) saturate(.82);
      transform: perspective(1600px) translate3d(0, -10vh, -170px) rotateX(-58deg) scale(.965);
    }
  }
}

.bym-cube-fallback .bym-cube-face {
  will-change: transform, opacity, filter;
}

@media (max-width: 720px) {
  @supports (animation-timeline: view(block)) {
    @keyframes bym-cube-turn {
      0% {
        opacity: .5;
        filter: brightness(.78) saturate(.88);
        transform: perspective(1200px) translate3d(0, 7vh, -105px) rotateX(44deg) scale(.975);
      }

      20%,
      80% {
        opacity: 1;
        filter: brightness(1) saturate(1);
        transform: perspective(1200px) translate3d(0, 0, 0) rotateX(0deg) scale(1);
      }

      100% {
        opacity: .5;
        filter: brightness(.78) saturate(.88);
        transform: perspective(1200px) translate3d(0, -7vh, -105px) rotateX(-44deg) scale(.975);
      }
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .bym-cube-face {
    animation: none !important;
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    will-change: auto;
  }
}