/* ═══════════════════════════════════════════════════════
   animations.css  —  Neo Puzzle Lovers
   Capa de mejoras visuales. Se carga DESPUÉS de styles.css
   No rompe nada: solo añade, anima y pule.
═══════════════════════════════════════════════════════ */

/* ────────────────────────────────────────────────────
   0. CORRECCIÓN DE PARPADEO (ANTI-FLICKER)
   Aplica a todos los botones y tarjetas que se elevan o hacen zoom
──────────────────────────────────────────────────────*/
.btn-primary,
.btn-secondary,
.contact-email,
.nav-links a,
.activity-card,
.fandom-badge,
.member-card,
.member-avatar,
.work-card,
.work-tag,
.engine-card,
.engine-icon,
.faq-item,
.gen-filter-btn,
.mode-switch-btn,
.answer-btn {
  will-change: transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform-style: preserve-3d;
}

/* 1. MOVIMIENTO FLOTANTE DEL LOGO (Siempre activo) */
@keyframes floating {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-15px); }
}

.logo-container {
  display: inline-block;
  animation: floating 4s ease-in-out infinite;
}

/* 2. EFECTO POP (Cookie Clicker) */
.hero-logo {
  cursor: pointer;
  pointer-events: auto;
  transition: transform 0.1s ease-out;
  position: relative;
  z-index: 10;
  pointer-events: auto;
  -webkit-user-drag: none; 
  user-drag: none;
  -webkit-user-select: none;
  user-select: none;
}

.hero-logo.clicked {
  animation: logoClickPop 0.2s ease-out !important;
}

@keyframes logoClickPop {
  0%   { transform: scale(1); }
  50%  { transform: scale(0.92); }
  100% { transform: scale(1); }
}

/* 3. PARTÍCULAS POOF */
.click-particle {
  position: fixed;
  pointer-events: none;
  border-radius: 50%;
  background: var(--pl-pink);
  z-index: 9999 !important;
  animation: particlePoof 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

.particle-pink  { background: var(--pl-pink);  box-shadow: 0 0 8px var(--pl-pink); }
.particle-cyan  { background: var(--pl-cyan);  box-shadow: 0 0 8px var(--pl-cyan); }
.particle-blue  { background: var(--pl-blue);  box-shadow: 0 0 8px var(--pl-blue); }
.particle-lilac { background: var(--pl-lilac); box-shadow: 0 0 8px var(--pl-lilac); }

@keyframes particlePoof {
  0% { 
    opacity: 1; 
    transform: translate(-50%, -50%) scale(1); 
  }
  100% { 
    opacity: 0; 
    transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0.3); 
  }
}


/* ────────────────────────────────────────────────────
   1. REVEAL MEJORADO
   Las secciones entran desde abajo con fade
──────────────────────────────────────────────────────*/
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Retraso escalonado para grids de tarjetas */
.activities-grid   .activity-card:nth-child(1),
.fandoms-grid      .fandom-badge:nth-child(1),
.team-grid         .member-card:nth-child(1),
.works-grid        .work-card:nth-child(1),
.members-grid      .member-card-link:nth-child(1) { transition-delay: 0.05s; }

.activities-grid   .activity-card:nth-child(2),
.fandoms-grid      .fandom-badge:nth-child(2),
.team-grid         .member-card:nth-child(2),
.works-grid        .work-card:nth-child(2),
.members-grid      .member-card-link:nth-child(2) { transition-delay: 0.10s; }

.activities-grid   .activity-card:nth-child(3),
.fandoms-grid      .fandom-badge:nth-child(3),
.team-grid         .member-card:nth-child(3),
.works-grid        .work-card:nth-child(3),
.members-grid      .member-card-link:nth-child(3) { transition-delay: 0.15s; }

.activities-grid   .activity-card:nth-child(4),
.fandoms-grid      .fandom-badge:nth-child(4),
.team-grid         .member-card:nth-child(4),
.works-grid        .work-card:nth-child(4),
.members-grid      .member-card-link:nth-child(4) { transition-delay: 0.20s; }

.activities-grid   .activity-card:nth-child(n+5),
.fandoms-grid      .fandom-badge:nth-child(n+5),
.members-grid      .member-card-link:nth-child(n+5) { transition-delay: 0.25s; }


/* ────────────────────────────────────────────────────
   2. HERO LOGO — anillo con pulso de color
──────────────────────────────────────────────────────*/

.logo-ring {
  pointer-events: none;
}


.logo-ring-a {
  animation: pulseRing 6s linear infinite, ringColorShift 8s ease-in-out infinite;
}

.logo-ring-b {
  animation: pulseRingReverse 8s linear infinite, ringColorShift 8s ease-in-out infinite reverse;
}

@keyframes ringColorShift {
  0%, 100% { border-color: rgba(141, 238, 255, 0.18); }
  33%       { border-color: rgba(229, 89, 177, 0.22); }
  66%       { border-color: rgba(169, 106, 231, 0.20); }
}


/* ────────────────────────────────────────────────────
   3. NAV — underline deslizante en links activos
──────────────────────────────────────────────────────*/
.nav-links a {
  position: relative;
  overflow: hidden;
}

.nav-links a::after {
  content: "";
  position: absolute;
  bottom: 4px;
  left: 50%;
  width: 0;
  height: 2px;
  border-radius: 999px;
  background: var(--pl-grad);
  transition: width 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
              left  0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.nav-links a:hover::after,
.nav-links a.active::after {
  width: 60%;
  left: 20%;
}


/* ────────────────────────────────────────────────────
   4. HERO KICKER — shimmer continuo
──────────────────────────────────────────────────────*/
.hero-kicker {
  background-size: 200% 100%;
  animation: shimmerText 4s linear infinite;
}

@keyframes shimmerText {
  0%   { letter-spacing: 0.15em; }
  50%  { letter-spacing: 0.22em; }
  100% { letter-spacing: 0.15em; }
}


/* ────────────────────────────────────────────────────
   5. SIGNAL CARDS — número conta desde 0 (visual)
   + pulso sutil en la barra lateral de acento
──────────────────────────────────────────────────────*/
.signal-card::before {
  transition: opacity 0.4s ease;
  animation: accentPulse 3s ease-in-out infinite;
}

@keyframes accentPulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.55; }
}

.signal-card:hover .signal-value {
  animation: valuePop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes valuePop {
  0%   { transform: scale(1); }
  60%  { transform: scale(1.12); }
  100% { transform: scale(1.06); }
}


/* ────────────────────────────────────────────────────
   6. ACTIVITY CARDS — icono flota al hover
──────────────────────────────────────────────────────*/
.activity-card:hover .activity-icon {
  animation: iconFloat 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes iconFloat {
  0%   { transform: translateY(0) rotate(0deg); }
  40%  { transform: translateY(-6px) rotate(-4deg); }
  70%  { transform: translateY(-4px) rotate(2deg); }
  100% { transform: translateY(-5px) rotate(0deg); }
}

.activity-card {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
              border-color 0.28s ease,
              box-shadow 0.28s ease;
}


/* ────────────────────────────────────────────────────
   7. FANDOM BADGES — flip de fondo al hover
──────────────────────────────────────────────────────*/
/* Fandom badges: layout horizontal, sin parpadeo */
.fandom-badge {
  transition: transform 0.25s ease,
              border-color 0.25s ease,
              background-color 0.3s ease,
              box-shadow 0.25s ease;
}

.fandom-badge:hover {
  background: rgba(169, 106, 231, 0.12);
}

.fandom-badge .fandom-icon {
  display: inline-block;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.fandom-badge:hover .fandom-icon {
  transform: scale(1.25) rotate(-8deg);
}


/* ────────────────────────────────────────────────────
   8. MEMBER CARDS (index) — brillo de borde top
──────────────────────────────────────────────────────*/
.member-card {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
              border-color 0.28s ease,
              box-shadow 0.28s ease;
}

.member-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 28px 60px rgba(0, 0, 0, 0.5),
              0 0 0 1px rgba(169, 106, 231, 0.3),
              0 0 40px rgba(169, 106, 231, 0.12);
}

.member-card .member-avatar {
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.3s ease;
}

.member-card:hover .member-avatar {
  transform: scale(1.1) rotate(5deg);
  box-shadow: 0 0 32px rgba(229, 89, 177, 0.38);
}


/* ────────────────────────────────────────────────────
   9. WORK CARDS — tag destaca al hover
──────────────────────────────────────────────────────*/
.work-card .work-tag {
  transition: transform 0.25s ease, letter-spacing 0.25s ease;
}

.work-card:hover .work-tag {
  transform: translateY(-2px);
  letter-spacing: 0.06em;
}

.work-card .work-meta {
  transition: color 0.25s ease, letter-spacing 0.25s ease;
}

.work-card:hover .work-meta {
  color: var(--pl-cyan);
  letter-spacing: 0.04em;
}


/* ────────────────────────────────────────────────────
   10. ENGINE CARDS — icono gira un poco
──────────────────────────────────────────────────────*/
.engine-card .engine-icon {
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.3s ease;
}

.engine-card:hover .engine-icon {
  transform: rotate(-8deg) scale(1.08);
  box-shadow: 0 14px 32px rgba(127, 153, 255, 0.32);
}


/* ────────────────────────────────────────────────────
   11. TIMELINE — dot rebota al entrar en vista
──────────────────────────────────────────────────────*/
.timeline-item {
  opacity: 0;
  transform: translateX(-16px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.reveal.is-visible .timeline-item {
  opacity: 1;
  transform: translateX(0);
}

.reveal.is-visible .timeline-item:nth-child(1) { transition-delay: 0.1s; }
.reveal.is-visible .timeline-item:nth-child(2) { transition-delay: 0.22s; }
.reveal.is-visible .timeline-item:nth-child(3) { transition-delay: 0.34s; }
.reveal.is-visible .timeline-item:nth-child(4) { transition-delay: 0.46s; }

.timeline-dot {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.3s ease;
}

.timeline-item:hover .timeline-dot {
  transform: scale(1.5);
  box-shadow: 0 0 20px rgba(229, 89, 177, 0.6);
}


/* ────────────────────────────────────────────────────
   12. FAQ — flecha rota más suave, ítem con acento hover
──────────────────────────────────────────────────────*/
.faq-item {
  transition: border-color 0.25s ease, background-color 0.25s ease;
}

.faq-item:hover {
  border-color: rgba(169, 106, 231, 0.35);
  background: rgba(169, 106, 231, 0.05);
}

.faq-item[open] {
  border-color: rgba(229, 89, 177, 0.3);
}

.faq-arrow {
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
              color 0.25s ease;
}

.faq-item[open] .faq-arrow {
  transform: rotate(180deg);
  color: var(--pl-pink);
}

/* Animación de entrada suave para el texto de la respuesta */
.faq-item[open] .faq-answer {
  animation: faqReveal 0.45s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes faqReveal {
  0% {
    opacity: 0;
    transform: translateY(-12px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ────────────────────────────────────────────────────
   13. BOTONES — efecto ripple en click
──────────────────────────────────────────────────────*/
.btn-primary,
.btn-secondary {
  position: relative;
  overflow: hidden;
}

.btn-primary::before,
.btn-secondary::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.15);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
  border-radius: inherit;
}

.btn-primary:hover::before,
.btn-secondary:hover::before {
  transform: scaleX(1);
}

.btn-primary:active,
.btn-secondary:active {
  transform: translateY(0) scale(0.97);
}


/* ────────────────────────────────────────────────────
   14. SECTION DIVIDER — crece al entrar en vista
──────────────────────────────────────────────────────*/
.section-divider {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.2s;
}

.reveal.is-visible .section-divider {
  transform: scaleX(1);
}


/* ────────────────────────────────────────────────────
   15. SECTION TITLE — gradiente animado
──────────────────────────────────────────────────────*/
.section-title {
  background-size: 200% 100%;
  animation: gradientShift 6s ease-in-out infinite;
}

@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}


/* ────────────────────────────────────────────────────
   16. CONTACT BOX — borde animado tipo "scan"
──────────────────────────────────────────────────────*/
.contact-box {
  position: relative;
}

.contact-box::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 27px;
  background: var(--pl-grad);
  background-size: 200% 200%;
  animation: borderSpin 4s linear infinite;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.contact-box:hover::before {
  opacity: 1;
}

@keyframes borderSpin {
  0%   { background-position: 0% 0%; }
  100% { background-position: 200% 200%; }
}


/* ────────────────────────────────────────────────────
   17. FOOTER — aparece desde abajo
──────────────────────────────────────────────────────*/
footer {
  position: relative;
}

footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 1px;
  background: var(--pl-grad);
  opacity: 0.5;
}


/* ────────────────────────────────────────────────────
   18. HERO PILLS — flotan levemente
──────────────────────────────────────────────────────*/
.hero-pills li {
  transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}

.hero-pills li:hover {
  transform: translateY(-3px);
  border-color: rgba(229, 89, 177, 0.45);
  background: rgba(229, 89, 177, 0.08);
}


/* ────────────────────────────────────────────────────
   19. SCROLL CUE — flecha más viva
──────────────────────────────────────────────────────*/
.scroll-cue-arrow {
  display: inline-block;
  animation: bounceArrowBig 1.8s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
}

@keyframes bounceArrowBig {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(8px); }
}


/* ────────────────────────────────────────────────────
   20. MEMBERS PAGE — subgroup title con línea animada
──────────────────────────────────────────────────────*/
.gen-subgroup {
  position: relative;
  overflow: hidden;
}

.gen-subgroup h3 {
  position: relative;
  display: inline-block;
  padding-bottom: 0.4rem;
}

.gen-subgroup h3::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--pl-grad);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  border-radius: 999px;
}

.gen-subgroup:hover h3::after {
  transform: scaleX(1);
}


/* ────────────────────────────────────────────────────
   21. FILTER BUTTONS (members page) — transición activa
──────────────────────────────────────────────────────*/
.gen-filter-btn {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
              background-color 0.25s ease,
              border-color 0.25s ease,
              color 0.25s ease,
              box-shadow 0.25s ease;
}

.gen-filter-btn.active {
  animation: btnActivePop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes btnActivePop {
  0%   { transform: scale(0.95); }
  60%  { transform: scale(1.04); }
  100% { transform: scale(1); }
}


/* ────────────────────────────────────────────────────
   22. MEMBERS CARDS — shimmer en el borde top al hover
──────────────────────────────────────────────────────*/
.members-card::before {
  background-size: 200% 100%;
  animation: topBarShimmer 3s linear infinite paused;
}

.members-card:hover::before {
  animation-play-state: running;
}

@keyframes topBarShimmer {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}


/* ────────────────────────────────────────────────────
   23. PUZZLE ENGINE — panel tabs con transición
──────────────────────────────────────────────────────*/
.tab-panel {
  animation: panelFadeIn 0.35s ease forwards;
}

@keyframes panelFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.mode-switch-btn {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
              background-color 0.25s ease,
              border-color 0.25s ease,
              color 0.25s ease,
              box-shadow 0.25s ease;
}


/* ────────────────────────────────────────────────────
   24. QUESTION CARDS (engine) — entrada escalonada
──────────────────────────────────────────────────────*/
.question-card {
  animation: cardSlideIn 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.question-card:nth-child(1) { animation-delay: 0.05s; }
.question-card:nth-child(2) { animation-delay: 0.10s; }
.question-card:nth-child(3) { animation-delay: 0.15s; }
.question-card:nth-child(n+4) { animation-delay: 0.20s; }

@keyframes cardSlideIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ────────────────────────────────────────────────────
   25. ANSWER BUTTONS (player) — shake en respuesta mala
──────────────────────────────────────────────────────*/
.answer-btn.is-wrong {
  animation: wrongShake 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

.answer-btn.is-correct {
  animation: correctPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes wrongShake {
  10%, 90%  { transform: translateX(-2px); }
  20%, 80%  { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-4px); }
  40%, 60%  { transform: translateX(4px); }
  100%      { transform: translateX(0); }
}

@keyframes correctPop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.03); }
  100% { transform: scale(1); }
}


/* ────────────────────────────────────────────────────
   26. LEADERBOARD ROWS — entrada escalonada
──────────────────────────────────────────────────────*/
.leaderboard-row {
  animation: rowFadeIn 0.35s ease both;
}

.leaderboard-row:nth-child(1) { animation-delay: 0.05s; }
.leaderboard-row:nth-child(2) { animation-delay: 0.10s; }
.leaderboard-row:nth-child(3) { animation-delay: 0.15s; }
.leaderboard-row:nth-child(n+4) { animation-delay: 0.20s; }

@keyframes rowFadeIn {
  from { opacity: 0; transform: translateX(-12px); }
  to   { opacity: 1; transform: translateX(0); }
}

.leaderboard-row:hover {
  background: rgba(255, 255, 255, 0.07);
  transition: background 0.2s ease;
}

.leaderboard-rank {
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
              color 0.25s ease;
}

.leaderboard-row:hover .leaderboard-rank {
  transform: scale(1.15);
  color: var(--pl-pink);
}


/* ────────────────────────────────────────────────────
   27. STATUS PILL (engine) — parpadeo si es cloud
──────────────────────────────────────────────────────*/
.status-pill {
  position: relative;
}

.status-pill::before {
  content: "";
  position: absolute;
  left: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #090909;
  animation: statusBlink 2s ease-in-out infinite;
}

@keyframes statusBlink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.3; }
}


/* ────────────────────────────────────────────────────
   28. REDUCED MOTION — respeta preferencias
──────────────────────────────────────────────────────*/
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .timeline-item,
  .section-divider {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }

  .signal-card::before,
  .logo-ring-a,
  .logo-ring-b,
  .activity-card:hover .activity-icon,
  .fandom-badge:hover .fandom-icon,
  .section-title,
  .hero-kicker,
  .scroll-cue-arrow,
  .members-card::before,
  .question-card,
  .leaderboard-row,
  .answer-btn.is-wrong,
  .answer-btn.is-correct,
  .tab-panel {
    animation: none !important;
  }
}