/* ============ CROWN FX — cursor · particles · glow · flash ============
 * Loaded after extras.v2.css. All effects bail gracefully on mobile
 * and reduced-motion (the JS sets .crown-fx-active on body before any
 * DOM injection, so these rules only activate on qualifying devices).
 */

/* ── Custom cursor ──────────────────────────────────────────────────── */
body.crown-fx-active { cursor: none !important; }
body.crown-fx-active a,
body.crown-fx-active button,
body.crown-fx-active [role="button"],
body.crown-fx-active input,
body.crown-fx-active textarea,
body.crown-fx-active select,
body.crown-fx-active label { cursor: none !important; }

.cursor-dot {
  position: fixed;
  width: 7px; height: 7px;
  background: var(--brand-gold, #C4933F);
  border-radius: 50%;
  pointer-events: none;
  z-index: 99999;
  transform: translate(-50%, -50%);
  will-change: left, top;
  transition: width 0.13s ease, height 0.13s ease, opacity 0.2s;
  backface-visibility: hidden;
}
.cursor-dot.hovering {
  width: 5px; height: 5px;
}

.cursor-ring {
  position: fixed;
  width: 36px; height: 36px;
  border: 1.5px solid rgba(196,147,63,0.60);
  border-radius: 50%;
  pointer-events: none;
  z-index: 99998;
  transform: translate(-50%, -50%);
  will-change: left, top;
  transition: width 0.22s ease, height 0.22s ease, border-color 0.2s, opacity 0.2s;
  backface-visibility: hidden;
}
.cursor-ring.hovering {
  width: 52px; height: 52px;
  border-color: rgba(196,147,63,1);
}

/* ── Crown particles ────────────────────────────────────────────────── */
.crown-particles {
  position: fixed;
  top: 0; left: 0;
  width: 0; height: 0;
  pointer-events: none;
  z-index: 10;
  overflow: visible;
}
.crown-particle {
  position: absolute;
  border-radius: 50%;
  background: var(--brand-gold, #C4933F);
  box-shadow: 0 0 5px 1px rgba(196,147,63,0.5);
  will-change: left, top, opacity, width, height;
}

/* ── Section-arrive glow flash ──────────────────────────────────────── */
@keyframes crown-flash {
  0%   { opacity: 0;    }
  12%  { opacity: 1;    }
  100% { opacity: 0;    }
}
.crown-section-flash {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(
    ellipse 38% 48% at 87% 17%,
    rgba(196,147,63,0.16),
    transparent 72%
  );
  pointer-events: none;
  z-index: 1;
  opacity: 0;
}
.crown-section-flash.active {
  animation: crown-flash 1.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}