/* ==============================================================
   MOBILE MENU (phones + tablets, <=991px)
   Full-screen black "curtain": the sheet drops from the top with a deep
   curved leading edge that flattens as it lands, then the nav words rise
   out of masks one row at a time and the hairlines draw in under them.
   Closing runs it backwards: words drop away, the sheet pulls back up.
   Picked by Ryder 2026-10-29 over a circle "bloom" and a blinds "shutter".
   Markup is built in js/main.js (mobile menu block).
   ============================================================== */
@media (max-width: 991px) {
  .mobile-menu {
    --mm-bg: #0b0a08;
    --mm-fg: #ece6d7;
    --mm-dim: rgba(236, 230, 215, 0.46);
    --mm-line: rgba(236, 230, 215, 0.13);
    --mm-ease: cubic-bezier(0.76, 0, 0.24, 1);
    --mm-out: 0.95s;                      /* full length of the close */
    position: fixed; inset: 0; z-index: 29; display: block;
    color: var(--mm-fg);
    /* visibility (not opacity) does the hiding, so a shut menu costs the
       browser nothing while scrolling. The delay keeps it visible for the
       whole close animation. */
    visibility: hidden; pointer-events: none;
    transition: visibility 0s linear var(--mm-out);
  }
  body.menu-open .mobile-menu { visibility: visible; pointer-events: auto; transition: visibility 0s; }
  html.mm-lock { overflow: hidden; }

  /* ---- the top bar turns black with the menu ------------------------ */
  .mobile-bar { transition: background-color 0.3s var(--ease) 0.5s, border-color 0.3s var(--ease) 0.5s; }
  .mobile-bar .side-chip { transition: background-color 0.3s var(--ease) 0.5s, color 0.3s var(--ease) 0.5s; }
  .mobile-burger span { transition: transform 0.45s var(--ease), top 0.45s var(--ease), background-color 0.3s var(--ease) 0.5s; }
  body.menu-open .mobile-bar { background: #0b0a08; border-bottom-color: transparent; transition-delay: 0s; }
  body.menu-open .mobile-bar .side-chip { background: #ece6d7; color: #0b0a08; transition-delay: 0s; }
  body.menu-open .mobile-burger span { background: #ece6d7; transition-delay: 0s; }

  /* ---- the sheet ----------------------------------------------------- */
  .mm-sheet {
    position: absolute; inset: 0; pointer-events: none;
    background: var(--mm-bg);
    transform: translate3d(0, -102%, 0);
    /* the leading edge is a deep curve that flattens as it lands, so the
       sheet pours down instead of sliding like a panel */
    border-radius: 0 0 50% 50% / 0 0 24svh 24svh;
    transition: transform 0.62s var(--mm-ease) 0.3s, border-radius 0.62s var(--mm-ease) 0.3s;
  }
  body.menu-open .mm-sheet {
    transform: none; border-radius: 0 0 0 0 / 0 0 0 0;
    transition: transform 0.8s var(--mm-ease), border-radius 0.95s var(--mm-ease);
  }

  /* ---- layout -------------------------------------------------------- */
  .mm-inner {
    position: absolute; inset: 0;
    display: flex; flex-direction: column;
    padding: calc(69px + env(safe-area-inset-top) + 1.6svh) 20px calc(18px + env(safe-area-inset-bottom));
    overflow-y: auto; overscroll-behavior: contain;
  }
  .mm-nav { display: flex; flex-direction: column; }
  .mm-link {
    position: relative;
    display: flex; align-items: center; gap: 14px;
    padding: clamp(7px, 1.55svh, 18px) 2px;
    color: var(--mm-fg); text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }
  .mm-link::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
    background: var(--mm-line); transform-origin: left center;
  }
  .mm-idx {
    position: relative;
    flex: none; min-width: 22px; align-self: flex-start; padding-top: 0.45em;
    font-family: var(--text); font-weight: 600; font-size: 12px; letter-spacing: 0.08em;
    font-variant-numeric: tabular-nums; color: var(--mm-dim);
  }
  .mm-word {
    flex: 1; min-width: 0; display: block; overflow: hidden;
    font-family: var(--display); font-weight: 800; text-transform: uppercase;
    font-size: clamp(27px, min(9.2vw, 5.1svh), 58px);
    line-height: 0.98; letter-spacing: -0.025em;
    padding-bottom: 0.04em; white-space: nowrap;
  }
  .mm-word-in { display: inline-block; }
  .mm-arr {
    flex: none; width: 20px; height: 20px;
    fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
    opacity: 0.5;
  }
  /* where you are on the page right now */
  .mm-link[aria-current] .mm-idx { color: var(--mm-fg); }
  .mm-link[aria-current] .mm-idx::before {
    content: ''; position: absolute; left: -11px; top: calc(0.45em + 4px);
    width: 6px; height: 6px; border-radius: 50%; background: var(--mm-fg);
  }
  .mm-link:active .mm-word-in { opacity: 0.6; }

  .mm-foot { margin-top: auto; padding-top: 22px; display: flex; flex-direction: column; gap: 14px; }
  .mm-ctas { display: grid; grid-template-columns: 1.25fr 1fr; gap: 10px; }
  .mm-call, .mm-mail {
    min-height: 54px; border-radius: 14px;
    display: flex; align-items: center; justify-content: center; gap: 10px;
    font-family: var(--text); font-weight: 600; font-size: 16px; text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }
  .mm-call { background: var(--mm-fg); color: #0b0a08; border: 0; }
  .mm-call svg { width: 17px; height: 17px; fill: currentColor; }
  .mm-mail { background: transparent; color: var(--mm-fg); border: 1px solid rgba(236, 230, 215, 0.26); }
  .mm-meta {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    font-family: var(--text); font-size: 12.5px; letter-spacing: 0.02em; color: var(--mm-dim);
  }
  .mm-live { display: inline-flex; align-items: center; gap: 8px; }
  .mm-live i {
    width: 7px; height: 7px; border-radius: 50%; background: #6fdc8c;
    animation: mmPulse 2.2s ease-out infinite;
  }
  .mm-clock b { color: var(--mm-fg); font-weight: 600; font-variant-numeric: tabular-nums; }
  @keyframes mmPulse {
    0% { box-shadow: 0 0 0 0 rgba(111, 220, 140, 0.55); }
    70%, 100% { box-shadow: 0 0 0 9px rgba(111, 220, 140, 0); }
  }

  /* ---- the choreography ---------------------------------------------
     Closed state = where things leave TO (fast, no stagger).
     Open state = where they arrive, staggered by row (--i). */
  .mm-word-in { transform: translate3d(0, 112%, 0); transition: transform 0.28s cubic-bezier(0.5, 0, 0.75, 0); }
  body.menu-open .mm-word-in {
    transform: none;
    transition: transform 0.95s var(--ease) calc(0.34s + var(--i) * 0.055s);
  }
  .mm-link::after { transform: scaleX(0); transition: transform 0.25s; }
  body.menu-open .mm-link::after { transform: none; transition: transform 1.1s var(--ease) calc(0.4s + var(--i) * 0.055s); }
  .mm-idx, .mm-arr { opacity: 0; transition: opacity 0.2s; }
  body.menu-open .mm-idx { opacity: 1; transition: opacity 0.6s calc(0.55s + var(--i) * 0.055s); }
  body.menu-open .mm-arr { opacity: 0.5; transition: opacity 0.6s calc(0.55s + var(--i) * 0.055s); }
  .mm-foot { opacity: 0; transform: translate3d(0, 18px, 0); transition: opacity 0.22s, transform 0.22s; }
  body.menu-open .mm-foot { opacity: 1; transform: none; transition: opacity 0.6s 0.72s, transform 0.9s var(--ease) 0.72s; }
}

@media (max-width: 991px) and (prefers-reduced-motion: reduce) {
  .mobile-menu *, .mobile-menu *::after, .mobile-menu *::before { transition: none !important; animation: none !important; }
  body.menu-open .mobile-menu .mm-sheet,
  body.menu-open .mobile-menu .mm-word-in { transform: none; }
}