/* ── 3D Transitions — View Transitions API + CSS 3D ─────────────────
   Soporta: navegación entre páginas, apertura mini-cart, Shorts swap.
   Fallback: si View Transitions API no disponible → sin transición (noop).
   ─────────────────────────────────────────────────────────────────── */

/* ── slide-z (default) ─────────────────────────────────────── */
@keyframes mcc3t-slide-z-out {
  from { opacity: 1; transform: perspective(800px) translateZ(0) rotateY(0deg); }
  to   { opacity: 0; transform: perspective(800px) translateZ(-120px) rotateY(-8deg); }
}
@keyframes mcc3t-slide-z-in {
  from { opacity: 0; transform: perspective(800px) translateZ(-120px) rotateY(8deg); }
  to   { opacity: 1; transform: perspective(800px) translateZ(0) rotateY(0deg); }
}

/* ── flip-z ─────────────────────────────────────────────────── */
@keyframes mcc3t-flip-z-out {
  from { opacity: 1; transform: perspective(800px) rotateX(0deg) scale(1); }
  to   { opacity: 0; transform: perspective(800px) rotateX(-12deg) scale(.93); }
}
@keyframes mcc3t-flip-z-in {
  from { opacity: 0; transform: perspective(800px) rotateX(12deg) scale(.93); }
  to   { opacity: 1; transform: perspective(800px) rotateX(0deg) scale(1); }
}

/* ── fade (minimal) ─────────────────────────────────────────── */
@keyframes mcc3t-fade-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}
@keyframes mcc3t-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── View Transitions API mapping ──────────────────────────── */
/* Applied via JS — class on ::view-transition-old / new */
::view-transition-old(root) {
  animation: mcc3t-slide-z-out var(--mcc3t-dur, 400ms) cubic-bezier(.4, 0, .2, 1) both;
}
::view-transition-new(root) {
  animation: mcc3t-slide-z-in  var(--mcc3t-dur, 400ms) cubic-bezier(.16, 1, .3, 1) both;
}

/* ── Mini-cart slide-up 3D ──────────────────────────────────── */
@keyframes mcc3-cart-open {
  from {
    opacity: 0;
    transform: perspective(600px) translateY(24px) rotateX(6deg) scale(.97);
  }
  to {
    opacity: 1;
    transform: perspective(600px) translateY(0) rotateX(0deg) scale(1);
  }
}
@keyframes mcc3-cart-close {
  from {
    opacity: 1;
    transform: perspective(600px) translateY(0) rotateX(0deg) scale(1);
  }
  to {
    opacity: 0;
    transform: perspective(600px) translateY(16px) rotateX(4deg) scale(.97);
  }
}

/* Applied by 3d-transitions.js to the mini-cart element */
.mcc3-cart-open  { animation: mcc3-cart-open  300ms cubic-bezier(.16, 1, .3, 1) both; }
.mcc3-cart-close { animation: mcc3-cart-close 200ms cubic-bezier(.4, 0, .6, 1) both; }

/* ── Shorts / vídeo swap flip-Y ─────────────────────────────── */
@keyframes mcc3-shorts-out {
  from { opacity: 1; transform: perspective(600px) rotateY(0deg); }
  to   { opacity: 0; transform: perspective(600px) rotateY(-25deg) scale(.95); }
}
@keyframes mcc3-shorts-in {
  from { opacity: 0; transform: perspective(600px) rotateY(25deg) scale(.95); }
  to   { opacity: 1; transform: perspective(600px) rotateY(0deg); }
}
.mcc3-shorts-out { animation: mcc3-shorts-out 280ms cubic-bezier(.4, 0, .2, 1) both; }
.mcc3-shorts-in  { animation: mcc3-shorts-in  320ms cubic-bezier(.16, 1, .3, 1) both; }

/* ── Page loading progress bar ──────────────────────────────── */
#mcc3-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--mcc3-glow, #818cf8), var(--mcc3-glow2, #c084fc));
  z-index: 99999;
  transition: width 200ms ease, opacity 300ms ease;
  border-radius: 0 2px 2px 0;
  pointer-events: none;
  box-shadow: 0 0 12px var(--mcc3-glow, #818cf8);
}
#mcc3-progress.done { width: 100% !important; opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) {
    animation: none !important;
  }
  .mcc3-cart-open, .mcc3-cart-close,
  .mcc3-shorts-out, .mcc3-shorts-in { animation: none !important; }
}