/* =========================================================================
   SITE CURSOR — a cursor that changes with the section it's over
   -------------------------------------------------------------------------
   Pairs with assets/js/site-cursor.js. Mouse / trackpad only: on touch
   screens, with "reduce motion" turned on, or inside the Elementor editor
   the script never runs and the normal system cursor stays.

   The native cursor is only hidden once the script has actually drawn the
   custom one (html.has-site-cursor), so if the script fails for any reason
   visitors still see a normal pointer.

   States (set by the script as data-state on .site-cursor):
     default  small teal dot + thin ring
     link     ring grows and fills softly   (text links, tabs, nav)
     button   ring steps back, haloed dot    (filled buttons — they have
              their own hover sweep, and a ring would vanish on it)
     view     solid disc with a label        (cards that are one big link)
     hero     slowly turning dashed ring     (hero sliders)
     text     custom cursor hidden, normal text caret shows (form fields)
     hidden   custom cursor hidden, system cursor shows
   Plus .is-dark (white version over dark sections) and .is-down (pressed).

   Manual overrides — add in Elementor → Advanced → CSS Classes:
     cursor-dark   force the white version in that section
     cursor-light  force the dark version in that section
     cursor-view   show the "View" disc over that element
     cursor-hide   use the normal system cursor in that section
========================================================================= */

/* Hide the system cursor — except where people need the text caret. */
html.has-site-cursor,
html.has-site-cursor *{ cursor: none !important; }

html.has-site-cursor input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
html.has-site-cursor textarea,
html.has-site-cursor select,
html.has-site-cursor [contenteditable],
html.has-site-cursor .cursor-hide,
html.has-site-cursor .cursor-hide *{ cursor: auto !important; }

.site-cursor{
  --cur-accent: var(--c-teal, #0F9B8E);
  --cur-accent-bright: #5FD3C6;
  --cur-ink: var(--c-ink, #1B2430);
  --cur-ease: cubic-bezier(.19, 1, .22, 1);

  position: fixed;
  left: 0; top: 0;
  z-index: 100000;
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s ease-out;
}
.site-cursor.is-visible{ opacity: 1; }
.site-cursor[data-state="text"],
.site-cursor[data-state="hidden"]{ opacity: 0; }

/* Outer elements are moved by JS (transform); inner spans do the styling,
   so size/colour transitions never fight the position updates. */
.site-cursor__dot,
.site-cursor__ring{
  position: fixed;
  left: 0; top: 0;
  will-change: transform;
}

.site-cursor__dot span{
  position: absolute;
  left: -4px; top: -4px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--cur-accent);
  transition: transform .35s var(--cur-ease), background-color .3s ease-out;
}

.site-cursor__shape{
  position: absolute;
  left: 0; top: 0;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1.5px solid rgba(27, 36, 48, .32);
  background: transparent;
  transform: translate(-50%, -50%);
  transition:
    width .55s var(--cur-ease),
    height .55s var(--cur-ease),
    background-color .35s ease-out,
    border-color .35s ease-out,
    border-width .35s ease-out;
}

.site-cursor__label{
  position: absolute;
  left: 0; top: 0;
  transform: translate(-50%, -50%) scale(.6);
  font-family: var(--f-heading, "Raleway", sans-serif);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1;
  white-space: nowrap;
  color: #fff;
  opacity: 0;
  transition: opacity .25s ease-out, transform .5s var(--cur-ease);
}

/* ---- Link / button ---- */
.site-cursor[data-state="link"] .site-cursor__shape{
  width: 58px; height: 58px;
  border-color: var(--cur-accent);
  background: rgba(15, 155, 142, .14);
}
.site-cursor[data-state="link"] .site-cursor__dot span{ transform: scale(0); }

/* ---- Filled button: ring steps back, dot gets a halo that reads on
        any button colour ---- */
.site-cursor[data-state="button"] .site-cursor__shape{
  width: 12px; height: 12px;
  border-color: transparent;
}
.site-cursor[data-state="button"] .site-cursor__dot span{
  transform: scale(1.25);
  box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px rgba(27, 36, 48, .35);
}

/* ---- Whole-card link: labelled disc ---- */
.site-cursor[data-state="view"] .site-cursor__shape{
  width: 82px; height: 82px;
  border-color: var(--cur-accent);
  background: var(--cur-accent);
}
.site-cursor[data-state="view"] .site-cursor__label{
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  transition-delay: .08s;
}
.site-cursor[data-state="view"] .site-cursor__dot span{ transform: scale(0); }

/* ---- Hero: a turning dashed orbit, same motif as the hero ring ---- */
.site-cursor[data-state="hero"] .site-cursor__shape{
  width: 64px; height: 64px;
  border-style: dashed;
  border-color: rgba(255, 255, 255, .7);
  animation: site-cursor-orbit 9s linear infinite;
}
@keyframes site-cursor-orbit{
  from{ transform: translate(-50%, -50%) rotate(0deg); }
  to{   transform: translate(-50%, -50%) rotate(360deg); }
}

/* ---- Over dark sections ---- */
.site-cursor.is-dark .site-cursor__shape{ border-color: rgba(255, 255, 255, .55); }
.site-cursor.is-dark .site-cursor__dot span{ background: var(--cur-accent-bright); }
.site-cursor.is-dark[data-state="link"] .site-cursor__shape{
  border-color: #fff;
  background: rgba(255, 255, 255, .12);
}
.site-cursor.is-dark[data-state="view"] .site-cursor__shape{
  border-color: var(--cur-accent-bright);
  background: var(--cur-accent-bright);
}
.site-cursor.is-dark[data-state="view"] .site-cursor__label{ color: var(--cur-ink); }

/* ---- Pressed ---- */
.site-cursor.is-down .site-cursor__shape{ width: 28px; height: 28px; }
.site-cursor.is-down[data-state="link"] .site-cursor__shape{ width: 46px; height: 46px; }
.site-cursor.is-down[data-state="view"] .site-cursor__shape{ width: 70px; height: 70px; }
.site-cursor.is-down[data-state="button"] .site-cursor__dot span{ transform: scale(.8); }

/* Safety: never on touch-first screens or with reduced motion,
   even if the class somehow got added. */
@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce){
  .site-cursor{ display: none !important; }
  html.has-site-cursor,
  html.has-site-cursor *{ cursor: auto !important; }
}