/* =====================================================================
   Club Bear - disfraz de Frankenstein: chispas, paso de monstruo,
   chispazo al ponérselo y la página de la revista
   ===================================================================== */

/* ---------- chispas de los tornillos ---------- */
.spark { opacity: 0; animation: spark 2.6s linear infinite; }
.spark.s2 { animation-delay: .9s; }
.spark.s3 { animation-delay: 1.6s; }
.spark.s4 { animation-delay: .4s; }
@keyframes spark {
  0%, 70% { opacity: 0; }
  72% { opacity: 1; }
  75% { opacity: .15; }
  78% { opacity: 1; }
  84%, 100% { opacity: 0; }
}

/* ---------- paso de monstruo: brazos estirados y balanceo rígido ---------- */
.franken.walking .arm-l { animation: frankArmL .55s ease-in-out infinite alternate; }
.franken.walking .arm-r { animation: frankArmR .55s ease-in-out infinite alternate; }
.franken.walking .sprite svg { animation: frankSway .55s ease-in-out infinite alternate; transform-origin: 50% 95%; }
@keyframes frankArmL { from { transform: rotate(84deg); } to { transform: rotate(72deg); } }
@keyframes frankArmR { from { transform: rotate(-84deg); } to { transform: rotate(-72deg); } }
@keyframes frankSway { from { transform: rotate(-4deg); } to { transform: rotate(4deg) translateY(-2%); } }
/* quieto: de vez en cuando la cabeza da un tirón */
.franken:not(.walking):not(.dancing) .head { animation: frankTwitch 4.5s ease-in-out infinite; }
@keyframes frankTwitch { 0%, 86%, 100% { transform: rotate(0); } 89% { transform: rotate(-5deg); } 92% { transform: rotate(4deg); } 95% { transform: rotate(-2deg); } }

/* fuera del mundo (revista, tarjeta) los brazos giran desde el hombro */
.fk-prev .arm, .fk-prev .leg, .fk-prev .head, .fk-bear .head, .card-bear .head { transform-box: fill-box; }
.fk-prev .arm { transform-origin: 50% 12%; }
.fk-prev .leg { transform-origin: 50% 0; }
.fk-prev .head, .fk-bear .head, .card-bear .head { transform-origin: 50% 100%; }
.card-bear.franken .head { animation: frankTwitch 4.5s ease-in-out infinite; }

/* ---------- chispazo al ponerse el disfraz ---------- */
.zap-fx { position: absolute; left: 0; bottom: -4px; transform: translateX(-50%); pointer-events: none; z-index: 2; }
.zap-fx svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.zap-fx .bolt { fill: none; stroke: #fff36b; stroke-width: 7; stroke-linejoin: round; stroke-linecap: round; opacity: 0;
  filter: drop-shadow(0 0 6px #ffe14d); animation: boltFlash .9s steps(1) forwards; }
.zap-fx .b2 { animation-delay: .15s; }
.zap-fx .b3 { animation-delay: .3s; }
@keyframes boltFlash { 0% { opacity: 1; } 20% { opacity: 0; } 35% { opacity: 1; } 55% { opacity: 0; } 70% { opacity: 1; } 100% { opacity: 0; } }
.zap-flash { position: absolute; inset: -20%; border-radius: 50%; background: radial-gradient(circle, rgba(255,250,190,.95), rgba(190,255,120,.4) 40%, transparent 70%);
  opacity: 0; animation: zapFlash 1.2s ease-out forwards; }
@keyframes zapFlash { 0% { opacity: 0; transform: scale(.4); } 15% { opacity: 1; } 100% { opacity: 0; transform: scale(1.3); } }
.zap-text { position: absolute; left: 50%; top: -18%; transform: translateX(-50%); white-space: nowrap; font: 700 34px var(--font); color: #9dff6a;
  text-shadow: 0 3px 0 #1d2a1a, 0 0 14px rgba(157,255,106,.8); animation: zapText 1.5s ease-out forwards; }
@keyframes zapText { 0% { opacity: 0; transform: translateX(-50%) scale(.3); } 25% { opacity: 1; transform: translateX(-50%) scale(1.2); } 70% { opacity: 1; transform: translateX(-50%) scale(1); } 100% { opacity: 0; transform: translateX(-50%) translateY(-30px); } }
.zapping .sprite svg { animation: zapShake .12s linear 6; }
@keyframes zapShake { 0%, 100% { transform: translate(0, 0); filter: brightness(1); } 25% { transform: translate(-3%, 0); filter: brightness(1.6); } 75% { transform: translate(3%, 0); filter: brightness(1.2); } }

/* ---------- revista con dos páginas ---------- */
.magazine .spread { display: flex; flex: 1; min-width: 0; transform-origin: left center; }
.magazine .spread[hidden] { display: none; }
.spread.turn-next { animation: turnNext .55s cubic-bezier(.2,.8,.3,1); }
.spread.turn-prev { animation: turnPrev .55s cubic-bezier(.2,.8,.3,1); transform-origin: right center; }
@keyframes turnNext { from { transform: perspective(1800px) rotateY(-28deg) translateX(60px); opacity: 0; } }
@keyframes turnPrev { from { transform: perspective(1800px) rotateY(28deg) translateX(-60px); opacity: 0; } }
.mag-nav { position: absolute; top: 50%; width: 76px; height: 76px; margin-top: -38px; border-radius: 50%; border: 5px solid #2b2b36;
  background: linear-gradient(#ffffff, #e2e6ee); font: 700 34px var(--font); color: #2b2b36; box-shadow: 0 6px 0 rgba(0,0,0,.25); z-index: 4; }
.mag-nav.prev { left: -40px; }
.mag-nav.next { right: -40px; }
.mag-nav:disabled { opacity: 0; pointer-events: none; }
.mag-nav:hover:not(:disabled) { transform: scale(1.08); }
.mag-nav.next.pulse { animation: navPulse 1.4s ease-in-out infinite; background: linear-gradient(#b6ff8f, #6fcf4a); }
@keyframes navPulse { 50% { transform: scale(1.12); box-shadow: 0 6px 0 rgba(0,0,0,.25), 0 0 26px rgba(120,230,80,.8); } }
.mag-pages { position: absolute; left: 50%; bottom: -46px; transform: translateX(-50%); font: 700 24px var(--font); color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.5); }

/* botón de la página 1 que lleva al disfraz */
.fk-sticker { flex: 1.7 !important; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border: 4px solid #2f6b22; border-radius: 18px;
  background: linear-gradient(#c8ff9f, #79cf55); color: #1d3a14; padding: 8px; font: 700 20px var(--font); animation: stickerWiggle 2.2s ease-in-out infinite; }
.fk-sticker span { font-size: 44px; line-height: 1; }
.fk-sticker small { font: 600 18px var(--font); color: #2f6b22; }
.fk-sticker:hover { filter: brightness(1.07); }
@keyframes stickerWiggle { 0%, 80%, 100% { transform: rotate(0); } 85% { transform: rotate(-4deg); } 90% { transform: rotate(4deg); } 95% { transform: rotate(-2deg); } }

/* ---------- página 2: escenario de Frankenstein ---------- */
.page.fk-stage { background: linear-gradient(#150f2c, #34245a 55%, #1e3a24); color: #fff; padding: 0; }
.fk-sky { position: absolute; inset: 0; }
.fk-moon { position: absolute; right: 70px; top: 56px; width: 130px; height: 130px; border-radius: 50%; background: radial-gradient(circle at 40% 40%, #fffbe0, #f3e39a);
  box-shadow: 0 0 60px 20px rgba(255,240,170,.35); }
.fk-castle { position: absolute; left: 0; right: 0; bottom: 110px; width: 100%; height: 280px; fill: #0f0a1f; }
.fk-castle .win { fill: #ffd84a; animation: winFlicker 3s steps(1) infinite; }
@keyframes winFlicker { 0%, 40%, 60%, 100% { opacity: 1; } 50% { opacity: .3; } }
.fk-lightning { position: absolute; left: 16%; top: 0; width: 100px; height: 360px; fill: #fffbd0; opacity: 0; filter: drop-shadow(0 0 12px #fff6a0); animation: lightning 5s infinite; }
.fk-flash { position: absolute; inset: 0; background: #e9e4ff; opacity: 0; animation: skyFlash 5s infinite; }
@keyframes lightning { 0%, 86%, 100% { opacity: 0; } 87% { opacity: 1; } 89% { opacity: 0; } 90% { opacity: 1; } 93% { opacity: 0; } }
@keyframes skyFlash { 0%, 86%, 100% { opacity: 0; } 87% { opacity: .55; } 89% { opacity: 0; } 90% { opacity: .4; } 94% { opacity: 0; } }
.fk-title { position: absolute; left: 44px; top: 34px; font: 700 96px/0.95 var(--font); color: #9dff6a; transform: rotate(-6deg);
  text-shadow: 0 6px 0 #1d2a1a, 0 0 26px rgba(157,255,106,.6); animation: titleZap 5s infinite; }
@keyframes titleZap { 0%, 86%, 100% { transform: rotate(-6deg); } 88% { transform: rotate(-3deg) scale(1.08); color: #fffbd0; } 92% { transform: rotate(-7deg); } }
.fk-ground { position: absolute; left: -10%; right: -10%; bottom: -40px; height: 170px; border-radius: 50%; background: #16301b; }
.fk-bear { position: absolute; left: 50%; bottom: 52px; width: 300px; height: 452px; margin-left: -150px; z-index: 2; animation: fkAlive 5s ease-in-out infinite; }
.fk-bear svg { width: 100%; height: 100%; overflow: visible; }
@keyframes fkAlive {
  0%, 100% { transform: translateY(0); }
  40% { transform: translateY(-10px); }
  86% { transform: translateY(0); }
  88% { transform: translate(-6px, -4px) rotate(-3deg); filter: brightness(1.5); }
  90% { transform: translate(6px, -6px) rotate(3deg); filter: brightness(1); }
  92% { transform: translate(-4px, -2px) rotate(-2deg); filter: brightness(1.4); }
  95% { transform: translate(0, -16px); filter: brightness(1); }
}
.page.fk-info { background: #f6fbef; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; }
.fk-info .cat-tag { position: static; transform: rotate(-3deg); background: #3d7a2a; }
.fk-info h3 { margin: 4px 0 0; font: 700 52px var(--font); color: #2f6b22; }
.fk-info p { margin: 0; font: 400 24px/1.3 var(--font); color: #3b4a36; max-width: 560px; }
.fk-features { list-style: none; margin: 4px 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; text-align: left; width: 100%; }
.fk-features li { display: flex; align-items: center; gap: 10px; font: 600 20px var(--font); color: #2b3a26; background: #e3f3d6; border-radius: 14px; padding: 6px 12px; }
.fk-features span { font-size: 30px; }
.fk-previews { display: flex; gap: 16px; justify-content: center; }
.fk-prev { width: 150px; height: 190px; border-radius: 18px; background: radial-gradient(circle at 50% 70%, #ffffff, #d6ecc7 75%); border: 4px solid #a9d68f;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-bottom: 4px; overflow: hidden; }
.fk-prev .sprite { width: 104px; height: 150px; }
.fk-prev .sprite svg { width: 100%; height: 100%; overflow: visible; }
.fk-prev small { font: 600 16px var(--font); color: #2f6b22; }
.fk-buy { display: flex; align-items: center; gap: 24px; margin-top: 4px; }
.fk-buy .cat-price { margin: 0; }