/* Custom cursor, replicated from the Dario Webflow template
   (https://kitpro-dario.webflow.io). The markup is created by cursor.js:

   .wrapper-cursor            fixed full-viewport overlay
     .block-cursor            1.5vw square that follows the pointer
       .cursor.v1 … .v4       four white corner brackets
       .circle-cursor         orange centre dot, always visible
       .halo-cursor           pale orange halo, pulses while hovering a link
     .line-cursor.v1          vertical crosshair line (follows X)
     .line-cursor.v2          horizontal crosshair line (follows Y)

   Sizes are in vw, exactly as in the original. */

/* The custom cursor is shown on any device with a mouse or trackpad and
   hidden on touch devices. (The original keys this on a 992px breakpoint,
   which also hides it in narrow desktop windows.) */
@media (hover: hover) and (pointer: fine) {
  /* Hide the native pointer on everything, overriding template rules such
     as Webflow's badge (cursor: pointer !important). Text fields keep their
     I-beam so typing still feels normal. */
  body,
  body *:not(input):not(textarea):not(select) {
    cursor: none !important;
  }
}

.wrapper-cursor {
  z-index: 2147483000; /* above anything a template page stacks */
  pointer-events: none;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  position: fixed;
  inset: 0;
  opacity: 0;
  transition: opacity 0.3s;
}

.wrapper-cursor.is-active {
  opacity: 1;
}

/* The three moving pieces get their own compositor layers so tracking the
   pointer only moves layers instead of repainting the page every frame. */
.block-cursor,
.line-cursor {
  will-change: transform;
  backface-visibility: hidden;
}

.block-cursor {
  z-index: 2;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 1.5vw;
  height: 1.5vw;
  position: absolute;
  top: 0;
  left: 0;
  /* Leaving a link: back to 1.5vw at 1.5x speed (0.2s), as in the original. */
  transition: width 0.2s cubic-bezier(0.45, 0, 0.55, 1), height 0.2s cubic-bezier(0.45, 0, 0.55, 1);
}

/* Hovering a link: grow to 4vw over 0.3s with power2.inOut, as in the original. */
.wrapper-cursor.is-hover .block-cursor {
  width: 4vw;
  height: 4vw;
  transition-duration: 0.3s;
}

/* Hovering an element marked data-cursor="cta" (the Dario CTA button): the
   block grows to 13vw and the corner marks to 0.7vw over 0.35s. */
.wrapper-cursor.is-hover.is-cta .block-cursor {
  width: 13vw;
  height: 13vw;
  transition-duration: 0.35s;
}

.cursor {
  transition: width 0.35s cubic-bezier(0.45, 0, 0.55, 1), height 0.35s cubic-bezier(0.45, 0, 0.55, 1);
}

.wrapper-cursor.is-hover.is-cta .cursor {
  width: 0.7vw;
  height: 0.7vw;
}

.cursor {
  aspect-ratio: 1;
  width: 0.3vw;
  position: absolute;
  top: 0;
  left: 0;
}

.cursor.v1 {
  border-top: 1px solid var(--cursor-bracket, #fff);
  border-left: 1px solid var(--cursor-bracket, #fff);
}

.cursor.v2 {
  border-top: 1px solid var(--cursor-bracket, #fff);
  border-right: 1px solid var(--cursor-bracket, #fff);
  left: auto;
  right: 0;
}

.cursor.v3 {
  border-bottom: 1px solid var(--cursor-bracket, #fff);
  border-left: 1px solid var(--cursor-bracket, #fff);
  top: auto;
  bottom: 0;
}

.cursor.v4 {
  border-right: 1px solid var(--cursor-bracket, #fff);
  border-bottom: 1px solid var(--cursor-bracket, #fff);
  top: auto;
  left: auto;
  right: 0;
  bottom: 0;
}

.circle-cursor {
  aspect-ratio: 1;
  background-color: #ff6a00; /* the original's dot is white and only shows on hover */
  border-radius: 999vw;
  width: 0.35vw;
  position: absolute;
  /* Always visible: the crosshair centre is a solid orange dot at rest. */
  opacity: 1;
}

/* Halo around the dot, shown only while hovering a link. The dot itself
   never changes; the halo (≈6× the dot) fades in and pulses. */
.halo-cursor {
  aspect-ratio: 1;
  width: 2.1vw;
  border-radius: 999vw;
  background-color: rgba(255, 106, 0, 0.3);
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -1.05vw 0 0 -1.05vw;
  opacity: 0;
  transition: opacity 0.8s cubic-bezier(0.65, 0, 0.35, 1); /* fade-out on leave */
}

.wrapper-cursor.is-hover .halo-cursor {
  animation: cursor-halo-pulse 1.6s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

@keyframes cursor-halo-pulse {
  0% {
    transform: scale(0.45);
    opacity: 0.9;
  }
  50% {
    transform: scale(1);
    opacity: 0.35;
  }
  100% {
    transform: scale(0.45);
    opacity: 0.9;
  }
}

.line-cursor {
  z-index: 0;
  /* The original uses #181818, which vanishes on this site's black pages;
     a soft grey stays visible without competing with the white brackets. */
  background-color: var(--cursor-line, #9a9a9a);
  position: absolute;
  top: 0;
  left: 0;
}

.line-cursor.v1 {
  width: 0.05vw;
  height: 100%;
}

.line-cursor.v2 {
  width: 100%;
  height: 0.05vw;
}

@media not ((hover: hover) and (pointer: fine)) {
  .wrapper-cursor {
    display: none;
  }
}