/* ============================================
   SMOOTH PAGE TRANSITIONS
   Animációk oldalbetöltéshez és navigációhoz
   ============================================ */

/* === Alapvető fade-in animáció oldalbetöltéskor === */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-20px);
  }
}

/* === Slide animációk === */
@keyframes slideInFromRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

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

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

/* === Scale animáció (zoom effekt) === */
@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* === Körbe forgó betöltés === */
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* === Pulse animáció (figyelemfelkeltő) === */
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.02); }
}

/* ============================================
   ALKALMAZÁS AZ OLDALAKRA
   ============================================ */

/* Body alap animáció - minden oldal fade-in-nel indul */
body {
  animation: fadeIn 0.4s ease-out;
}

/* Page transition class - használható JS-ből navigáció előtt */
body.page-exit {
  animation: fadeOut 0.3s ease-in forwards;
}

/* === Hero szekció (landing page) === */
.hero {
  animation: fadeIn 0.6s ease-out;
}

.hero h1 {
  animation: slideInFromBottom 0.5s ease-out 0.1s both;
}

.hero p {
  animation: slideInFromBottom 0.5s ease-out 0.2s both;
}

.hero .cta-button {
  animation: slideInFromBottom 0.5s ease-out 0.3s both;
}

/* === Info szekció === */
.info-section {
  animation: fadeIn 0.6s ease-out 0.4s both;
}

.info-block, .info-card {
  animation: slideInFromBottom 0.5s ease-out 0.5s both;
}

/* === Teszt oldal === */
.page {
  animation: fadeIn 0.4s ease-out;
}

.header {
  animation: slideInFromBottom 0.4s ease-out 0.1s both;
}

.progress-bar {
  animation: slideInFromBottom 0.4s ease-out 0.15s both;
}

/* Kérdés kártyák staggered animáció */
.question-card {
  animation: slideInFromRight 0.4s ease-out both;
}

.question-card:nth-child(1) { animation-delay: 0.1s; }
.question-card:nth-child(2) { animation-delay: 0.2s; }
.question-card:nth-child(3) { animation-delay: 0.3s; }

/* Új kérdések betöltésekor */
.question-card.entering {
  animation: slideInFromRight 0.35s ease-out both;
}

/* Footer gomb */
.footer {
  animation: fadeIn 0.4s ease-out 0.4s both;
}

/* === Eredmény oldal === */
.result-container {
  animation: scaleIn 0.5s ease-out;
}

.result-core h1 {
  animation: slideInFromBottom 0.5s ease-out 0.2s both;
}

.result-text {
  animation: slideInFromBottom 0.5s ease-out 0.3s both;
}

.secondary {
  animation: slideInFromBottom 0.5s ease-out 0.4s both;
}

.result-action {
  animation: slideInFromBottom 0.5s ease-out 0.5s both;
}

/* === Politikai térkép (compass) animációk === */
.compass-container {
  animation: scaleIn 0.6s ease-out 0.3s both;
}

.compass-dot {
  animation: pulse 2s ease-in-out infinite;
}

/* Pont megjelenése a térképen */
@keyframes dotAppear {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.3);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

.compass-dot.appear {
  animation: dotAppear 0.8s ease-out forwards;
}

/* === Progress bar animáció === */
.progress-fill {
  transition: width 0.4s ease-out;
}

/* === Skála gombok hover === */
.scale-segment {
  transition: all 0.2s ease;
}

.scale-segment:hover {
  transform: translateY(-2px);
}

.scale-segment.selected {
  transition: all 0.15s ease;
}

/* === Gomb hover animációk === */
.cta-button,
.next-btn,
.result-action button {
  transition: all 0.25s ease;
}

.cta-button:hover,
.next-btn:hover,
.result-action button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(79, 110, 247, 0.3);
}

.cta-button:active,
.next-btn:active,
.result-action button:active {
  transform: translateY(0);
  transition: all 0.1s ease;
}

/* === Loading spinner (opcionális) === */
.loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(79, 110, 247, 0.2);
  border-top-color: #4F6EF7;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* === Smooth scroll === */
html {
  scroll-behavior: smooth;
}

/* === Reduced motion támogatás === */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  html {
    scroll-behavior: auto;
  }
}