/* Animación de desbloqueo de personaje (02-10). Ver js/revelado-carta.js.
   Fases (data-fase): 0 fuera · 1 llega girando de espaldas · 2 se voltea con
   destello · 3 queda viva con su texto y botones. Igual en todos los aspectos:
   es un momento «de juego», sobre fondo oscuro con el color de la rareza. */
.rv { position: absolute; inset: 0; z-index: 44; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; overflow: hidden;
  padding: max(env(safe-area-inset-top), var(--safe-area-inset-top, 0px)) 20px max(20px, env(safe-area-inset-bottom)); color: #F2F4F8; font-family: var(--f-texto);
  background: #06070A; animation: rv-entra .25s ease; }
.rv.saliendo { animation: rv-sale .2s ease forwards; }
@keyframes rv-entra { from { opacity: 0; } } @keyframes rv-sale { to { opacity: 0; } }
.rv-fondo { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(55% 40% at 50% 42%, color-mix(in srgb, var(--rc) 38%, transparent), transparent 72%),
              radial-gradient(90% 60% at 50% 110%, color-mix(in srgb, var(--el) 22%, transparent), transparent 70%); opacity: .35; transition: opacity .6s; }
.rv[data-fase="2"] .rv-fondo, .rv[data-fase="3"] .rv-fondo { opacity: 1; }
.rv-rayos { position: absolute; left: 50%; top: 42%; width: 900px; height: 900px; margin: -450px 0 0 -450px; pointer-events: none; opacity: 0; transition: opacity .5s;
  background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--rc) 22%, transparent) 0 6deg, transparent 6deg 18deg);
  -webkit-mask: radial-gradient(closest-side, #000 20%, transparent 75%); mask: radial-gradient(closest-side, #000 20%, transparent 75%); animation: rv-gira 24s linear infinite; }
.rv[data-fase="2"] .rv-rayos, .rv[data-fase="3"] .rv-rayos { opacity: .9; }
@keyframes rv-gira { to { transform: rotate(360deg); } }
/* onda y destello del volteo */
.rv-onda { position: absolute; left: 50%; top: 42%; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; pointer-events: none; opacity: 0;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rc) 80%, #fff), 0 0 40px 10px color-mix(in srgb, var(--rc) 60%, transparent); }
.rv[data-fase="2"] .rv-onda { animation: rv-onda .8s cubic-bezier(.2,.7,.3,1) forwards; }
@keyframes rv-onda { 0% { opacity: 1; transform: scale(.4); } 100% { opacity: 0; transform: scale(16); } }
.rv-chispas { position: absolute; left: 50%; top: 42%; width: 0; height: 0; pointer-events: none; }
.rv-chispas i { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: color-mix(in srgb, var(--rc) 70%, #fff); box-shadow: 0 0 8px var(--rc);
  animation: rv-chispa 1.2s cubic-bezier(.15,.8,.3,1) forwards; }
@keyframes rv-chispa { 0% { transform: translate(0, 0) scale(1); opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) scale(.2); opacity: 0; } }

/* la carta en 3D */
.rv-escena { position: relative; z-index: 2; perspective: 1200px; opacity: 0; transition: opacity .3s; }
.rv:not([data-fase="0"]) .rv-escena { opacity: 1; }
/* OJO: la opacidad va en .rv-escena y NO en .rv-carta: una opacidad < 1 en el
   elemento con preserve-3d lo aplana y se ve la cara de delante en espejo. */
.rv-carta { --w: min(64vw, 280px, calc((100dvh - 300px) * 2 / 3)); position: relative; width: var(--w); aspect-ratio: 2 / 3; transform-style: preserve-3d;
  transform: translateY(40vh) scale(.3) rotateY(-540deg); }
.rv[data-fase="1"] .rv-carta { transition: transform .9s cubic-bezier(.16,.84,.3,1); transform: translateY(0) scale(1) rotateY(-180deg); }
.rv[data-fase="2"] .rv-carta, .rv[data-fase="3"] .rv-carta { transition: transform .75s cubic-bezier(.2,1.25,.35,1); transform: rotateY(0deg); }
.rv[data-fase="3"] .rv-carta { animation: rv-flota 4s ease-in-out .2s infinite; }
@keyframes rv-flota { 50% { transform: translateY(-6px) rotateY(4deg) rotateX(2deg); } }
.rv-cara { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: calc(var(--w) * .022); }
.rv-frente .carta { width: 100%; height: 100%; transform: none !important; box-shadow: 0 30px 60px -20px rgba(0,0,0,.9), 0 0 50px -10px var(--rc); }
.rv-dorso { transform: rotateY(180deg); overflow: hidden; background: #0B0D12;
  box-shadow: inset 0 0 0 calc(var(--w) * .018) color-mix(in srgb, var(--rc) 70%, #000), inset 0 0 0 calc(var(--w) * .03) #05060A, 0 30px 60px -20px rgba(0,0,0,.9), 0 0 40px -10px var(--rc); }
.rv-dorso-in { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 10px;
  background: radial-gradient(70% 50% at 50% 45%, color-mix(in srgb, var(--rc) 35%, transparent), transparent 70%),
              repeating-linear-gradient(45deg, rgba(255,255,255,.03) 0 2px, transparent 2px 9px); }
.rv-dorso-in b { font: 700 calc(var(--w) * .16)/1 var(--f-titulo); letter-spacing: .18em; color: #fff; text-shadow: 0 0 18px var(--rc); }
.rv-dorso-in i { width: 46%; height: 2px; background: linear-gradient(90deg, transparent, var(--rc), transparent); }
.rv-dorso-in small { font: 700 calc(var(--w) * .045)/1 var(--f-titulo); letter-spacing: .3em; text-transform: uppercase; color: color-mix(in srgb, var(--rc) 75%, #fff); }
/* destello blanco justo al voltearse */
.rv-frente::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: #fff; opacity: 0; pointer-events: none; z-index: 9; }
.rv[data-fase="2"] .rv-frente::after { animation: rv-destello .7s ease-out forwards; }
@keyframes rv-destello { 0% { opacity: .95; } 100% { opacity: 0; } }

/* texto y botones */
.rv-texto { position: relative; z-index: 2; text-align: center; opacity: 0; transform: translateY(14px); transition: opacity .4s, transform .4s; }
.rv[data-fase="3"] .rv-texto { opacity: 1; transform: none; }
.rv-texto small { display: block; font: 700 12px/1.2 var(--f-titulo); letter-spacing: .24em; text-transform: uppercase; color: color-mix(in srgb, var(--rc) 70%, #fff); }
.rv-texto b { display: block; margin: 4px 0 2px; font: 700 30px/1.05 var(--f-titulo); letter-spacing: .01em; }
.rv-texto span { font-size: 13px; color: #A7AEBC; }
.rv-botones { position: relative; z-index: 2; display: flex; gap: 10px; width: min(100%, 360px); opacity: 0; transition: opacity .4s .15s; pointer-events: none; }
.rv[data-fase="3"] .rv-botones { opacity: 1; pointer-events: auto; }
.rv-botones .btn { flex: 1; }
.rv-botones .btn.linea { background: rgba(255,255,255,.06); color: #F2F4F8; border-color: rgba(255,255,255,.3); box-shadow: none; }

/* sin giros si el sistema pide menos movimiento */
.rv.quieto .rv-carta { transform: none !important; transition: none !important; animation: none !important; }
.rv.quieto .rv-dorso { display: none; }
.rv.quieto .rv-rayos { animation: none; }
/* la carta viva: el vídeo ocupa el sitio del dibujo */
video.tcg-arte { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
/* mientras llega girando, dorso por los DOS lados (no se destripa la carta);
   al voltearse (fase 2) aparece la cara de delante */
.rv-dorso-2 { transform: none; }
.rv:is([data-fase="0"], [data-fase="1"]) .rv-frente { visibility: hidden; }
.rv:not([data-fase="0"]):not([data-fase="1"]) .rv-dorso-2 { visibility: hidden; }