/*──────────────────────────────────────────────────────────────────────────────────
  LIQUID GLASS BUTTON - STYLES ORGANISÉS ET OPTIMISÉS
  Réorganisation pour une meilleure maintenance et lisibilité
──────────────────────────────────────────────────────────────────────────────────*/

/* Keyframes of the hover / tap animation (section 8), split out to keep this file short */
@import url('./LiquidGlassButton.animations.css');

/* ====================================================================
   1. VARIABLES CSS ET CONFIGURATION GLOBALE
==================================================================== */
:root {
  /* Couleurs principales */
  --bg-color: rgba(255, 255, 255, 0.0001);
  --text-color-light: rgba(255, 255, 255, 0.95);
  --text-color-dark: rgba(0, 0, 0, 0.85);
  --text-color: var(--text-color-dark);
  --shadow-color: rgba(0, 0, 0, 0.03);
  --inset-shadow-top: rgba(100, 180, 255, 0.06);
  --inset-shadow-bottom: rgba(0, 0, 0, 0.02);

  /* Effets de verre optimisés */
  --glass-blur: 6px;
  --glass-saturate: 110%;
  --glass-contrast: 102%;

  /* Variables de transformation 3D */
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --bubble-y: 0px;
  --bubble-scale: 1;

  /* Transitions optimisées */
  --transform-duration: 1.2s;
  --transform-timing: cubic-bezier(0.34, 1.56, 0.64, 1);
  --btn-transition:
    transform var(--transform-duration) var(--transform-timing),
    padding 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
    min-width 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
    min-height 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
    border-radius 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease-out;
  --btn-transition-no-transform:
    padding 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
    min-width 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
    min-height 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease-out;
}

/* Mode sombre */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: rgba(15, 15, 15, 0.0005);
    --text-color: var(--text-color-light);
    --shadow-color: rgba(100, 180, 255, 0.08);
    --inset-shadow-top: rgba(100, 180, 255, 0.15);
    --inset-shadow-bottom: rgba(100, 180, 255, 0.08);
  }
}

/* ====================================================================
   2. STYLES PRINCIPAUX DU BOUTON (DESKTOP)
==================================================================== */
#liquid-glass-button {
  position: fixed;
  bottom: 24px;
  left: 50%;
  min-height: 48px;
  padding: 12px 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font:
    600 1.1rem/1 system-ui,
    -apple-system,
    sans-serif;
  color: var(--text-color);

  /* Background avec dégradés subtils */
  background:
    radial-gradient(ellipse at center, rgba(100, 180, 255, 0.005) 0%, var(--bg-color) 70%),
    linear-gradient(
      135deg,
      rgba(100, 180, 255, 0.002) 0%,
      var(--bg-color) 50%,
      rgba(100, 180, 255, 0.002) 100%
    );

  /* Effet verre */
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate))
    contrast(var(--glass-contrast));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate))
    contrast(var(--glass-contrast));

  /* Style et forme */
  border-radius: 50px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow:
    0 4px 12px var(--shadow-color),
    inset 0 1px 2px var(--inset-shadow-top),
    inset 0 -1px 2px var(--inset-shadow-bottom);

  /* Transform 3D */
  transform-style: preserve-3d;
  transform-origin: center center;
  transform: perspective(800px) translateX(-50%) translateY(var(--bubble-y, 0px))
    scale(var(--bubble-scale, 1)) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));

  /* Performance */
  will-change: transform, opacity;
  contain: layout style paint;

  /* Interactions et transitions */
  transition:
    var(--btn-transition),
    color 0.35s ease,
    background-color 0.2s ease,
    opacity 0.4s ease-in-out;
  z-index: 2;
  overflow: hidden;
  cursor: pointer;
  user-select: none;
  z-index: 9999;
}

/* État ouvert du bouton */
#liquid-glass-button.open {
  padding: 24px 28px;
  min-width: 280px;
  min-height: 140px;
  overflow: visible;
}

/* ====================================================================
   3. ÉTATS DU BOUTON
==================================================================== */

/* État actif du scroll */
#liquid-glass-button.liquid-glass-active {
  transform: perspective(800px) translateX(-50%) translateY(var(--bubble-y, 10px))
    scale(var(--bubble-scale, 1.05)) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  opacity: 1;
}

/* Animation de disparition (modale ouverte) */
#liquid-glass-button.hidden {
  opacity: 0;
  pointer-events: none;
  transform: perspective(800px) translateX(-50%) translateY(20px) scale(0.95) rotateX(0deg)
    rotateY(0deg);
}

/* Animation de réapparition (modale fermée) */
#liquid-glass-button:not(.hidden) {
  opacity: 1;
  transition:
    var(--btn-transition),
    color 0.35s ease,
    background-color 0.2s ease,
    opacity 0.4s ease-in-out 0.2s;
}

/* États de bulle au scroll */
#liquid-glass-button.is-bubbling-up {
  --bubble-y: -25px;
  --bubble-scale: 1.15;
  --transform-duration: 0.65s;
  --transform-timing: cubic-bezier(0.34, 1.56, 0.64, 1);
}

#liquid-glass-button.is-settling {
  --bubble-y: 0px;
  --bubble-scale: 1;
  --transform-duration: 1.6s;
  --transform-timing: cubic-bezier(0.23, 1, 0.32, 1);
}

/* ====================================================================
   4. STYLES DES ÉLÉMENTS INTERNES
==================================================================== */

/* Labels */
.label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  transition:
    opacity 0.2s ease-out,
    transform 0.3s ease-out;
}

.label-main-text {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 1.1em;
  font-weight: 700;
}

/* Line icons next to the label and the choices (no emoji) */
.liquid-glass-icon {
  width: 1.15em;
  height: 1.15em;
  flex: 0 0 auto;
}

.label-sub-text {
  font-size: 0.8em;
  font-weight: 400;
  opacity: 0.8;
}

:root[data-theme='light'] body #liquid-glass-button {
  --text-color: #0f172a !important;
  color: #0f172a !important;
  text-shadow: none;
}

:root[data-theme='light'] body #liquid-glass-button .label,
:root[data-theme='light'] body #liquid-glass-button .label-main-text,
:root[data-theme='light'] body #liquid-glass-button .label-sub-text {
  color: #0f172a !important;
  text-shadow: none;
}

#liquid-glass-button.open .label {
  opacity: 0;
  transform: scale(0.8);
  transition-duration: 0.1s;
}

/* Choix de contact */
.contact-choices {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  flex-direction: column;
  gap: 14px;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.7);
  pointer-events: none;
  transition:
    opacity 0.5s 0.2s cubic-bezier(0.23, 1, 0.32, 1),
    transform 0.8s 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

#liquid-glass-button.open .contact-choices {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  pointer-events: auto;
}

/* Boutons de choix */
.choice {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 14px 24px;
  border-radius: 25px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
  backdrop-filter: blur(5px);
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--text-color);
  text-decoration: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow:
    inset 0 1px 2px rgba(255, 255, 255, 0.15),
    0 2px 4px rgba(0, 0, 0, 0.05);
  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
  text-align: center;
  white-space: nowrap;
  min-width: 200px;
  -webkit-tap-highlight-color: transparent;
  appearance: none;
}

.choice:active {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1));
}

/* ====================================================================
   5. STYLES DESKTOP AVEC HOVER
==================================================================== */
@media (hover: hover) {
  /* Hover du bouton principal */
  #liquid-glass-button:hover,
  #liquid-glass-button:focus-visible {
    outline: none;
    min-width: 270px;
    border-radius: 50px;
    padding: 60px 32px;
    box-shadow:
      0 20px 40px -5px rgba(0, 0, 0, 0.15),
      0 30px 60px -10px rgba(0, 0, 0, 0.12);
    left: 50%;
    transform-origin: center center;
    transform: perspective(800px) translateX(-50%) translateY(var(--bubble-y, 0px))
      scale(var(--bubble-scale, 1)) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  }

  /* Hover des labels */
  #liquid-glass-button:hover .label {
    opacity: 0;
    transform: scale(0.8);
    transition-duration: 0.1s;
  }

  /* Hover des choix */
  #liquid-glass-button:hover .contact-choices {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    pointer-events: auto;
  }

  /* Hover des boutons de choix */
  .choice:hover {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1));
    border-color: rgba(255, 255, 255, 0.4);
    transform: translateY(-4px) scale(1.05);
    box-shadow:
      inset 0 1px 1px rgba(255, 255, 255, 0.15),
      0 8px 16px rgba(0, 0, 0, 0.15);
    color: var(--text-color);
  }
}

/* ====================================================================
   6. OPTIMISATIONS MOBILE
==================================================================== */
@media (max-width: 768px) {
  /* Bouton principal sur mobile */
  #liquid-glass-button {
    min-width: 340px;
    padding: 14px 26px;
    transform-origin: center center !important;
    transition: var(--btn-transition) !important;
    will-change: transform, opacity;
    contain: layout style paint;
  }

  /* État spécial mobile pour éviter les bugs de transform */
  #liquid-glass-button.mobile-click-active {
    transition: var(--btn-transition-no-transform) !important;
  }

  /* État ouvert sur mobile */
  #liquid-glass-button.open {
    min-width: 360px;
    min-height: 140px;
    padding: 24px 28px;
    border-radius: 50px !important;
    box-shadow:
      0 12px 30px -3px rgba(0, 0, 0, 0.2),
      0 20px 40px -6px rgba(0, 0, 0, 0.15);
    left: 50% !important;
    transform: perspective(800px) translateX(-50%) translateY(var(--bubble-y, 0px))
      scale(var(--bubble-scale, 1)) !important;
  }

  /* Désactiver animations liquid coûteuses sur mobile */
  #liquid-glass-button.liquid-in,
  #liquid-glass-button.liquid-out {
    animation: none !important;
  }

  /* Réduction du grossissement au scroll sur mobile */
  #liquid-glass-button.is-bubbling-up {
    --bubble-scale: 1.08 !important;
  }

  /* Optimisation des labels sur mobile */
  #liquid-glass-button .label {
    transition:
      opacity 0.2s ease-out,
      transform 0.2s ease-out !important;
    will-change: opacity, transform;
  }

  #liquid-glass-button.open .label {
    opacity: 0;
    transform: scale(0.8) translateY(-10px);
    transition-duration: 0.15s;
  }

  /* Optimisation des choix sur mobile */
  #liquid-glass-button .contact-choices {
    transition:
      opacity 0.2s 0.1s ease-out,
      transform 0.2s 0.1s ease-out !important;
    will-change: opacity, transform;
  }

  #liquid-glass-button.open .contact-choices {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    pointer-events: auto;
  }

  /* Animation de fermeture optimisée */
  #liquid-glass-button.open.closing .contact-choices {
    opacity: 0 !important;
    transform: translate(-50%, -50%) scale(0.92) translateY(-4px) !important;
    transition:
      opacity 0.28s ease 0s,
      transform 0.36s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s !important;
    pointer-events: none !important;
  }

  /* Taille du texte principal sur mobile */
  .label-main-text {
    font-size: 1em;
  }

  /* Styles des choix optimisés pour mobile */
  #liquid-glass-button .choice {
    /* Background solide pour éviter les artefacts */
    background: #1a1a1a !important;
    background-image: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;

    /* Bordure simple */
    border: 1px solid rgba(255, 255, 255, 0.3) !important;

    /* Texte contrasté */
    color: #ffffff !important;
    text-shadow: none !important;

    /* Ombre simple */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
    opacity: 1 !important;
  }

  #liquid-glass-button .choice:active {
    background: #0d0d0d !important;
    background-image: none !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
  }

  /* Héritage forcé pour les enfants */
  #liquid-glass-button .choice * {
    color: inherit !important;
    background: transparent !important;
  }
}

/* ====================================================================
   7. FALLBACKS ET ACCESSIBILITÉ
==================================================================== */

/* Fallback si backdrop-filter n'est pas supporté */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  #liquid-glass-button {
    background: rgba(255, 255, 255, 0.06);
  }
}

/* Option accessibilité : mouvement réduit */
@media (prefers-reduced-motion: reduce) {
  #liquid-glass-button {
    transition: none;
  }
}