:root {
  /* 1) EDITABLE GLOBAL VARIABLES */
  --dot-size:               24px;
  --dot-color:              rgba(246,154,31,1);
  --dot-border:             0.5px solid rgba(26,26,26,1);
  --dot-transition:         0.15s;
  --dot-click-size:         30px;
  --dot-click-color:        rgba(246,154,31,0.8);
  --dot-hover-size:         40px;
  --dot-hover-blur:         0;
  --dot-hover-border:       none;
  --dot-hover-color:        rgba(246,154,31,1);

  --dot-instance-hover-size: calc(var(--dot-hover-size) + 1px);

  --halo-size-default:      60px;
  --halo-size-hover:        48px;
  --halo-size-click:        40px;
  --halo-color:             rgba(246,154,31,1);
  --halo-opacity-default:   0.15;
  --halo-opacity-hover:     0.4;
  --halo-opacity-click:     0.8;

  --halo-transition:        width 0.2s ease, height 0.2s ease, opacity 0.15s ease;
  --breathe-speed:          3s;
  --hover-breathe-speed:    0.8s;
  --click-breathe-speed:    0.8s;

  /* breathe scale ranges */
  --halo-breath-min-scale:        0.7;
  --halo-breath-max-scale:        0.8;
  --halo-hover-breath-min-scale:  0.9;
  --halo-hover-breath-max-scale:  1;
  --halo-click-min-scale:         0.82;
  --halo-click-max-scale:         0.9;

  --halo-smoothing:         0.1;
  --halo-focus-smoothing:   1;

  --click-transition-duration:   0.05s;
  --release-transition-duration: 0.1s;
  --flash-opacity:               0.8;
  --flash-duration:              0.2s;

  --blend-mode:             difference;

  /*--cursor-disable-breakpoint:  1024px;*/
}



/* 2) HIDE NATIVE CURSOR (only outside Elementor edit mode) */

body:not(.elementor-editor-active),
body:not(.elementor-editor-active) * {
  cursor: none !important;
}
@media (max-width: 1024px) {
  body.cursor-disabled * { cursor: auto !important; }
}



/* 3) DOT BASE STYLES */

#cursor-dot,
#cursor-dot-alt,
#cursor-dot-instance {
  position: fixed;
  top: 0; left: 0;
  width: var(--dot-size);
  height: var(--dot-size);
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
  will-change: transform;
}

/* mask the alt & instance so they never bleed outside the dot */
#cursor-dot-alt,
#cursor-dot-instance {
  width: calc(var(--dot-size) - 2px);
  height: calc(var(--dot-size) - 2px);
  clip-path: circle(calc((var(--dot-size) - 2px) / 2) at 50% 50%);
}

#cursor-dot {
  background: var(--dot-color);
  border: var(--dot-border);
  z-index: 999999;
  transition:
    width var(--dot-transition) ease,
    height var(--dot-transition) ease,
    border-width var(--dot-transition) ease;
}

#cursor-dot-alt {
  background: transparent;
  opacity: 0;
  z-index: 3;
  transition:
    width var(--dot-transition) ease,
    height var(--dot-transition) ease;
}

#cursor-dot-instance {
  background: black;
  z-index: 2;
  transition:
    width var(--dot-transition) ease,
    height var(--dot-transition) ease;
}



/* 4) DOT HOVER STATES */

/* now size and style each layer as before */
body.cursor-focus #cursor-dot,
body.cursor-focus #cursor-dot-instance {
  width: var(--dot-hover-size);
  height: var(--dot-hover-size);
}

body.cursor-focus #cursor-dot {
  mix-blend-mode: var(--blend-mode);
  backdrop-filter: blur(var(--dot-hover-blur));
  border: var(--dot-hover-border);
  background: var(--dot-hover-color);
}

/* preserve black on the instance layer */
body.cursor-focus #cursor-dot-instance {
  background: black !important;
  mix-blend-mode: normal !important;
  backdrop-filter: none !important;
  width: calc(var(--dot-hover-size) + 2px);
  height: calc(var(--dot-hover-size) + 2px);
  clip-path: circle(calc(var(--dot-instance-hover-size) / 2) at 50% 50%);
}



/* 5) DOT CLICK STATES */

body.cursor-click #cursor-dot,
body.cursor-click #cursor-dot-instance {
  width: var(--dot-click-size);
  height: var(--dot-click-size);
  background: var(--dot-click-color);
  transition:
    width var(--click-transition-duration) ease,
    height var(--click-transition-duration) ease;
}
body.cursor-click #cursor-dot-alt,
body.cursor-click #cursor-dot-instance {
  clip-path: circle(calc(var(--dot-click-size) / 2) at 50% 50%);
}



/* 6) HALO BASE + BREATHING */

#cursor-halo-wrapper {
  position: fixed;
  top: 0; left: 0;
  width: 0; height: 0;
  pointer-events: none;
  z-index: 1;
  will-change: transform;
  transform-origin: center center;
}
#cursor-halo {
  position: absolute;
  top: 0; left: 0;
  width: var(--halo-size-default);
  height: var(--halo-size-default);
  border-radius: 50%;
  background: var(--halo-color);
  mix-blend-mode: var(--blend-mode);
  opacity: var(--halo-opacity-default);
  transform-origin: center center;
  transform: translate(-50%, -50%) scale(var(--halo-breath-min-scale));
  transition: var(--halo-transition);
  animation: breathe-normal var(--breathe-speed) ease-in-out infinite alternate;
}

@keyframes breathe-normal {
  0%   { transform: translate(-50%, -50%) scale(var(--halo-breath-min-scale)); }
  100% { transform: translate(-50%, -50%) scale(var(--halo-breath-max-scale)); }
}
@keyframes breathe-hover {
  0%   { transform: translate(-50%, -50%) scale(var(--halo-hover-breath-min-scale)); }
  100% { transform: translate(-50%, -50%) scale(var(--halo-hover-breath-max-scale)); }
}
@keyframes breathe-click {
  0%   { transform: translate(-50%, -50%) scale(var(--halo-click-max-scale)); }
  100% { transform: translate(-50%, -50%) scale(var(--halo-click-min-scale)); }
}



/* 7) HALO HOVER STATE */

body.cursor-focus #cursor-halo {
  width: var(--halo-size-hover);
  height: var(--halo-size-hover);
  opacity: var(--halo-opacity-hover);
  animation: breathe-hover var(--hover-breathe-speed) ease-in-out infinite alternate;
  transition: var(--halo-transition);
}



/* 8) HALO CLICK STATE */

body.cursor-click #cursor-halo {
  width: var(--halo-size-click);
  height: var(--halo-size-click);
  opacity: var(--halo-opacity-click);
  transition: var(--halo-transition);
  transform: translate(-50%, -50%) scale(var(--halo-click-min-scale));
  animation: breathe-click var(--click-breathe-speed) ease-in-out infinite alternate;
}



/* 9) TAP RIPPLE */

body.cursor-tap #cursor-halo {
  animation: ripple-tap var(--flash-duration) ease-out forwards;
}
@keyframes ripple-tap {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0); }
  50%  { opacity: var(--flash-opacity); transform: translate(-50%, -50%) scale(1.5); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(2); }
}