/* ============================================================
   SURVEOO — Custom CSS
   Landing page styles: animations, transitions & components
   Brand: #4f13b5 → #6418c3 → #7b1cd3
   ============================================================ */

/* ==================== 1. GLOBAL ==================== */

html {
  scroll-behavior: smooth;
}

button, [role="button"], a[onclick] {
  cursor: pointer;
}

::selection {
  background-color: #daccff;
  color: #1f054c;
}

/* Pulse animation for online badge */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* ==================== 2. HERO CLIP-PATH ==================== */

#hero {
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 88%, 0 100%);
  clip-path: polygon(0 0, 100% 0, 100% 88%, 0 100%);
}

@media (max-width: 1023px) {
  #hero {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 94%, 0 100%);
    clip-path: polygon(0 0, 100% 0, 100% 94%, 0 100%);
  }
}

/* ==================== 3. SUB-PIXEL GAP FIX ==================== */

main > * + * {
  position: relative;
}

main > * + *::before {
  content: '';
  position: absolute;
  top: -2px;
  left: 0;
  right: 0;
  height: 4px;
  background: inherit;
  pointer-events: none;
}

/* ==================== 4. HEADER TRANSITIONS ==================== */

#header {
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

#header.header-scrolled {
  background: #fff !important;
  box-shadow: 0 1px 12px rgba(0, 0, 0, 0.06) !important;
}

#header.header-scrolled .nav-bar {
  background: #fff !important;
  border-bottom-color: rgba(0, 0, 0, 0.06) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

#header.header-scrolled .online-badge {
  color: rgba(75, 85, 99, 0.5);
}

#header.header-scrolled .online-badge span {
  color: #16a34a;
}

#header.header-scrolled .online-badge-separator {
  border-color: rgba(0, 0, 0, 0.1) !important;
}

#header.header-scrolled .nav-link {
  color: #4B5563 !important;
}

#header.header-scrolled .nav-link:hover {
  color: #4f13b5 !important;
  background: rgba(79, 19, 181, 0.06) !important;
}

#header.header-scrolled .hamburger-lines span {
  background: #1f054c !important;
}

#header.header-scrolled #mobile-menu-btn {
  background: rgba(79, 19, 181, 0.06) !important;
}

#header.header-scrolled #mobile-menu-btn:hover {
  background: rgba(79, 19, 181, 0.1) !important;
}

/* Bouton « Se connecter » du header — adaptatif : clair sur le header sombre (haut),
   foncé une fois le header scrollé en blanc (sinon texte blanc invisible). */
.btn-login-nav {
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: rgba(255, 255, 255, 0.95);
}
.btn-login-nav:hover {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.45);
  color: #fff;
}
#header.header-scrolled .btn-login-nav {
  border-color: rgba(31, 5, 76, 0.18);
  color: #4B5563;
}
#header.header-scrolled .btn-login-nav:hover {
  background: rgba(79, 19, 181, 0.06);
  border-color: rgba(79, 19, 181, 0.35);
  color: #4f13b5;
}

.nav-logo {
  filter: brightness(0) invert(1);
}

#header.header-scrolled .nav-logo {
  filter: none;
}

/* ==================== 5. NAV LINK STYLE ==================== */

.nav-link {
  position: relative;
  color: rgba(255, 255, 255, 0.75);
}

.nav-link:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}

/* ==================== 6. HAMBURGER ANIMATED ICON ==================== */

.hamburger-lines {
  width: 22px;
  height: 16px;
  position: relative;
}

.hamburger-lines span {
  display: block;
  position: absolute;
  width: 100%;
  height: 2px;
  background: white;
  border-radius: 2px;
  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.hamburger-lines span:nth-child(1) {
  top: 0;
}

.hamburger-lines span:nth-child(2) {
  top: 7px;
  width: 70%;
}

.hamburger-lines span:nth-child(3) {
  top: 14px;
}

/* Open state */
.hamburger-open span:nth-child(1) {
  top: 7px;
  transform: rotate(45deg);
}

.hamburger-open span:nth-child(2) {
  opacity: 0;
  transform: translateX(8px);
}

.hamburger-open span:nth-child(3) {
  top: 7px;
  transform: rotate(-45deg);
}

/* ==================== 7. MOBILE MENU PANEL ==================== */

.mobile-menu-panel {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
}

.mobile-menu-panel.open {
  max-height: 600px;
  opacity: 1;
}

.mobile-nav-item {
  opacity: 0;
  transform: translateY(12px) scale(0.95);
  transition: opacity 0.35s ease, transform 0.35s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.mobile-menu-panel.open .mobile-nav-item {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition-delay: calc(0.06s + var(--delay, 0) * 0.07s);
}

.mobile-menu-panel .mobile-nav-item:active {
  transform: scale(0.97);
}

/* Grid card hover glow */
.mobile-menu-panel a.mobile-nav-item:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}

/* Mobile CTA button — keep text visible on hover */
.mobile-menu-panel .mobile-cta-btn:hover {
  background: #FCD34D !important;
  color: #1f054c !important;
}

/* Non-panel context (e.g. sticky CTA area) */
:not(.mobile-menu-panel) > .mobile-nav-item:hover,
:not(.mobile-menu-panel) > .mobile-nav-item:active {
  background: rgba(79, 19, 181, 0.04);
}

/* ==================== 8. CTA PULSE ANIMATION ==================== */

.cta-hero-btn {
  animation: cta-pulse 2.5s ease-in-out infinite;
}

.cta-hero-btn:hover {
  animation: none;
}

@keyframes cta-pulse {
  0%, 100% {
    box-shadow: 0 8px 32px rgba(251, 191, 36, 0.35),
                0 0 0 0 rgba(251, 191, 36, 0.3);
  }
  50% {
    box-shadow: 0 8px 32px rgba(251, 191, 36, 0.35),
                0 0 0 12px rgba(251, 191, 36, 0);
  }
}

/* ==================== 9. COUNTER ANIMATION ==================== */

@keyframes counter-fade-in {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.counter-item {
  opacity: 0;
  transform: translateY(16px);
}

.counter-item.visible {
  animation: counter-fade-in 0.5s ease-out forwards;
}

/* ==================== 10. SURVEY CARDS MARQUEE ==================== */

@keyframes marquee-up {
  0% { transform: translateY(0); }
  100% { transform: translateY(-50%); }
}

.marquee-up {
  animation: marquee-up 30s linear infinite;
}

.marquee-up:hover {
  animation-play-state: paused;
}

/* Horizontal marquee (recent withdrawals) */
@keyframes marquee-left {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes marquee-right {
  0% { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}

.marquee-left {
  animation: marquee-left 80s linear infinite;
}

.marquee-right {
  animation: marquee-right 90s linear infinite;
}

.marquee-left:hover,
.marquee-right:hover {
  animation-play-state: paused;
}

@media (max-width: 639px) {
  .marquee-left { animation-duration: 50s; }
  .marquee-right { animation-duration: 55s; }
}

/* Survey card clickable hover effect */
.survey-card {
  cursor: pointer;
  transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}

.survey-card:hover {
  transform: scale(1.04);
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(79, 19, 181, 0.5) !important;
  box-shadow: 0 0 20px rgba(79, 19, 181, 0.2), 0 4px 12px rgba(0, 0, 0, 0.15);
}

.survey-card:active {
  transform: scale(0.98);
}

/* Survey panel height */
#survey-panel {
  height: 329px;
}
@media (min-width: 1024px) {
  #survey-panel {
    height: 449px;
  }
}

/* Fixed height panel to prevent layout shifts */
.survey-panel-scroll {
  position: relative;
  overflow: hidden;
  flex: 1 1 0%;
  min-height: 0;
}

/* ==================== 11. HOW-IT-WORKS STEPS ANIMATION ==================== */

/* Staggered reveal for step cards */
.step-card.reveal-item.visible {
  animation-delay: calc(var(--step, 0) * 0.25s);
}

/* Number circle pop animation */
@keyframes step-pop {
  0% { transform: scale(0); opacity: 0; }
  60% { transform: scale(1.2); opacity: 1; }
  80% { transform: scale(0.9); }
  100% { transform: scale(1); opacity: 1; }
}

.step-number {
  opacity: 0;
  transform: scale(0);
}

.step-card.reveal-item.visible .step-number {
  animation: step-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: calc(var(--step, 0) * 0.25s + 0.2s);
}

/* Connecting line that draws itself */
@media (min-width: 768px) {
  .step-card {
    position: relative;
  }
  .step-card:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 32px;
    left: calc(50% + 48px);
    width: 0;
    max-width: calc(100% - 96px);
    height: 2px;
    background: repeating-linear-gradient(90deg, #c0a3ff 0, #c0a3ff 6px, transparent 6px, transparent 12px);
    z-index: 1;
    transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .step-card.reveal-item.visible:not(:last-child)::after {
    width: calc(100% - 96px);
    transition-delay: calc(var(--step, 0) * 0.25s + 0.4s);
  }
}

/* ==================== 12. BENEFIT CARDS SCROLL ANIMATION ==================== */

@keyframes slide-up {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.reveal-item {
  opacity: 0;
  transform: translateY(24px);
}

.reveal-item.visible {
  animation: slide-up 0.6s ease-out forwards;
}

/* ==================== 13. FAQ ACCORDION ==================== */

.faq-item .faq-icon {
  transition: transform 0.3s ease;
}

.faq-item.active .faq-icon {
  transform: rotate(180deg);
}

.faq-item.active {
  border-color: rgba(79, 19, 181, 0.15);
  box-shadow: 0 4px 20px rgba(79, 19, 181, 0.08);
}

.faq-item.active .faq-toggle {
  background: #4f13b5;
}

.faq-item.active .faq-toggle .faq-icon {
  color: white;
}

.faq-item .faq-emoji {
  transition: transform 0.3s ease;
}

.faq-item.active .faq-emoji {
  transform: scale(1.1);
}

.faq-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Plafond large : les réponses détaillées (2 paragraphes) sont hautes, surtout en
   mobile étroit. 1300px couvre la plus longue sans coupure (box-sizing border-box
   de Tailwind → repli complet à 0 quand fermé, padding compris). */
.faq-item.active .faq-content {
  max-height: 1300px;
}

/* Prose des réponses FAQ (HTML multi-paragraphes repris de KingOpinion) */
.faq-prose p + p { margin-top: 0.85em; }
.faq-prose strong { color: #374151; font-weight: 600; }

/* ==================== 14. FUNNEL MODAL ==================== */

#funnel-overlay {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

#funnel-overlay.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Stagger animation handled in JS (showStep) */

/* Country chevron rotation */
.rotate-180 {
  transform: rotate(180deg);
}

/* Category / frequency option — selected state */
.category-option,
.frequency-option {
  position: relative;
}

.category-option.selected,
.frequency-option.selected {
  border-color: #4f13b5 !important;
  background: rgba(79, 19, 181, 0.08) !important;
  box-shadow: 0 0 0 1px rgba(79, 19, 181, 0.15);
}

.category-option.selected::after,
.frequency-option.selected::after {
  content: '';
  position: absolute;
  top: 8px;
  right: 8px;
  width: 18px;
  height: 18px;
  background: #4f13b5;
  border-radius: 50%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z'/%3E%3C/svg%3E");
  background-size: 11px;
  background-position: center;
  background-repeat: no-repeat;
}

/* Funnel validation shake */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

/* Submit button states */
.submit-btn {
  background-color: #e5e7eb;
  color: #9ca3af;
  cursor: not-allowed;
}

.submit-btn.submit-ready {
  background-color: #FBBF24;
  color: #1f054c;
  cursor: pointer;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  position: relative;
  overflow: hidden;
}

.submit-btn.submit-ready::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
  animation: shimmer 3s ease-in-out infinite;
  pointer-events: none;
}

.submit-btn.submit-ready:hover {
  background-color: #FDE68A;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.submit-btn.submit-ready:hover::before {
  animation: none;
  opacity: 0;
}

/* ==================== 15. FUNNEL MOBILE FULLSCREEN ==================== */

@media (max-width: 639px) {
  .funnel-container {
    border-radius: 0 !important;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
  }

  #funnel-header {
    border-radius: 0 !important;
    flex-shrink: 0;
    padding-top: max(16px, env(safe-area-inset-top));
  }

  .funnel-step:not(.hidden) {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Steps 2 & 3 have more content, align top */
  .funnel-step[data-step="2"]:not(.hidden),
  .funnel-step[data-step="3"]:not(.hidden) {
    justify-content: flex-start;
  }
}

/* Country dropdown items */
.country-item:active {
  background-color: rgba(79, 19, 181, 0.08);
}

/* Selected country trigger */
#country-trigger.border-sv-500 {
  border-color: #4f13b5;
}

/* ==================== 16. LIVE TOAST ==================== */

#live-toast {
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
  transition: opacity 0.4s ease, transform 0.4s ease;
}

#live-toast.show {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* ==================== 17. STICKY CTA ==================== */

/* Position fixée explicite : les utilitaires Tailwind (fixed / bottom-0 / translate-y-full)
   ne sont pas tous présents dans le bundle compilé (purge) → le CTA retombait dans le flux
   (visible seulement en bas de page, près du footer). On garantit ici le comportement sticky. */
#sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  /* `translate: none` neutralise la classe `translate-y-full` du markup, qui pose la
     propriété INDIVIDUELLE `translate: 0 100%` (Tailwind) — que le JS de révélation (il
     toggle `transform`) ne pouvait pas annuler. Une fois `translate` neutralisé, le toggle
     `transform` du JS contrôle réellement l'affichage : caché par défaut (translateY(100%)),
     révélé (translateY(0)) une fois le hero dépassé. */
  translate: none;
  transform: translateY(100%);
  transition: transform 0.3s ease;
}
@media (min-width: 1024px) {
  #sticky-cta { display: none; } /* lg:hidden — sticky CTA sur mobile uniquement */
}

#sticky-cta.visible {
  transform: translateY(0);
}

@media (max-width: 1023px) {
  body.sticky-cta-active footer {
    padding-bottom: 72px;
  }
}

/* ==================== CTA SHIMMER EFFECT ==================== */

.cta-shimmer {
  position: relative;
  overflow: hidden;
}
.cta-shimmer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
  animation: shimmer 3s ease-in-out infinite;
  pointer-events: none;
  will-change: transform;
}
.cta-shimmer:hover::before {
  animation: none;
  opacity: 0;
}
@keyframes shimmer {
  0% { transform: translateX(-100%); }
  50% { transform: translateX(100%); }
  100% { transform: translateX(100%); }
}

/* ==================== EARNINGS TIERS ==================== */

.earning-tier {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.earning-tier:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(79, 19, 181, 0.12);
}
/* ==================== SUBTLE PATTERNS ==================== */

.dot-pattern {
  background-image: radial-gradient(rgba(79, 19, 181, 0.06) 1px, transparent 1px);
  background-size: 24px 24px;
}

/* ==================== 18. HERO ENTRY ANIMATION ==================== */

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

.hero-fade {
  animation: heroFadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(var(--hero-i, 0) * 0.12s + 0.15s);
}

/* ==================== 19. BENEFIT STAGGER ANIMATION ==================== */

.reveal-item[style*="--delay"] {
  transition-delay: calc(var(--delay) * 0.1s);
}

.reveal-item.visible[style*="--delay"] {
  animation-delay: calc(var(--delay) * 0.1s);
}

/* ==================== 20. FOCUS VISIBLE ==================== */

*:focus-visible {
  outline: 2px solid #4f13b5;
  outline-offset: 2px;
  border-radius: 4px;
}

/* ==================== 21. REDUCED MOTION ==================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Hero home : padding haut responsive (header fixe h-14 mobile / h-16 desktop).
   Réduit le grand vide en haut sur mobile (avant : 140px en dur). */
#hero {
  padding-top: 88px;
}
@media (min-width: 640px) {
  #hero { padding-top: 108px; }
}
@media (min-width: 1024px) {
  #hero { padding-top: 140px; }
}