/* ==========================================================================
   APFM — Custom Logo Cursor (Divi-safe)
   --------------------------------------------------------------------------
   Fully namespaced. Touches nothing global:
     - No html / body / img / div / section / *  rules.
     - No .et_pb_ / .et- / .et_builder_ overrides.
     - The only "cursor: none" is scoped INSIDE .custom-logo-cursor and is
       gated behind (pointer: fine) so touch devices and the Visual Builder
       keep their native cursor.
   All visual knobs are driven by CSS custom properties that the JS sets on
   the element, so you only edit values in ONE place (the JS settings block).
   ========================================================================== */

/* Hide the native cursor only inside a trigger container, mouse devices only. */
@media (pointer: fine) {
  .custom-logo-cursor,
  .custom-logo-cursor * {
    cursor: none !important;
  }
}

/* The single floating cursor node (appended once to <body> by the JS). */
.apfm-cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2147483000;

  width: var(--apfm-cursor-size, 110px);
  height: var(--apfm-cursor-size, 110px);
  margin: 0;
  padding: 0;
  /* subtle light inner ring, matches the reference .hero-focus-mark */
  border: 1px solid var(--apfm-cursor-border, rgba(255, 250, 247, .46));
  border-radius: 50%;
  box-sizing: border-box;

  background-color: var(--apfm-cursor-bg, rgba(28, 12, 38, .62));
  /* Background layers, painted top -> bottom:
       1. brand mark        (var --apfm-cursor-logo, set by the JS)
       2. crosshair, horiz  (thin reticle line)
       3. crosshair, vert
       4. corner sheen      (soft top-left highlight)
     background-color sits under all four. */
  background-image:
    var(--apfm-cursor-logo, none),
    linear-gradient(var(--apfm-cursor-cross, rgba(238, 108, 154, .7)),
                    var(--apfm-cursor-cross, rgba(238, 108, 154, .7))),
    linear-gradient(var(--apfm-cursor-cross, rgba(238, 108, 154, .7)),
                    var(--apfm-cursor-cross, rgba(238, 108, 154, .7))),
    radial-gradient(circle at 34% 28%, rgba(255, 250, 247, .18), transparent 38%);
  background-repeat: no-repeat;
  background-position: 50% 50%, 50% 50%, 50% 50%, 0 0;
  background-size:
    var(--apfm-cursor-logo-size, 44%) auto,
    100% 1px,
    1px 100%,
    100% 100%;

  box-shadow: var(--apfm-cursor-shadow,
    0 18px 42px rgba(28, 12, 38, .3),
    inset 0 1px 0 rgba(255, 250, 247, .18));
  -webkit-backdrop-filter: blur(var(--apfm-cursor-blur, 14px));
  backdrop-filter: blur(var(--apfm-cursor-blur, 14px));

  /* Never intercept clicks — links, buttons, inputs keep working.
     !important is required: the Footer Curtain effect (customfile.js)
     injects `body.fc-body > *:not(.fc-spacer){pointer-events:auto}` which
     otherwise re-enables pointer events on this body-appended node,
     turning the cursor into an invisible click/hover shield. */
  pointer-events: none !important;

  opacity: 0;
  /* Position + scale are driven by JS via transform (translate3d + scale).
     Only opacity is transitioned here so it never fights the rAF loop. */
  transform: translate3d(-9999px, -9999px, 0) scale(.82);
  transition: opacity .42s cubic-bezier(.16, 1, .3, 1);
  will-change: transform, opacity;
  contain: layout style paint;
  /* keep the circle on a clean compositor layer -> crisp on Retina */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.apfm-cursor--visible {
  opacity: var(--apfm-cursor-opacity, .94);
}

@media (prefers-reduced-motion: reduce) {
  .apfm-cursor {
    transition-duration: .01ms;
  }
}