/* ============================================================
   EPIC LAYER — matiz cinematográfico (REVERSIBLE)
   Solo colores del Design System. Guard prefers-reduced-motion.
   Quitar: borrar <link epic.css> + <script epic.js> del build (flag EPIC).
   ============================================================ */

@media (prefers-reduced-motion: no-preference) {
  /* asteriscos decorativos giran lento */
  .yc-aster { animation: epicSpin 30s linear infinite; transform-origin: center; }

  /* glows atmosféricos a la deriva (pseudo-elementos = sin conflicto con JS) */
  .yc-ticket::before   { animation: epicDrift1 15s ease-in-out infinite; }
  .yc-ticket::after    { animation: epicDrift2 18s ease-in-out infinite; }
  .yc-problem::before  { animation: epicPulse 13s ease-in-out infinite; }
  .yc-offer::after     { animation: epicPulse 15s ease-in-out infinite; }
  .yc-checkout::before { animation: epicDrift1 16s ease-in-out infinite; }
  .yc-checkout::after  { animation: epicDrift2 19s ease-in-out infinite; }
  .yc-final            { background-size: 100% 100%; }

  /* sheen sutil en CTAs al hover */
  .yc-btn { position: relative; overflow: hidden; isolation: isolate; }
  .yc-btn .price, .yc-btn svg { position: relative; z-index: 2; }
  .yc-btn::before {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.22) 50%, transparent 65%);
    transform: translateX(-130%);
  }
  .yc-btn:hover::before { animation: epicSheen .85s ease; }
}

/* tilt / magnetic transiciones suaves (JS añade .epic-tilt en desktop) */
.epic-tilt { transition: transform .3s cubic-bezier(.22,1,.36,1); will-change: transform; }
.yc-btn { transition: transform .25s cubic-bezier(.22,1,.36,1), background .25s ease; }
.yc-ticket, .yc-inst-photo { will-change: transform; }

@keyframes epicSpin   { to { transform: rotate(360deg); } }
@keyframes epicDrift1 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-16px,20px); } }
@keyframes epicDrift2 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(18px,-15px); } }
@keyframes epicPulse  { 0%,100% { opacity: .26; } 50% { opacity: .44; } }
@keyframes epicSheen  { to { transform: translateX(130%); } }