/* ==========================================================================
   GLOBAL CUSTOM CURSOR (Monof 4-Crosshair Lines + Center Circle System)
   ========================================================================== */

/* 1. Base cursor reset */
html,
body {
  cursor: none;
}

/* 2. Preserve native hand pointer on all interactive & clickable elements */
a,
button,
input[type="submit"],
input[type="button"],
input[type="reset"],
[role="button"],
.button,
.card-work,
.link-blog,
.w-inline-block,
.block-menu-footer,
.icon-social,
.icon-social-footer,
.faq,
.interactive-card,
.light-card,
[data-cursor] {
  cursor: pointer !important;
}

/* 3. Preserve text cursor on input fields and textareas */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="search"],
textarea {
  cursor: text !important;
}

/* 4. Fullscreen crosshair container (mix-blend-mode: difference for automatic inversion) */
.plus-line-wrapper {
  z-index: 9998;
  pointer-events: none;
  mix-blend-mode: difference;
  justify-content: center;
  align-items: center;
  display: flex;
  position: fixed;
  inset: 0%;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.plus-line-wrapper.is-visible {
  opacity: 1;
}

/* 5. Vertical hairline spanning full viewport height */
.horizontal-line {
  opacity: .18;
  background-color: #d3d3d3;
  width: 1px;
  height: 100vh;
  position: absolute;
  pointer-events: none;
  will-change: transform;
}

/* 6. Horizontal hairline spanning full viewport width */
.verical-line {
  opacity: .18;
  background-color: #d3d3d3;
  width: 100%;
  height: 1px;
  position: absolute;
  pointer-events: none;
  will-change: transform;
}

/* 7. Central circular dot (20px) at the intersection of the 4 lines */
.plus-wrapper {
  z-index: 2;
  background-color: #ffffff;
  border-radius: 100%;
  width: 20px;
  height: 20px;
  position: absolute;
  pointer-events: none;
  will-change: transform;
  transition: transform 0.25s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.2s ease;
}

/* 8. Floating tooltip pill container */
.text-tool-tip {
  z-index: 9999;
  pointer-events: none;
  justify-content: center;
  align-items: center;
  display: flex;
  position: fixed;
  inset: 0%;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.text-tool-tip.is-visible {
  opacity: 1;
}

/* 9. Frosted glass pill badges */
.view-work,
.read-more {
  z-index: 1;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #ffffff;
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 30px;
  justify-content: center;
  align-items: center;
  width: 0;
  height: 0;
  display: flex;
  position: absolute;
  overflow: hidden;
  will-change: transform, width, height;
  transition: width 0.3s cubic-bezier(0.215, 0.61, 0.355, 1), height 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.mn-text {
  overflow-wrap: break-word;
  white-space: nowrap;
  width: 100%;
  position: absolute;
  opacity: 0;
  transition: opacity 0.25s ease;
}

/* 10. Active hover pill expansions */
.view-work.is-active {
  width: 110px;
  height: 36px;
}
.view-work.is-active .mn-text {
  opacity: 1;
}

.read-more.is-active {
  width: 115px;
  height: 36px;
}
.read-more.is-active .mn-text {
  opacity: 1;
}

.plus-wrapper.is-hidden {
  transform: scale(0) !important;
  opacity: 0 !important;
}

/* 11. Smart accessibility hover behavior (automatically hide circle on links/buttons/inputs) */
body:has(a:hover) .plus-wrapper,
body:has(button:hover) .plus-wrapper,
body:has(.button:hover) .plus-wrapper,
body:has([role="button"]:hover) .plus-wrapper,
body:has(.faq:hover) .plus-wrapper,
body:has(input:hover) .plus-wrapper,
body:has(textarea:hover) .plus-wrapper,
body:has([wb-data="marquee"]:hover) .plus-wrapper {
  transform: scale(0) !important;
  opacity: 0 !important;
}

/* Dim crosshairs slightly when hovering interactive links */
body:has(a:hover) .horizontal-line,
body:has(a:hover) .verical-line,
body:has(button:hover) .horizontal-line,
body:has(button:hover) .verical-line,
body:has(.button:hover) .horizontal-line,
body:has(.button:hover) .verical-line {
  opacity: 0.08;
}

/* 12. Disable on touch / mobile screens (restores normal OS cursor) */
@media (max-width: 991px) {
  .plus-line-wrapper,
  .text-tool-tip {
    display: none !important;
  }
  html,
  body,
  *,
  a,
  button,
  input,
  textarea {
    cursor: auto !important;
  }
}