/* ==================================================================
   Study Hub — page effects
   Hexagon loader · dragon cursor · Programmer's Flowers

   Loaded after the page's inline theme so these only add layers. Every
   effects canvas is pointer-events:none, so buttons, links and text
   behave exactly as before.
   ================================================================== */

/* ---------- 1. Hexagon loading (full-screen fire cluster) ---------- */
#preloader .preloader-stage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

#hex-loader {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* The reference loader is the hex cluster alone; the old ring is kept in
   the DOM but faded out so it cannot clash with the fire colours. */
#preloader .loader-ring {
  display: none;
}

/* ---------- 2. Dragon cursor ---------- */
#dragon-cursor {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 40;
  opacity: 0;
  transition: opacity 0.35s ease;
}

#dragon-cursor.is-on { opacity: 1; }

/* Touch devices have no cursor to follow, so the layer is dropped
   entirely rather than left burning frames in the background. */
@media (hover: none), (pointer: coarse) {
  #dragon-cursor { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  #dragon-cursor { display: none !important; }
}

/* ---------- 3. Programmer's Flowers (hamburger-menu backdrop) ---------- */
#menu-flowers {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;   /* the menu's space-y-8 would otherwise add an end margin */
  pointer-events: none;
  z-index: 0;
}

/* Lift the menu's own content above the flowers. Only the links and the
   auth slot need this — the close button keeps its own placement. */
#mobile-menu .mobile-link,
#mobile-menu #clerk-auth-mobile {
  position: relative;
  z-index: 1;
}

#mobile-menu #close-menu { z-index: 2; }