/* Custom cursor for agencyg.de — ported from shop/docs, re-coloured to the
 * agencyg.de brand gradient (teal #2dd4bf → emerald #34d399).
 *
 * Geometry (width/height/border-radius/transform) is JS-driven so the ring
 * can morph around hovered elements. This file only handles colour/glow
 * per variant and the "hide native cursor" rule.
 *
 * Dark + light theme: agencyg.de flips theme via `html.light-mode`. We
 * adjust the cursor colours correspondingly so contrast stays OK on both.
 */

html.has-custom-cursor,
html.has-custom-cursor body,
html.has-custom-cursor *:not(input):not(textarea):not([contenteditable="true"]) {
  cursor: none !important;
}
html.has-custom-cursor input,
html.has-custom-cursor textarea,
html.has-custom-cursor [contenteditable="true"] {
  cursor: text !important;
}

.ag-cursor-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(
    circle at 32% 28%,
    #d9fff6 0%,
    #5eead4 25%,
    #2dd4bf 65%,
    #0d9488 100%
  );
  /* Dark outline for contrast against bright bg + teal halo */
  box-shadow:
    0 0 0 1.5px rgba(5, 10, 24, 0.55),
    0 0 0 2.5px rgba(94, 234, 212, 0.3),
    0 0 14px rgba(45, 212, 191, 0.85),
    0 0 3px rgba(217, 255, 246, 1);
  will-change: transform;
  transform: translate3d(0, 0, 0);
  transition: opacity 0.2s;
}

html.light-mode .ag-cursor-dot {
  background: radial-gradient(
    circle at 32% 28%,
    #99f6e4 0%,
    #2dd4bf 35%,
    #0d9488 75%,
    #0f766e 100%
  );
  box-shadow:
    0 0 0 1.5px rgba(15, 118, 110, 0.55),
    0 0 0 2.5px rgba(45, 212, 191, 0.28),
    0 0 14px rgba(13, 148, 136, 0.7),
    0 0 3px rgba(94, 234, 212, 0.9);
}

.ag-cursor-ring {
  border: 2px solid rgba(45, 212, 191, 0.85);
  background: rgba(45, 212, 191, 0);
  box-shadow:
    0 0 0 1px rgba(5, 10, 24, 0.35),
    0 0 14px -2px rgba(45, 212, 191, 0.5);
  will-change: transform, width, height, border-radius;
  transition:
    background-color 0.22s cubic-bezier(.2, 1, .3, 1),
    border-color 0.22s cubic-bezier(.2, 1, .3, 1),
    border-width 0.22s cubic-bezier(.2, 1, .3, 1),
    box-shadow 0.22s cubic-bezier(.2, 1, .3, 1),
    opacity 0.2s;
}

html.light-mode .ag-cursor-ring {
  border-color: rgba(13, 148, 136, 0.85);
  box-shadow:
    0 0 0 1px rgba(15, 118, 110, 0.25),
    0 0 14px -2px rgba(13, 148, 136, 0.5);
}

.ag-cursor-ring.variant-interactive,
.ag-cursor-ring.variant-wrap {
  /* Gradient-like gold→emerald feel via double border */
  border-color: rgba(94, 234, 212, 1);
  border-width: 2px;
  background: rgba(45, 212, 191, 0.12);
  box-shadow:
    0 0 0 1px rgba(5, 10, 24, 0.4),
    0 0 28px -4px rgba(45, 212, 191, 0.5),
    inset 0 0 22px rgba(45, 212, 191, 0.12);
}

html.light-mode .ag-cursor-ring.variant-interactive,
html.light-mode .ag-cursor-ring.variant-wrap {
  border-color: rgba(13, 148, 136, 1);
  background: rgba(45, 212, 191, 0.18);
  box-shadow:
    0 0 0 1px rgba(15, 118, 110, 0.35),
    0 0 28px -4px rgba(13, 148, 136, 0.45),
    inset 0 0 22px rgba(45, 212, 191, 0.15);
}

.ag-cursor-ring.variant-text {
  border: none;
  background: rgba(94, 234, 212, 1);
  box-shadow:
    0 0 0 0.5px rgba(5, 10, 24, 0.5),
    0 0 12px rgba(45, 212, 191, 0.7);
}

.ag-cursor-ring.variant-none {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.ag-cursor-ring.is-clicking {
  animation: agCursorClickPulse 0.22s ease-out;
}
@keyframes agCursorClickPulse {
  0%   { filter: brightness(1); }
  50%  { filter: brightness(1.4) saturate(1.3); }
  100% { filter: brightness(1); }
}

@media (pointer: coarse), (prefers-reduced-motion: reduce) {
  .ag-cursor-dot, .ag-cursor-ring { display: none !important; }
  html.has-custom-cursor,
  html.has-custom-cursor body,
  html.has-custom-cursor *:not(input):not(textarea):not([contenteditable="true"]) {
    cursor: auto !important;
  }
}

/* ── Accessibility fallbacks ──────────────────────────────────
 * Users who ask for higher contrast (OS pref "Increase Contrast"
 * on mac / "High Contrast" on Windows) or are on Windows High
 * Contrast Mode get the native system cursor back. Same for
 * prefers-contrast:more. Our brand-tinted cursor is subtle by
 * design and can vanish against a custom high-contrast palette.
 * Keyboard / screen-reader users already ignore the cursor —
 * the focus-visible ring on buttons handles their navigation.
 */
@media (forced-colors: active), (prefers-contrast: more) {
  .custom-cursor-dot, .custom-cursor-ring,
  .ag-cursor-dot, .ag-cursor-ring,
  .pp-cursor-dot, .pp-cursor-ring { display: none !important; }
  html.has-custom-cursor,
  html.has-custom-cursor body,
  html.has-custom-cursor *:not(input):not(textarea):not([contenteditable="true"]) {
    cursor: auto !important;
  }
}