/* ============================================================
   Visual de los ESTILOS DE RACHA en la tienda (/perfil).
   La llama (SVG) + halo + aura + flicker son CSS baratos (siempre
   visibles). El canvas de efectos (streak-styles.js) corre SOLO al
   tocar = liviano para teléfonos.
   ============================================================ */
.sk-stage{position:relative;width:120px;height:132px;margin:0 auto;display:flex;align-items:center;justify-content:center}
.sk-aura{position:absolute;width:110px;height:120px;border-radius:50%;z-index:0;
  background:radial-gradient(circle at 50% 58%, var(--c-glow,rgba(255,107,53,.5)) 0%, transparent 62%);
  filter:blur(10px);animation:skAura 2.8s ease-in-out infinite}
@keyframes skAura{0%,100%{opacity:.5;transform:scale(.92)}50%{opacity:.9;transform:scale(1.08)}}
.sk-halo{position:absolute;inset:6%;border-radius:50%;z-index:0;
  background:radial-gradient(circle at center, var(--c-glow,rgba(255,107,53,.5)) 0%, transparent 58%);
  animation:skHalo 2.4s ease-in-out infinite}
@keyframes skHalo{0%,100%{opacity:.55;transform:scale(.96)}50%{opacity:1;transform:scale(1.06)}}
.sk-flame{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;
  pointer-events:none;animation:skFlick 1.7s ease-in-out infinite;
  filter:drop-shadow(0 4px 12px var(--c-glow,rgba(255,107,53,.5)))}
.sk-flame svg{width:92px;height:124px}
@keyframes skFlick{0%,100%{transform:scale(1)}25%{transform:scale(1.04,.975)}50%{transform:scale(.975,1.045)}75%{transform:scale(1.02,.99)}}
.sk-num{position:relative;z-index:3;font-size:46px;font-weight:900;color:#fff;line-height:1;
  font-variant-numeric:tabular-nums;letter-spacing:-2px;
  text-shadow:0 0 8px var(--c-glow,rgba(255,107,53,.5)),0 0 16px var(--c-glow,rgba(255,107,53,.4)),0 2px 8px rgba(0,0,0,.6)}
/* holo (arcoíris): la llama gira el matiz */
.sk-card.holo .sk-flame svg,.sk-card.holo .sk-aura,.sk-card.holo .sk-halo{animation-name:skFlick,skHue;animation-duration:1.7s,6s;animation-timing-function:ease-in-out,linear;animation-iteration-count:infinite}
.sk-card.holo .sk-aura{animation-name:skAura,skHue;animation-duration:2.8s,6s}
.sk-card.holo .sk-halo{animation-name:skHalo,skHue;animation-duration:2.4s,6s}
@keyframes skHue{from{filter:hue-rotate(0)}to{filter:hue-rotate(360deg)}}
canvas.fx{position:absolute;pointer-events:none}

/* ── Selección (al tocar para previsualizar) + perspectiva 3D ── */
.sk-card{perspective:700px}
.sk-card.sk-sel{border-color:#ffd23f!important;box-shadow:0 0 0 2px rgba(255,210,63,.55),0 0 26px rgba(255,170,60,.3),0 10px 30px rgba(0,0,0,.45)!important}
.sk-card.sk-sel::after{content:"Vista previa";position:absolute;top:8px;right:8px;font-size:9px;font-weight:900;letter-spacing:.08em;
  text-transform:uppercase;color:#1a0a0a;background:linear-gradient(90deg,#ffd23f,#ff9d33);padding:3px 7px;border-radius:999px}

/* ── INTRO y SALIDA por estilo al previsualizar (animan .sk-stage) ── */
.sk-card.sk-in .sk-stage{animation-duration:1.15s;animation-fill-mode:both}
.sk-card.sk-out .sk-stage{animation-duration:1s;animation-fill-mode:both}
.sk-card.s-brasa.sk-in     .sk-stage{animation-name:inRise;animation-timing-function:cubic-bezier(.34,1.56,.64,1)}
.sk-card.s-infierno.sk-in  .sk-stage{animation-name:inErupt;transform-origin:50% 100%;animation-timing-function:cubic-bezier(.2,.9,.3,1)}
.sk-card.s-glaciar.sk-in   .sk-stage{animation-name:inFrost;animation-duration:1.25s}
.sk-card.s-veneno.sk-in    .sk-stage{animation-name:inBubble;transform-origin:50% 100%;animation-timing-function:cubic-bezier(.5,1.65,.5,1)}
.sk-card.s-realeza.sk-in   .sk-stage{animation-name:inReveal;animation-duration:1.25s;transform-origin:50% 100%}
.sk-card.s-cosmos.sk-in    .sk-stage{animation-name:inWarp;animation-timing-function:cubic-bezier(.2,1.3,.3,1)}
.sk-card.s-espectral.sk-in .sk-stage{animation-name:inGhost;animation-duration:1.4s}
.sk-card.s-volcan.sk-in    .sk-stage{animation-name:inMagma;animation-duration:1.3s;animation-timing-function:cubic-bezier(.3,.8,.3,1)}
.sk-card.s-arcoiris.sk-in  .sk-stage{animation-name:inPrism;animation-timing-function:cubic-bezier(.34,1.56,.64,1)}
.sk-card.s-tormenta.sk-in  .sk-stage{animation-name:inZap;animation-duration:.95s;animation-timing-function:steps(1,end)}
.sk-card.s-fenix.sk-in     .sk-stage{animation-name:inFenix;animation-duration:1.4s;transform-origin:50% 100%;animation-timing-function:cubic-bezier(.2,1.2,.3,1)}
.sk-card.s-abismo.sk-in    .sk-stage{animation-name:inAbismo;animation-duration:1.3s;animation-timing-function:cubic-bezier(.3,1.1,.3,1)}
.sk-card.s-sakura.sk-in    .sk-stage{animation-name:inSakura;animation-duration:1.4s;animation-timing-function:cubic-bezier(.34,1.4,.5,1)}
.sk-card.s-brasa.sk-out     .sk-stage{animation-name:outSink;animation-timing-function:ease-in}
.sk-card.s-infierno.sk-out  .sk-stage{animation-name:outImplode;animation-timing-function:ease-in}
.sk-card.s-glaciar.sk-out   .sk-stage{animation-name:outShatter;animation-timing-function:ease-in}
.sk-card.s-veneno.sk-out    .sk-stage{animation-name:outMelt;transform-origin:50% 100%;animation-timing-function:ease-in}
.sk-card.s-realeza.sk-out   .sk-stage{animation-name:outDust;animation-timing-function:ease-out}
.sk-card.s-cosmos.sk-out    .sk-stage{animation-name:outImplodeFlash;animation-timing-function:ease-in}
.sk-card.s-espectral.sk-out .sk-stage{animation-name:outDrift;animation-duration:1.2s;animation-timing-function:ease-out}
.sk-card.s-volcan.sk-out    .sk-stage{animation-name:outCrumble;animation-duration:1.1s;animation-timing-function:ease-in}
.sk-card.s-arcoiris.sk-out  .sk-stage{animation-name:outSwirl;animation-timing-function:ease-in}
.sk-card.s-tormenta.sk-out  .sk-stage{animation-name:outDischarge;animation-duration:.9s;animation-timing-function:steps(1,end)}
.sk-card.s-fenix.sk-out     .sk-stage{animation-name:outFenix;animation-timing-function:ease-in}
.sk-card.s-abismo.sk-out    .sk-stage{animation-name:outAbismo;animation-timing-function:ease-in}
.sk-card.s-sakura.sk-out    .sk-stage{animation-name:outSakura;animation-timing-function:ease-in}

@keyframes inRise{0%{transform:translateY(40px) scaleY(.3) scaleX(.65);opacity:0;filter:brightness(3)}35%{opacity:1}68%{transform:translateY(-8px) scaleY(1.14) scaleX(.93);filter:brightness(1.5)}85%{transform:translateY(2px) scaleY(.98)}100%{transform:none;opacity:1;filter:none}}
@keyframes inErupt{0%{transform:scaleY(.04) scaleX(.5);opacity:0;filter:brightness(2.4)}35%{opacity:1}58%{transform:scaleY(1.18) scaleX(1.08);filter:brightness(1.4)}72%{transform:scaleY(.94) scaleX(1.04) translateX(-3px)}82%{transform:translateX(3px) scaleY(1.03)}92%{transform:translateX(-1.5px)}100%{transform:none;opacity:1;filter:none}}
@keyframes inFrost{0%{filter:blur(18px) brightness(3);transform:scale(1.35);opacity:0}40%{opacity:1}58%{filter:blur(0) brightness(1.4);transform:scale(.98)}70%{transform:translateX(-4px) scale(1)}80%{transform:translateX(4px)}88%{transform:translateX(-2px)}100%{filter:none;transform:none;opacity:1}}
@keyframes inBubble{0%{transform:translateY(48px) scaleY(.4) scaleX(1.35);opacity:0;filter:brightness(1.6)}48%{opacity:1;transform:translateY(-12px) scaleY(1.18) scaleX(.84);filter:none}66%{transform:translateY(4px) scaleY(.92) scaleX(1.08)}80%{transform:translateY(-3px) scaleY(1.05) scaleX(.97)}92%{transform:translateY(1px) scaleY(.99)}100%{transform:none;opacity:1}}
@keyframes inReveal{0%{clip-path:inset(100% 0 0 0);transform:rotateX(-65deg) scale(.95);opacity:0;filter:brightness(2.6)}45%{opacity:1}80%{transform:rotateX(8deg) scale(1.02);filter:brightness(1.3)}100%{clip-path:inset(0 0 0 0);transform:none;opacity:1;filter:none}}
@keyframes inWarp{0%{transform:scale(0) rotate(-220deg);opacity:0;filter:blur(12px) brightness(2)}60%{opacity:1;filter:blur(0) brightness(1.3)}80%{transform:scale(1.12) rotate(8deg)}100%{transform:none;filter:none}}
@keyframes inGhost{0%{transform:translateY(40px) skewX(11deg) scale(1.08);opacity:0;filter:blur(9px) brightness(1.6)}45%{opacity:.5}70%{transform:translateY(-6px) skewX(-4deg) scale(.99);opacity:.9;filter:blur(1px)}100%{transform:none;opacity:1;filter:none}}
@keyframes inMagma{0%{clip-path:inset(100% 0 0 0);transform:translateY(26px) scale(1.04);opacity:0;filter:brightness(2.2) saturate(1.8)}60%{opacity:1}80%{transform:translateY(-4px) scale(1);filter:brightness(1.3)}100%{clip-path:inset(0);transform:none;opacity:1;filter:none}}
@keyframes inPrism{0%{transform:scale(.15) rotate(55deg);opacity:0;filter:hue-rotate(0) saturate(2.6) brightness(1.8)}55%{opacity:1;transform:scale(1.16) rotate(-9deg)}78%{transform:scale(.97) rotate(3deg)}100%{transform:none;filter:hue-rotate(0)}}
@keyframes inZap{0%{opacity:0;transform:translateX(-9px) scale(1.06);filter:brightness(3.6)}8%{opacity:1}13%{opacity:0}19%{opacity:1;transform:translateX(7px) scale(.98)}26%{opacity:.2}33%{opacity:1;transform:translateX(-4px)}42%{opacity:.4;transform:none}50%{opacity:1;filter:brightness(2)}70%{filter:brightness(1.2)}100%{opacity:1;transform:none;filter:none}}
@keyframes inFenix{0%{transform:translateY(40px) scale(.2);opacity:0;filter:brightness(3.4) saturate(1.6)}30%{opacity:1}55%{transform:translateY(-10px) scaleX(1.25) scaleY(1.12);filter:brightness(1.7)}72%{transform:scaleX(.94) scaleY(1.02)}88%{transform:scaleX(1.03) scaleY(.99)}100%{transform:none;opacity:1;filter:none}}
@keyframes inAbismo{0%{transform:scale(2.2) rotate(40deg);opacity:0;filter:blur(16px) brightness(.4)}40%{opacity:1}65%{transform:scale(.9) rotate(-8deg);filter:blur(0) brightness(.8)}82%{transform:scale(1.04) rotate(3deg);filter:brightness(1.15)}100%{transform:none;filter:none;opacity:1}}
@keyframes inSakura{0%{transform:scale(.3) rotate(-14deg);opacity:0;filter:brightness(1.8) saturate(1.3)}45%{opacity:1}70%{transform:scale(1.1) rotate(5deg);filter:brightness(1.2)}86%{transform:scale(.98) rotate(-1.5deg)}100%{transform:none;opacity:1;filter:none}}
@keyframes outSink{to{transform:translateY(26px) scale(.9);opacity:0}}
@keyframes outImplode{0%{}100%{transform:scale(.12) translateY(-12px);opacity:0;filter:blur(3px) brightness(2.2)}}
@keyframes outShatter{0%{}25%{transform:scale(1.06)}100%{transform:scale(.66) rotate(7deg);opacity:0;filter:blur(2px) brightness(1.7)}}
@keyframes outMelt{0%{}100%{transform:scaleY(.12) translateY(28px);opacity:0}}
@keyframes outDust{0%{}100%{transform:translateY(-26px) scale(1.05);opacity:0;filter:blur(5px) brightness(1.6)}}
@keyframes outImplodeFlash{0%{}65%{transform:scale(.1);opacity:1;filter:brightness(3.4)}100%{transform:scale(0);opacity:0}}
@keyframes outDrift{0%{}100%{transform:translateY(-36px) skewX(-11deg) scale(1.08);opacity:0;filter:blur(8px)}}
@keyframes outCrumble{0%{transform:translateX(0)}14%{transform:translateX(-5px)}28%{transform:translateX(5px)}42%{transform:translateX(-4px)}100%{transform:translateY(44px) scale(.9) rotate(-5deg);opacity:0;filter:brightness(.5) blur(2px)}}
@keyframes outSwirl{to{transform:rotate(230deg) scale(.18);opacity:0;filter:hue-rotate(200deg)}}
@keyframes outDischarge{0%{filter:brightness(1)}20%{filter:brightness(3.2);transform:scale(1.06)}30%{opacity:1}46%{opacity:.15}56%{opacity:1}100%{opacity:0;transform:scale(1.12);filter:brightness(2.2)}}
@keyframes outFenix{0%{}30%{transform:translateY(-6px) scale(1.05);filter:brightness(1.6)}100%{transform:translateY(-40px) scale(.85);opacity:0;filter:blur(4px) brightness(1.8)}}
@keyframes outAbismo{0%{}100%{transform:scale(.05) rotate(120deg);opacity:0;filter:brightness(.4) blur(3px)}}
@keyframes outSakura{0%{}30%{transform:rotate(4deg) scale(1.03)}100%{transform:translateY(20px) rotate(-10deg) scale(.9);opacity:0;filter:blur(2px)}}

@media (prefers-reduced-motion:reduce){
  .sk-aura,.sk-halo,.sk-flame{animation:none!important}
  .sk-card.sk-in .sk-stage,.sk-card.sk-out .sk-stage{animation:none!important}
}