/* 022 — Hamburger Morph
   Checkbox caché + label. Chorégraphie en deux temps grâce aux propriétés
   de transform individuelles (translate / rotate) :
   - ouverture : les barres externes se rejoignent au centre, PUIS pivotent
     en croix avec overshoot ; la barre du milieu file à gauche en fondu.
   - fermeture : ordre inverse (dé-rotation d'abord, écartement ensuite).
   Le cercle de fond passe à l'accent avec un pop élastique + onde. */

.hamburger-morph {
  position: relative;
  display: inline-grid;
  justify-items: center;
  gap: 14px;
}

/* Checkbox visuellement caché mais focusable */
.hamburger-morph__toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.hamburger-morph__btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* --- Cercle de fond ------------------------------------------------------ */

.hamburger-morph__circle {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--ml-surface, #151a24);
  border: 1px solid color-mix(in oklab, var(--ml-fg, #e8eaf2) 10%, transparent);
  transition:
    transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
    background-color 0.35s ease,
    border-color 0.35s ease;
}

.hamburger-morph__circle::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  border: 2px solid var(--ml-accent, #7c8cff);
  opacity: 0;
  transform: scale(0.85);
}

.hamburger-morph__btn:hover .hamburger-morph__circle {
  transform: scale(1.05);
  border-color: color-mix(in oklab, var(--ml-fg, #e8eaf2) 22%, transparent);
}

.hamburger-morph__btn:active .hamburger-morph__circle {
  transform: scale(0.94);
  transition-duration: 0.15s;
}

.hamburger-morph__toggle:checked ~ .hamburger-morph__btn .hamburger-morph__circle {
  background: var(--ml-accent, #7c8cff);
  border-color: transparent;
  transform: scale(1.07);
}

@keyframes hamburger-morph-ring {
  0%   { opacity: 0.7; transform: scale(0.85); }
  100% { opacity: 0;   transform: scale(1.5); }
}

.hamburger-morph__toggle:checked ~ .hamburger-morph__btn .hamburger-morph__circle::after {
  animation: hamburger-morph-ring 0.6s cubic-bezier(0.2, 0.6, 0.35, 1) forwards;
}

.hamburger-morph__toggle:focus-visible ~ .hamburger-morph__btn .hamburger-morph__circle {
  outline: 2px solid var(--ml-accent-2, #2dd4bf);
  outline-offset: 3px;
}

/* --- Barres -------------------------------------------------------------- */

.hamburger-morph__bars {
  position: relative;
  width: 26px;
  height: 20px;
}

.hamburger-morph__bar {
  position: absolute;
  left: 0;
  width: 26px;
  height: 2.5px;
  border-radius: 2px;
  background: var(--ml-fg, #e8eaf2);
  /* état fermé : la dé-rotation joue d'abord, l'écartement ensuite */
  transition:
    rotate 0.34s cubic-bezier(0.6, 0, 0.3, 1),
    translate 0.32s cubic-bezier(0.2, 0.9, 0.3, 1.3) 0.16s,
    scale 0.3s ease 0.16s,
    opacity 0.22s ease 0.2s,
    background-color 0.3s ease;
}

.hamburger-morph__bar:nth-child(1) { top: 1px; }
.hamburger-morph__bar:nth-child(2) { top: 8.75px; }
.hamburger-morph__bar:nth-child(3) { top: 16.5px; }

/* état ouvert : rapprochement d'abord, rotation (overshoot) ensuite */
.hamburger-morph__toggle:checked ~ .hamburger-morph__btn .hamburger-morph__bar {
  background: var(--ml-bg, #0d1017);
  transition:
    translate 0.3s cubic-bezier(0.6, 0, 0.3, 1),
    rotate 0.4s cubic-bezier(0.3, 1.6, 0.4, 1) 0.15s,
    scale 0.28s cubic-bezier(0.6, 0, 0.3, 1),
    opacity 0.18s ease,
    background-color 0.3s ease 0.08s;
}

.hamburger-morph__toggle:checked ~ .hamburger-morph__btn .hamburger-morph__bar:nth-child(1) {
  translate: 0 7.75px;
  rotate: 45deg;
}

.hamburger-morph__toggle:checked ~ .hamburger-morph__btn .hamburger-morph__bar:nth-child(2) {
  translate: -12px 0;
  scale: 0.3 1;
  opacity: 0;
}

.hamburger-morph__toggle:checked ~ .hamburger-morph__btn .hamburger-morph__bar:nth-child(3) {
  translate: 0 -7.75px;
  rotate: -45deg;
}

/* --- Hint texte (Menu / Fermer) ------------------------------------------ */

.hamburger-morph__hint {
  position: relative;
  display: inline-grid;
  font: 500 11px/1 system-ui, -apple-system, sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ml-muted, #8b91a3);
}

.hamburger-morph__hint-open,
.hamburger-morph__hint-close {
  grid-area: 1 / 1;
  text-align: center;
  transition:
    opacity 0.25s ease,
    transform 0.35s cubic-bezier(0.3, 1.2, 0.5, 1);
}

.hamburger-morph__hint-close {
  opacity: 0;
  transform: translateY(6px);
  color: var(--ml-accent, #7c8cff);
}

.hamburger-morph__toggle:checked ~ .hamburger-morph__hint .hamburger-morph__hint-open {
  opacity: 0;
  transform: translateY(-6px);
}

.hamburger-morph__toggle:checked ~ .hamburger-morph__hint .hamburger-morph__hint-close {
  opacity: 1;
  transform: translateY(0);
}

/* --- Reduced motion ------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .hamburger-morph__bar,
  .hamburger-morph__circle,
  .hamburger-morph__hint-open,
  .hamburger-morph__hint-close {
    transition-duration: 0.01s;
    transition-delay: 0s;
  }
  .hamburger-morph__circle::after {
    animation: none;
  }
  .hamburger-morph__btn:hover .hamburger-morph__circle,
  .hamburger-morph__toggle:checked ~ .hamburger-morph__btn .hamburger-morph__circle {
    transform: none;
  }
}