/**
 * CamiLudik - Styles Principaux
 * Styles personnalisés pour l'application de quiz
 */

/* ===== CSS Variables - Theme System ===== */

:root {
  /* ===== PALETTE CAMILUDIK (modifier ici pour changer le thème) ===== */

  /* Couleurs principales (valeurs RGB pour usage dans rgba()) */
  --color-primary:       102, 188, 180; /* Turquoise principal  #66bcb4 */
  --color-primary-light: 138, 210, 204; /* Turquoise clair      #8ad2cc */
  --color-primary-dark:  72, 158, 150;  /* Turquoise foncé      #489e96 */
  --color-secondary:     255, 157, 0;   /* Orange caméléon      #ff9d00 */
  --color-accent:        255, 157, 0;   /* Orange caméléon      #ff9d00 */

  /* Couleurs de fond */
  --color-bg-primary:    251, 243, 234; /* Fond body         #fbf3ea */
  --color-bg-secondary:  244, 234, 221; /* Fond cards        #f4eadd */
  --color-bg-tertiary:   234, 221, 204; /* Fond inputs/btns  #eaddcc */

  /* Couleurs de texte */
  --color-text-primary:  124, 64, 4;   /* Texte principal   #7c4004 */
  --color-text-secondary: 180, 110, 40; /* Texte secondaire  #b46e28 */

  /* Couleurs de feedback (sémantiques — à ne pas changer) */
  --color-success: 34, 197, 94;         /* Vert  — bonne réponse */
  --color-error:   239, 68, 68;         /* Rouge — mauvaise réponse */
  --color-warning: 251, 191, 36;        /* Jaune — avertissement */
  --color-info:    102, 188, 180;       /* Turquoise info */

  /* Couleurs timer urgence (sémantiques — à ne pas changer) */
  --color-timer-urgent:  239, 68, 68;   /* Rouge  ≤5s */
  --color-timer-alert:   234, 179, 8;   /* Jaune  ≤8s */

  /* Bulles - Configuration */
  --bubble-opacity-base: 0.3;
  --bubble-opacity-hover: 0.5;
  --bubble-size-small: 1vw;
  --bubble-size-medium: 5vw;
  --bubble-size-large: 10vw;
  --bubble-duration-fast: 6s;
  --bubble-duration-medium: 9s;
  --bubble-duration-slow: 12s;

  /* Animations */
  --animation-duration-fast: 0.3s;
  --animation-duration-normal: 0.5s;
  --animation-ease: ease-in-out;

  /* Espacements */
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 1.5rem;
  --spacing-lg: 2rem;
  --spacing-xl: 3rem;

  /* Border radius */
  --radius-sm: 0.5rem;
  --radius-md: 1rem;
  --radius-lg: 1.5rem;
}

/* ===== Typographie CamiLudik ===== */

body, html {
  font-family: 'Almarai', ui-sans-serif, system-ui, sans-serif;
}

h1, h2, h3, .font-display {
  font-family: 'Baloo 2', 'Almarai', ui-sans-serif, system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* Couleur de texte secondaire CamiLudik — remplace gray-400 sur fond beige */
.text-gray-400 {
  color: #7c4004 !important;
}

/* ===== Bubbles Background ===== */

/* ===== Slime blobs ===== */

.bubbles {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  z-index: -1;
  pointer-events: none;
}

.bubble {
  position: absolute;
  background: rgba(var(--color-primary), 0.22);
  animation:
    slime-drift  var(--slime-drift-duration)  var(--slime-drift-delay)  ease-in-out alternate infinite,
    slime-morph  var(--slime-morph-duration)  var(--slime-morph-delay)  ease-in-out alternate infinite;
}

/* Positions, tailles et durées de chaque blob */
.bubble:nth-child(1)  { width: 18vw; height: 18vw; top:  5vh; left:  2vw;  --slime-drift-duration: 28s; --slime-drift-delay:  0s; --slime-morph-duration: 18s; --slime-morph-delay:  0s; }
.bubble:nth-child(2)  { width: 12vw; height: 12vw; top: 60vh; left: 80vw;  --slime-drift-duration: 34s; --slime-drift-delay: -8s; --slime-morph-duration: 22s; --slime-morph-delay: -4s; }
.bubble:nth-child(3)  { width:  8vw; height:  8vw; top: 30vh; left: 45vw;  --slime-drift-duration: 22s; --slime-drift-delay: -5s; --slime-morph-duration: 14s; --slime-morph-delay: -7s; }
.bubble:nth-child(4)  { width: 22vw; height: 22vw; top: 70vh; left: 15vw;  --slime-drift-duration: 38s; --slime-drift-delay: -3s; --slime-morph-duration: 26s; --slime-morph-delay: -2s; }
.bubble:nth-child(5)  { width: 10vw; height: 10vw; top: 15vh; left: 68vw;  --slime-drift-duration: 26s; --slime-drift-delay:-12s; --slime-morph-duration: 16s; --slime-morph-delay: -9s; }
.bubble:nth-child(6)  { width: 16vw; height: 16vw; top: 85vh; left: 55vw;  --slime-drift-duration: 32s; --slime-drift-delay: -6s; --slime-morph-duration: 20s; --slime-morph-delay: -5s; }
.bubble:nth-child(7)  { width:  6vw; height:  6vw; top: 45vh; left: 30vw;  --slime-drift-duration: 20s; --slime-drift-delay: -9s; --slime-morph-duration: 12s; --slime-morph-delay: -3s; }
.bubble:nth-child(8)  { width: 14vw; height: 14vw; top: 20vh; left: 88vw;  --slime-drift-duration: 30s; --slime-drift-delay: -2s; --slime-morph-duration: 24s; --slime-morph-delay: -8s; }

/* Les divs restantes sont cachées */
.bubble:nth-child(n+9) { display: none; }

/* ===== Animations slime ===== */

@keyframes slime-drift {
  0%   { transform: translate(0,      0)     scale(1);    }
  25%  { transform: translate(2vw,  -3vh)    scale(1.04); }
  50%  { transform: translate(-1vw,  4vh)    scale(0.97); }
  75%  { transform: translate(3vw,   2vh)    scale(1.02); }
  100% { transform: translate(-2vw, -2vh)    scale(1);    }
}

@keyframes slime-morph {
  0%   { border-radius: 60% 40% 55% 45% / 50% 60% 40% 50%; }
  20%  { border-radius: 40% 60% 70% 30% / 60% 40% 55% 45%; }
  40%  { border-radius: 70% 30% 45% 55% / 40% 65% 35% 60%; }
  60%  { border-radius: 35% 65% 55% 45% / 55% 35% 65% 45%; }
  80%  { border-radius: 55% 45% 35% 65% / 45% 55% 50% 50%; }
  100% { border-radius: 60% 40% 55% 45% / 50% 60% 40% 50%; }
}

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

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 5px rgba(var(--color-primary), 0.5); }
  50% { box-shadow: 0 0 20px rgba(var(--color-primary), 0.8), 0 0 30px rgba(var(--color-primary), 0.4); }
}

@keyframes fadeInModal {
  to { opacity: 1; }
}

@keyframes scaleInModal {
  to { transform: scale(1); }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ===== Utilitaires Généraux ===== */

.touch-manipulation {
  touch-action: manipulation;
}

.question-container {
  scroll-behavior: smooth;
}

.pulse-glow {
  animation: pulse-glow 2s var(--animation-ease) infinite;
}

.animate-spin {
  animation: spin 1s linear infinite;
}

/* ===== Options de Jeu ===== */

.time-option,
.game-mode {
  position: relative;
  background: white !important;
  color: rgb(100, 60, 10);
  border: 1.5px solid rgb(215, 198, 175) !important;
  border-radius: 0.875rem !important;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
  overflow: hidden;
}

/* Petit indicateur radio en haut à droite (boutons temps uniquement) */
.time-option::after {
  content: '';
  position: absolute;
  top: 7px;
  right: 7px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: transparent;
  border: 2px solid rgb(200, 185, 165);
  transition: all 0.18s ease;
}

.time-option.selected::after {
  background: rgb(102, 188, 180);
  border-color: rgb(102, 188, 180);
  box-shadow: 0 0 0 3px rgba(102, 188, 180, 0.18);
}

/* État sélectionné */
.time-option.selected,
.game-mode.selected {
  background: white !important;
  border-color: rgb(102, 188, 180) !important;
  color: rgb(72, 158, 150) !important;
  box-shadow: 0 0 0 3px rgba(102, 188, 180, 0.12), 0 2px 8px rgba(102, 188, 180, 0.2) !important;
  font-weight: 700;
}

/* Hover sur les non-sélectionnés */
.time-option:not(.selected):hover,
.game-mode:not(.selected):hover {
  border-color: rgb(170, 215, 210) !important;
  background: rgb(250, 253, 253) !important;
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(0,0,0,0.07) !important;
}

/* Mode de jeu - icône étoile reste jaune même quand sélectionné */
.game-mode.selected .bi-star-fill {
  color: rgb(245, 158, 11) !important;
}

.game-mode.selected .bi-wind {
  color: rgb(102, 188, 180) !important;
}

/* Texte secondaire des boutons mode de jeu */
.game-mode .text-sm {
  color: rgb(160, 120, 70);
}

.game-mode.selected .text-sm {
  color: rgb(102, 158, 150);
}

/* ===== Mode Libre ===== */

.free-mode {
  .answer-btn {
    display: none !important;
  }

  .answer-reveal {
    display: block !important;
  }
}

.answer-reveal {
  display: none;
  margin-top: var(--spacing-sm);
  padding: var(--spacing-sm);
  background: rgba(var(--color-success), 0.1);
  border: 2px solid rgb(var(--color-success));
  border-radius: var(--radius-sm);
  text-align: center;
}

.answer-reveal.correct {
  background: rgba(var(--color-success), 0.1);
  border-color: rgb(var(--color-success));
  color: rgb(var(--color-success));
}

.answer-reveal.incorrect {
  background: rgba(var(--color-error), 0.1);
  border-color: rgb(var(--color-error));
  color: rgb(var(--color-error));
}

/* ===== Modales de Feedback ===== */

.feedback-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  animation: fadeInModal var(--animation-duration-fast) ease-out forwards;
}

.feedback-modal-content {
  background: rgba(251, 243, 234, 0.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(102, 188, 180, 0.4);
  border-radius: var(--radius-lg);
  padding: 3rem 2rem;
  max-width: 500px;
  min-height: 300px;
  width: 90vw;
  text-align: center;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  transform: scale(0.9);
  animation: scaleInModal var(--animation-duration-fast) ease-out forwards;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* ===== Boutons de Réponse (Mobile) ===== */

.answer-btn {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  outline: none;
  transition: all 0.2s var(--animation-ease);
}

/* ===== DÉSACTIVATION COMPLÈTE DES ÉTATS FOCUS/ACTIVE (MOBILE FIX) ===== */

/* Désactiver tous les états de focus et active */
.answer-btn,
.answer-submit-btn {
  -webkit-tap-highlight-color: transparent !important;
  -webkit-touch-callout: none !important;
  -webkit-user-select: none !important;
  user-select: none !important;
  touch-action: manipulation !important;
}

.answer-btn:focus,
.answer-btn:active,
.answer-btn:focus-visible,
.answer-btn:focus-within,
.answer-submit-btn:focus,
.answer-submit-btn:active {
  outline: none !important;
  box-shadow: none !important;
}

/* Hover sur les boutons de réponse (non cliqués) */
.answer-btn:not(.correct):not(.incorrect):not([disabled]):hover {
  background-color: rgb(240, 250, 250) !important;
  border-color: rgb(102, 188, 180) !important;
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(102, 188, 180, 0.18) !important;
}

/* Retirer IMMÉDIATEMENT l'apparence active après le clic */
.answer-btn:not(.correct):not(.incorrect):active {
  background-color: rgb(230, 248, 246) !important;
  transform: none !important;
  border-color: rgb(102, 188, 180) !important;
}

/* Désactiver TOUS les états après désactivation du bouton */
.answer-btn:disabled,
.answer-btn[disabled] {
  background-color: white !important;
  border-color: rgb(215, 198, 175) !important;
  opacity: 0.6 !important;
  pointer-events: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* ===== Système de Trophées ===== */

#trophies-screen {
  position: relative;
  z-index: 1;
}

#history-screen {
  position: relative;
  z-index: 1;
}

.trophy-card {
  transition: all var(--animation-duration-fast) var(--animation-ease);
  cursor: pointer;
  position: relative;
  z-index: 10;
}

.trophy-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 25px 40px -5px rgba(var(--color-primary), 0.35), 0 10px 15px -3px rgba(var(--color-primary), 0.2);
}

.trophy-card.trophy-unlocked {
  animation: pulse-glow 2.5s var(--animation-ease) infinite;
  position: relative;
}

.trophy-card.trophy-unlocked::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
  border-radius: inherit;
  pointer-events: none;
}

/* Pokemon Style Cards */
.trophy-card-pokemon {
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  cursor: pointer;
  position: relative;
  z-index: 10;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
  transform-style: preserve-3d;
  will-change: transform;
}

.trophy-card-pokemon:hover {
  box-shadow: 0 30px 50px -5px rgba(102, 188, 180, 0.4), 0 15px 25px -3px rgba(102, 188, 180, 0.25);
}

.trophy-card-pokemon.trophy-unlocked {
  animation: card-shine 3s ease-in-out infinite;
}

/* Effet holographique qui suit le mouvement - reflet diffus */
.trophy-card-pokemon.trophy-unlocked::before {
  content: '';
  position: absolute;
  inset: -50%;
  background: radial-gradient(
    ellipse 800px 600px at var(--shine-x, 50%) var(--shine-y, 50%),
    rgba(255, 255, 255, 0.25) 0%,
    rgba(255, 255, 255, 0.15) 20%,
    rgba(255, 255, 255, 0.08) 40%,
    transparent 60%
  );
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
  z-index: 100;
  transition: opacity 0.3s ease;
  mix-blend-mode: overlay;
}

/* Activation progressive : toucher -> estompage -> plein effet */
.trophy-card-pokemon.trophy-unlocked.touch-start::before {
  opacity: 0.3;
  transition: opacity 0.15s ease-in;
}

.trophy-card-pokemon.trophy-unlocked:hover::before,
.trophy-card-pokemon.trophy-unlocked.touch-active::before {
  opacity: 1;
  transition: opacity 0.2s ease-out;
}

/* Effet de reflet arc-en-ciel additionnel - plus diffus */
.trophy-card-pokemon.trophy-unlocked::after {
  content: '';
  position: absolute;
  inset: -30%;
  background: linear-gradient(
    var(--shine-angle, 115deg),
    transparent 0%,
    rgba(255, 150, 255, 0.12) 30%,
    rgba(150, 220, 255, 0.12) 50%,
    rgba(255, 255, 150, 0.12) 70%,
    transparent 100%
  );
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
  z-index: 99;
  transition: opacity 0.3s ease;
  mix-blend-mode: screen;
}

/* Activation progressive pour l'arc-en-ciel */
.trophy-card-pokemon.trophy-unlocked.touch-start::after {
  opacity: 0.2;
  transition: opacity 0.15s ease-in;
}

.trophy-card-pokemon.trophy-unlocked:hover::after,
.trophy-card-pokemon.trophy-unlocked.touch-active::after {
  opacity: 0.8;
  transition: opacity 0.2s ease-out;
}

@keyframes card-shine {
  0%, 100% {
    filter: brightness(1) drop-shadow(0 0 0px rgba(102, 188, 180, 0));
  }
  50% {
    filter: brightness(1.05) drop-shadow(0 5px 15px rgba(102, 188, 180, 0.3));
  }
}

/* Niveaux de Rareté */

/* Cartes masquées - toujours grises/neutres avec ombre blanche */
.trophy-card-pokemon:not(.trophy-unlocked) {
  border-color: rgb(75, 85, 99) !important;
  background: rgba(75, 85, 99, 0.15) !important;
  box-shadow: 0 4px 6px -1px rgba(255, 255, 255, 0.1), 0 2px 4px -1px rgba(255, 255, 255, 0.05);
}

/* Commun - Gris */
.rarity-commun.trophy-unlocked {
  border-color: rgb(107, 114, 128);
  background: rgba(107, 114, 128, 0.15);
  box-shadow: 0 4px 6px -1px rgba(107, 114, 128, 0.3), 0 2px 4px -1px rgba(107, 114, 128, 0.2);
  transition: box-shadow 0.3s ease;
}

.rarity-commun.trophy-unlocked:hover,
.rarity-commun.trophy-unlocked.hover-active,
.rarity-commun.trophy-unlocked.touch-active {
  box-shadow: 0 20px 25px -5px rgba(107, 114, 128, 0.5), 0 10px 10px -5px rgba(107, 114, 128, 0.4);
}

/* Rare - Turquoise */
.rarity-rare.trophy-unlocked {
  border-color: rgb(102, 188, 180);
  background: rgba(102, 188, 180, 0.15);
  box-shadow: 0 4px 6px -1px rgba(102, 188, 180, 0.3), 0 2px 4px -1px rgba(102, 188, 180, 0.2);
  transition: box-shadow 0.3s ease;
}

.rarity-rare.trophy-unlocked:hover,
.rarity-rare.trophy-unlocked.hover-active,
.rarity-rare.trophy-unlocked.touch-active {
  box-shadow: 0 20px 25px -5px rgba(102, 188, 180, 0.5), 0 10px 10px -5px rgba(102, 188, 180, 0.4);
}

/* Épique - Violet */
.rarity-épique.trophy-unlocked {
  border-color: rgb(147, 51, 234);
  background: rgba(147, 51, 234, 0.15);
  box-shadow: 0 4px 6px -1px rgba(147, 51, 234, 0.3), 0 2px 4px -1px rgba(147, 51, 234, 0.2);
  transition: box-shadow 0.3s ease;
}

.rarity-épique.trophy-unlocked:hover,
.rarity-épique.trophy-unlocked.hover-active,
.rarity-épique.trophy-unlocked.touch-active {
  box-shadow: 0 20px 25px -5px rgba(147, 51, 234, 0.5), 0 10px 10px -5px rgba(147, 51, 234, 0.4);
}

/* Légendaire - Orange */
.rarity-légendaire.trophy-unlocked {
  border-color: rgb(249, 115, 22);
  background: rgba(249, 115, 22, 0.15);
  box-shadow: 0 4px 6px -1px rgba(249, 115, 22, 0.3), 0 2px 4px -1px rgba(249, 115, 22, 0.2);
  transition: box-shadow 0.3s ease;
}

.rarity-légendaire.trophy-unlocked:hover,
.rarity-légendaire.trophy-unlocked.hover-active,
.rarity-légendaire.trophy-unlocked.touch-active {
  box-shadow: 0 20px 25px -5px rgba(249, 115, 22, 0.5), 0 10px 10px -5px rgba(249, 115, 22, 0.4);
}

.badge-commun {
  background: rgb(107, 114, 128);
  color: white;
}

.badge-rare {
  background: rgb(102, 188, 180);
  color: white;
}

.badge-épique {
  background: rgb(147, 51, 234);
  color: white;
  font-weight: 600;
}

.badge-légendaire {
  background: rgb(249, 115, 22);
  color: white;
  font-weight: 600;
}

/* Trophy Download Button */
[download] {
  outline: none;
}

[download]:hover {
  transform: scale(1.15) rotate(5deg);
}

[download]:active {
  transform: scale(0.95);
}

/* ===== Unified Button Styles ===== */

.btn-base {
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  transition: all 0.2s ease-in-out;
  font-weight: 500;
  font-size: 0.875rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: none;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}

/* Primary button style */
.btn-primary {
  background-color: rgb(102, 188, 180);
  color: white;
  border: none;
  box-shadow: 0 2px 6px rgba(102, 188, 180, 0.35);
  font-weight: 600;
}

.btn-primary:hover {
  background-color: rgb(82, 170, 162);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 188, 180, 0.4);
}

.btn-primary:active {
  transform: translateY(0);
  box-shadow: 0 1px 4px rgba(102, 188, 180, 0.3);
}

/* Secondary button style */
.btn-secondary {
  background-color: white;
  color: rgb(124, 64, 4);
  border: 1.5px solid rgb(215, 198, 175) !important;
  font-weight: 600;
}

.btn-secondary:hover {
  background-color: rgb(253, 248, 242);
  border-color: rgb(190, 165, 135) !important;
  transform: translateY(-2px);
  box-shadow: 0 3px 8px rgba(0,0,0,0.08);
}

.btn-secondary:active {
  transform: translateY(0);
}

.btn-secondary.selected {
  background-color: rgb(234, 221, 204);
  color: rgb(124, 64, 4);
  border-color: rgb(200, 180, 155) !important;
}

/* Category filter button */
.btn-category {
  padding: 0.5rem 1.25rem;
  border-radius: 2rem;
  transition: all 0.2s ease-in-out;
  font-weight: 700;
  font-size: 0.875rem;
  border: 2px solid rgb(102, 188, 180);
  cursor: pointer;
  background-color: white;
  color: rgb(72, 158, 150);
}

.btn-category:hover {
  background-color: rgb(102, 188, 180);
  color: white;
  transform: translateY(-1px);
}

.btn-category.selected {
  background-color: rgb(102, 188, 180);
  color: white;
  border-color: rgb(102, 188, 180);
  box-shadow: 0 4px 12px rgba(102, 188, 180, 0.4);
}

/* ===== Hero Section Styles ===== */

#latest-quiz-hero-card {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

#latest-quiz-hero-card:hover {
  transform: translateY(-4px);
}

#hero-start-quiz-btn {
  transition: all 0.3s ease-in-out;
}

#hero-start-quiz-btn:hover {
  transform: translateY(-2px);
}

#hero-start-quiz-btn:active {
  transform: translateY(0);
}
}

/* ===== Sélecteur de Temps Modal ===== */

#time-selector-modal {
  animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

#time-selector-modal .bg-gray-800 {
  animation: slideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

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