/* ═══════════════════════════════════════════════════════
   animations.css — Neo Puzzle Lovers
═══════════════════════════════════════════════════════ */

/* ────────────────────────────────────────────────────
   0. Anti-flicker
──────────────────────────────────────────────────────*/
.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 {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* will-change: solo al hover/focus, no permanente */
.btn-primary:hover, .btn-primary:focus-visible,
.btn-secondary:hover, .btn-secondary:focus-visible,
.contact-email:hover, .contact-email:focus-visible,
.nav-links a:hover, .nav-links a:focus-visible,
.activity-card:hover, .activity-card:focus-within,
.fandom-badge:hover, .fandom-badge:focus-visible,
.member-card:hover, .member-card:focus-within,
.member-avatar:hover,
.work-card:hover, .work-card:focus-within,
.work-tag:hover,
.engine-card:hover, .engine-card:focus-within,
.engine-icon:hover,
.faq-item:hover, .faq-item:focus-within,
.gen-filter-btn:hover, .gen-filter-btn:focus-visible,
.mode-switch-btn:hover, .mode-switch-btn:focus-visible,
.answer-btn:hover, .answer-btn:focus-visible {
  will-change: transform;
}

/* 1. Movimiento flotante del logo */
@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 — entrada 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 en 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 — pulso en la barra 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 — hover
──────────────────────────────────────────────────────*/
.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 {
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.fandom-badge:hover .fandom-icon {
  transform: scale(1.15);
}


/* ────────────────────────────────────────────────────
   8. Member cards (index)
──────────────────────────────────────────────────────*/
.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 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
──────────────────────────────────────────────────────*/
.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
──────────────────────────────────────────────────────*/
.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
──────────────────────────────────────────────────────*/
.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);
}

/* Entrada del 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 — 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
──────────────────────────────────────────────────────*/
.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 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 paused;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.contact-box:hover::before {
  opacity: 1;
  animation-play-state: running;
}

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


/* ────────────────────────────────────────────────────
   17. Footer
──────────────────────────────────────────────────────*/
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
──────────────────────────────────────────────────────*/
.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
──────────────────────────────────────────────────────*/
.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
──────────────────────────────────────────────────────*/
.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)
──────────────────────────────────────────────────────*/
.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 borde top
──────────────────────────────────────────────────────*/
.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
──────────────────────────────────────────────────────*/
.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)
──────────────────────────────────────────────────────*/
.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
──────────────────────────────────────────────────────*/
.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)
──────────────────────────────────────────────────────*/
.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
──────────────────────────────────────────────────────*/
@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;
  }
}