/* Movimiento 3D discreto para los dos escaparates visuales de Elite IPTV. */
.elite-3d-surface { --elite-rotate-x: 0deg; --elite-rotate-y: 0deg; transform: perspective(1100px) rotateX(var(--elite-rotate-x)) rotateY(var(--elite-rotate-y)) translateZ(0) !important; transform-style: preserve-3d; transition: transform .24s cubic-bezier(.2,.7,.2,1), box-shadow .24s ease; will-change: transform; }
.elite-3d-surface:hover { box-shadow: 0 32px 62px rgba(16,31,56,.25) !important; }
.elite-3d-surface > * { transform: translateZ(14px); }.elite-3d-surface .elite-mosaic-fade, .elite-3d-surface .elite-football-countdown { transform: translateZ(28px); }
@media (max-width: 991px), (prefers-reduced-motion: reduce) { .elite-3d-surface { transform: none !important; transition: none !important; }.elite-3d-surface > * { transform: none; } }

/* Capas visibles: las tres columnas y las portadas de fútbol tienen distinta profundidad. */
@media (min-width: 992px) and (prefers-reduced-motion: no-preference) {
  .elite-3d-surface .elite-poster-column-one { transform: translateZ(14px) translateY(9px); animation: eliteDepthOne 5.8s ease-in-out infinite; }
  .elite-3d-surface .elite-poster-column-two { transform: translateZ(36px) translateY(-7px); animation: eliteDepthTwo 6.4s ease-in-out infinite; }
  .elite-3d-surface .elite-poster-column-three { transform: translateZ(20px) translateY(5px); animation: eliteDepthThree 6s ease-in-out infinite; }
  .elite-3d-surface .elite-football-main { animation: eliteDepthOne 5.8s ease-in-out infinite; }
  .elite-3d-surface .elite-football-top { animation: eliteDepthTwo 6.4s ease-in-out infinite; }
  .elite-3d-surface .elite-football-bottom { animation: eliteDepthThree 6s ease-in-out infinite; }
  @keyframes eliteDepthOne { 0%,100% { transform: translateZ(14px) translateY(8px); } 50% { transform: translateZ(24px) translateY(-3px); } }
  @keyframes eliteDepthTwo { 0%,100% { transform: translateZ(36px) translateY(-7px); } 50% { transform: translateZ(48px) translateY(5px); } }
  @keyframes eliteDepthThree { 0%,100% { transform: translateZ(20px) translateY(5px); } 50% { transform: translateZ(30px) translateY(-6px); } }
}
