/* YellowPonies — Custom cursor (standalone styles)
 *
 * Variables CSS (override-ables sur :root pour matcher ta brand) :
 *   --yps-cursor-color-bg        couleur principale du disque        (rose)
 *   --yps-cursor-color-border    bordure du disque                   (noir)
 *   --yps-cursor-color-fg        couleur du label texte              (noir)
 *   --yps-cursor-color-dark-bg   fond quand on est sur une zone dark (jaune)
 *   --yps-cursor-color-hover     fond au hover d'un élément clic     (jaune)
 *   --yps-cursor-color-grab      fond pendant le drag marquee        (rose)
 *   --yps-cursor-font            font-family du label                (display)
 *   --yps-cursor-size            taille par défaut                   (72px)
 *   --yps-cursor-size-dot        taille en mode "dot"                (14px)
 */
:root {
  /* Aligné sur les tokens YP (design-system/colors_and_type.css) */
  --yps-cursor-color-bg:      var(--yp-pink, #FF7BAC);
  --yps-cursor-color-border:  var(--yp-black, #000000);
  --yps-cursor-color-fg:      var(--yp-black, #000000);
  --yps-cursor-color-dark-bg: var(--yp-yellow, #FFED00);
  --yps-cursor-color-hover:   var(--yp-yellow, #FFED00);
  --yps-cursor-color-grab:    var(--yp-pink, #FF7BAC);
  --yps-cursor-font:          var(--yp-font-display, 'Adelphi PE VF', system-ui, sans-serif);
  --yps-cursor-size:          72px;
  --yps-cursor-size-dot:      14px;
}

/* Hide native cursor globally when custom cursor is on.
   Opt-out with [data-cursor-skip] on any subtree. */
body[data-cursor="on"] { cursor: none; }
body[data-cursor="on"] * { cursor: none !important; }
body[data-cursor="on"] [data-cursor-skip],
body[data-cursor="on"] [data-cursor-skip] * { cursor: auto !important; }

/* ---- DEFAULT (HELLO) MODE: pink disc with "HELLO" label.
   Mix-blend-mode neutre par défaut, on bascule manuellement quand on est
   au-dessus d'une zone sombre (.is-on-dark). */
.yps-cursor {
  position: fixed;
  pointer-events: none;
  width: var(--yps-cursor-size);
  height: var(--yps-cursor-size);
  border-radius: 50%;
  background: var(--yps-cursor-color-bg);
  border: 2px solid var(--yps-cursor-color-border);
  color: var(--yps-cursor-color-fg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--yps-cursor-font);
  font-weight: 900;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  z-index: 9999;
  transform: translate(-50%, -50%);
  transition:
    opacity 0.25s ease,
    transform 0.15s ease,
    background 0.2s ease,
    width 0.2s ease,
    height 0.2s ease,
    font-size 0.2s ease;
  opacity: 0;
}

.yps-cursor.is-active { opacity: 1; }
.yps-cursor.is-on-dark {
  background: var(--yps-cursor-color-dark-bg);
  border-color: var(--yps-cursor-color-dark-bg);
  color: var(--yps-cursor-color-fg);
}
.yps-cursor.is-hover {
  transform: translate(-50%, -50%) scale(1.35);
  background: var(--yps-cursor-color-hover);
}

.yps-cursor-label,
.yps-cursor-arrow {
  display: inline-block;
  line-height: 1;
}
.yps-cursor-arrow {
  display: none;
  font-size: 28px;
  font-weight: 900;
}

/* ---- DOT MODE: petit point ----------------------------------- */
body[data-cursor-mode="dot"] .yps-cursor {
  width: var(--yps-cursor-size-dot);
  height: var(--yps-cursor-size-dot);
  background: var(--yps-cursor-color-border);
  border-color: var(--yps-cursor-color-border);
  font-size: 0;
}
body[data-cursor-mode="dot"] .yps-cursor.is-on-dark {
  background: var(--yps-cursor-color-dark-bg);
  border-color: var(--yps-cursor-color-dark-bg);
}
body[data-cursor-mode="dot"] .yps-cursor .yps-cursor-label { display: none; }
body[data-cursor-mode="dot"] .yps-cursor.is-hero {
  width: var(--yps-cursor-size);
  height: var(--yps-cursor-size);
  background: var(--yps-cursor-color-dark-bg);
  border-color: var(--yps-cursor-color-border);
  font-size: 13px;
}
body[data-cursor-mode="dot"] .yps-cursor.is-hero .yps-cursor-label {
  display: inline-block;
}
body[data-cursor-mode="dot"] .yps-cursor.is-hover {
  width: 48px;
  height: 48px;
  background: var(--yps-cursor-color-bg);
  transform: translate(-50%, -50%) scale(1);
}

/* ---- MARQUEE STATE: directional arrow disc -------------------- */
body[data-cursor-mode] .yps-cursor.is-marquee {
  width: 64px;
  height: 64px;
  background: var(--yps-cursor-color-dark-bg);
  border-color: var(--yps-cursor-color-border);
  font-size: 0;
  box-shadow: 4px 4px 0 var(--yps-cursor-color-border);
  transform: translate(-50%, -50%) scale(1);
}
body[data-cursor-mode] .yps-cursor.is-marquee .yps-cursor-label { display: none; }
body[data-cursor-mode] .yps-cursor.is-marquee .yps-cursor-arrow {
  display: inline-block;
  color: var(--yps-cursor-color-fg);
  font-size: 30px;
}
body[data-cursor-mode] .yps-cursor.is-marquee.is-marquee-left .yps-cursor-arrow {
  transform: rotate(180deg);
}
body[data-cursor-mode] .yps-cursor.is-marquee.is-scrubbing-cursor {
  transform: translate(-50%, -50%) scale(0.9);
  background: var(--yps-cursor-color-grab);
}

/* Hide native cursor over the marquee since we replace it with the disc */
body[data-cursor-mode] .yps-clients,
body[data-cursor-mode] [data-cursor-marquee] { cursor: none; }
.yps-clients.is-scrubbing,
[data-cursor-marquee].is-scrubbing { cursor: grabbing; }

@media (pointer: coarse) {
  .yps-cursor { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .yps-cursor { transition: opacity 0.25s ease; }
}