/* ════════════════════════════════════════════════════════════════════
   PREMIUM HAMBURGER  →  X  ANIMATION
   Shared by index.html & about.html  |  Triggered by main.js (.mob-open)

   Inner wrap geometry  (w-5 = 20 px wide  ×  h-[18px] = 18 px tall):
     ham-top centre  =  1 px from top
     ham-mid centre  =  9 px  ( top: calc(50% - 1px) + half bar = 9 px )
     ham-bot centre  = 17 px from top
     Δ = 9 − 1 = 8 px  →  translateY(±8px) lands bars on exact mid-axis
════════════════════════════════════════════════════════════════════ */

/* ── Base bar styles (light mode) ──────────────────────────────── */
.ham-bar {
  display:          block;
  position:         absolute;
  left:             0;
  right:            0;
  height:           2px;
  border-radius:    9999px;
  transform-origin: center;
  background:       rgba(13, 13, 24, 0.70);

  /* smooth ease-in-out on transform AND opacity — no snapping */
  transition:
    transform  380ms cubic-bezier(0.65, 0.05, 0.35, 0.95),
    opacity    280ms cubic-bezier(0.65, 0.05, 0.35, 0.95);
}

/* ── Dark mode bar colour ───────────────────────────────────────── */
html.dark .ham-bar {
  background: rgba(255, 255, 255, 0.82);
}

/* ── Resting positions ──────────────────────────────────────────── */
.ham-top { top:    0;               }
.ham-mid { top:    calc(50% - 1px); }
.ham-bot { bottom: 0;               }


/* ════════════════════════════════════════════════════════════════════
   OPEN STATE  —  .mob-open toggled by main.js
════════════════════════════════════════════════════════════════════ */

/* Top bar ──  falls 8 px to the midpoint  then  spins +45°  →  \ arm */
#hamburger.mob-open .ham-top {
  transform: translateY(8px) rotate(45deg);
}

/* Middle bar ──  collapses from centre and dissolves */
#hamburger.mob-open .ham-mid {
  opacity:   0;
  transform: scaleX(0);
}

/* Bottom bar ──  rises 8 px to the midpoint  then  spins −45°  →  / arm */
#hamburger.mob-open .ham-bot {
  transform: translateY(-8px) rotate(-45deg);
}