/* assets/css/main.css */

/* Importation des polices Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=Plus+Jakarta+Sans:wght@500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');

/* Déclarations de base & Smooth Scroll */
html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Nunito', sans-serif;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Plus Jakarta Sans', sans-serif;
}

/* Couleurs personnalisées QuizTech / KEIN-TECH */
:root {
  --color-brand-purple: #5D45E3;
  --color-brand-orange: #FF5733;
  --color-brand-dark: #0F172A;
}

/* 1. EFFET DE BRILLANCE BOUTON (SHINE EFFECT) */
.btn-shine {
  position: relative;
  overflow: hidden;
}

.btn-shine::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    60deg,
    transparent,
    rgba(255, 255, 255, 0.25),
    transparent
  );
  transform: rotate(30deg) translateX(-100%);
  transition: transform 0.8s ease;
}

.btn-shine:hover::after {
  transform: rotate(30deg) translateX(100%);
}

/* 2. ANIMATION FLOTTANTE DOUCE */
@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}

.animate-float {
  animation: float 4s ease-in-out infinite;
}

/* 3. ANIMATION PULSE DOUX */
@keyframes softPulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.9;
    transform: scale(1.03);
  }
}

.animate-soft-pulse {
  animation: softPulse 3.5s ease-in-out infinite;
}

/* 4. SCROLL REVEAL ULTRA FLUIDE & NATIVE (HW ACCELERATED) */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(28px);
  will-change: opacity, transform;
  transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

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

/* 5. EFFET GLASSMORPHISM ET SURVOL CARTE ENRICHIS */
.hover-lift {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.3s ease;
}

.hover-lift:hover {
  transform: translateY(-6px);
}