/* ===================================================================
   Triple-dot menu button - Ryan 27-Aug
   "50% opacity, animated + 100% on hover, all desktop views, all pages"

   WHY A DEDICATED FILE. The dots are rendered by four unrelated surfaces
   with two different wrappers, and the pages do not share one stylesheet:
   chat/show.blade loads private-chat-desktop.css but NOT
   gogirlfriend.webflow.css, while settings / dashboard / the public layout
   load the reverse. Putting this in either of those would miss half the
   pages, and gogirlfriend.webflow.css is Oli's Webflow export - hand edits
   there get flattened the next time he republishes.

   DESKTOP ONLY, and the `hover: hover` guard is not decoration. iOS treats
   a tap as hover and STICKS it until the next tap elsewhere, so an
   unguarded :hover rule leaves the dots stuck bright (and previously caused
   a full-screen blackout bug on this codebase). `hover: hover` also happens
   to be the honest definition of "desktop view" here - a real pointer.

   TRANSFORMS AND WEBFLOW IX2. Each dot carries an inline `transform` style
   emitted by Webflow's IX2 runtime. Inline styles beat normal stylesheet
   declarations - but CSS ANIMATIONS outrank inline styles in the cascade,
   so the keyframes below win WITHOUT needing !important. That matters:
   !important on a :hover rule is exactly the pattern that caused the iOS
   sticky-hover bug, so it is avoided here rather than guarded twice.
   =================================================================== */

@media (hover: hover) and (min-width: 992px) {

  /* Both wrappers: the Webflow anchor (.gg-more-btn - header, chat,
     settings) and the dashboard's Alpine button (#gg-dash-usermenu). */
  .gg-more-btn,
  #gg-dash-usermenu {
    opacity: .5;
    transition: opacity .35s cubic-bezier(.25, .46, .45, .94);
  }

  .gg-more-btn:hover,
  .gg-more-btn:focus-visible,
  #gg-dash-usermenu:hover,
  #gg-dash-usermenu:focus-visible {
    opacity: 1;
  }

  /* While the dashboard menu is OPEN the trigger stays lit - dropping it
     back to 50% under an open panel reads as disabled. */
  body.gg-dash-menu-open #gg-dash-usermenu {
    opacity: 1;
  }

  /* The wave. Each dot lifts in turn, so the triplet ripples left-to-right
     rather than pulsing as one blob. 90ms apart is enough to read as a
     sequence without looking laggy. */
  @keyframes ggMoreDotWave {
    0%, 60%, 100% { transform: translateY(0); }
    30%           { transform: translateY(-3px); }
  }

  .gg-more-btn:hover .gg-more-dot,
  .gg-more-btn:focus-visible .gg-more-dot,
  #gg-dash-usermenu:hover .gg-more-dot,
  #gg-dash-usermenu:focus-visible .gg-more-dot {
    animation: ggMoreDotWave 1.1s cubic-bezier(.25, .46, .45, .94) infinite;
  }

  /* Stagger. The Webflow markup numbers its dots (._1 ._2 ._3); the
     dashboard's do not, so nth-child covers both without touching markup. */
  .gg-more-btn:hover .gg-more-dot._2,
  .gg-more-btn:focus-visible .gg-more-dot._2,
  #gg-dash-usermenu:hover .gg-more-dot:nth-child(2),
  #gg-dash-usermenu:focus-visible .gg-more-dot:nth-child(2) {
    animation-delay: .09s;
  }

  .gg-more-btn:hover .gg-more-dot._3,
  .gg-more-btn:focus-visible .gg-more-dot._3,
  #gg-dash-usermenu:hover .gg-more-dot:nth-child(3),
  #gg-dash-usermenu:focus-visible .gg-more-dot:nth-child(3) {
    animation-delay: .18s;
  }

  /* Respect the OS setting. The opacity change still communicates hover;
     only the motion is dropped. */
  @media (prefers-reduced-motion: reduce) {
    .gg-more-btn:hover .gg-more-dot,
    .gg-more-btn:focus-visible .gg-more-dot,
    #gg-dash-usermenu:hover .gg-more-dot,
    #gg-dash-usermenu:focus-visible .gg-more-dot {
      animation: none;
    }
  }
}