/* ============================================================
   Custom Book-Icon Cursor - VGS Publishers
   Desktop-only premium cursor-follow effect. Disabled entirely on
   touch devices / small screens (see custom-cursor.js), so this
   file only ever takes effect once html.has-custom-cursor is set.
   ============================================================ */

html.has-custom-cursor,
html.has-custom-cursor * {
  cursor: none !important;
}

.custom-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  pointer-events: none;
  /* Stands in for the real mouse pointer (cursor:none above), so it
     must outrank every overlay on the page - #quickViewModal sits at
     100000 and the mobile filter drawer at 100050 (both had to beat
     .mobile-bottom-nav's 99999), which left this at the same 99999
     and rendering underneath them, making the cursor vanish over any
     popup. pointer-events:none means raising this can't break clicks. */
  z-index: 999999;
  will-change: transform;
}

.custom-cursor .cursor-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin: -16px 0 0 -16px; /* center the icon on the pointer position */
  color: #DDAD31; /* brand --title-color */
  filter: drop-shadow(0 6px 14px rgba(46, 74, 91, .35));
  transform: rotate(0deg) scale(1);
  transition: transform .3s cubic-bezier(.22, 1, .36, 1),
              color .3s ease,
              filter .3s ease;
}

.custom-cursor .cursor-inner svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Subtle idle glow so the icon reads as "premium", not flat. */
.custom-cursor .cursor-inner::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 46px;
  height: 46px;
  margin: -23px 0 0 -23px;
  border-radius: 50%;
  background-color:#1B347A;
  z-index: -1;
  transition: background .3s ease;
}

/* ---- Hover state: links, buttons, book covers, categories, CTAs ---- */
.custom-cursor.is-hover .cursor-inner {
  transform: rotate(-18deg) scale(1.2); /* +20% size */
  color:#DDAD31;
  filter: drop-shadow(0 0 16px rgba(251, 175, 25, .85))
          drop-shadow(0 6px 14px rgba(251, 175, 25, .35));
}
.custom-cursor.is-hover .cursor-inner::after {
  background-color:#1B347A;
}

/* ---- Click feedback: quick punch-in/out ---- */
.custom-cursor.is-click .cursor-inner {
  transform: scale(.85);
}
.custom-cursor.is-hover.is-click .cursor-inner {
  transform: rotate(-18deg) scale(1.05);
}

/* Respect reduced-motion users: keep the icon but drop the lag/rotation. */
@media (prefers-reduced-motion: reduce) {
  .custom-cursor .cursor-inner {
    transition: color .15s linear, filter .15s linear;
  }
}

/* Cursor is JS-gated to desktop already, but as a hard backstop also
   hide it outright on touch-primary / narrow viewports. */
@media (max-width: 991.98px), (pointer: coarse) {
  .custom-cursor { display: none !important; }
  html.has-custom-cursor,
  html.has-custom-cursor * {
    cursor: auto !important;
  }
}