/* Custom Cursor Styles */
#cursor {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 9999;
  pointer-events: none;
  will-change: transform;
  transform: translate(-50%, -50%);
}

#circle1 {
  position: absolute;
  box-shadow: 0 0 1px 0 #F15A25 inset, 0 0 1px 0 #F15A25;
  border-radius: 50%;
  mix-blend-mode: exclusion;
  background: #F15A25;
  will-change: transform, width, height;
}

#circle1.default {
  animation: circleDefault 0.3s cubic-bezier(0.64, 0.57, 0.67, 1.1) forwards;
}

#circle1.enter {
  animation: cursorEnter 0.5s forwards;
}

#circle1.leave {
  animation: cursorLeave 0.3s forwards;
}

#circle1.menuFocusIn {
  animation: menuFocusIn 0.4s cubic-bezier(0.34, 0.07, 0.37, 1.43) forwards;
}

#circle1.menuMouseDown {
  animation: menuMouseDown 0.5s cubic-bezier(0.34, 0.07, 0.37, 1.53) forwards;
}

#circle1.menuClick {
  animation: menuClick 0.5s cubic-bezier(0.34, 0.07, 0.37, 1.9) forwards;
}

#circle1.mouse-down-to-default {
  animation: mouseDownToDefault 0.3s forwards;
}

/* Cursor Animations */
@keyframes cursorEnter {
  from {
    height: 0px;
    width: 0px;
    margin-top: 0px;
    margin-left: 0px;
    border: 0px solid #F15A25;
  }
  to {
    height: 20px;
    width: 20px;
    margin-top: -7px;
    margin-left: -7px;
    border: 1px solid #F15A25;
  }
}

@keyframes cursorLeave {
  from {
    height: 20px;
    width: 20px;
    margin-top: -7px;
    margin-left: -7px;
    border: 1px solid #F15A25;
  }
  to {
    height: 0px;
    width: 0px;
    margin-top: 0px;
    margin-left: 0px;
    border: 0px solid #F15A25;
  }
}

@keyframes circleDefault {
  from {
    margin-left: -1.8em;
    margin-top: -1.8em;
    width: 3.6em;
    height: 3.6em;
    background: #F15A25;
  }
  to {
    height: 20px;
    width: 20px;
    margin-top: -7px;
    margin-left: -7px;
    background: #F15A25;
  }
}

@keyframes menuFocusIn {
  from {
    animation-delay: 0.1s;
    border: 1px solid #F15A25;
    height: 20px;
    width: 20px;
    margin-top: -7px;
    margin-left: -7px;
    background: #F15A25;
    box-shadow: 0 0 1px 0 #F15A25 inset, 0 0 1px 0 #F15A25;
  }
  to {
    border: 1px solid #F15A25;
    box-shadow: 0 0 1px 0 #F15A25 inset, 0 0 1px 0 #F15A25;
    background: transparent;
    margin-left: -28px;
    margin-top: -28px;
    width: 56px;
    height: 56px;
  }
}

@keyframes menuMouseDown {
  from {
    border: 1px solid #F15A25;
    box-shadow: 0 0 1px 0 #F15A25 inset, 0 0 1px 0 #F15A25;
    background: transparent;
    margin-left: -28px;
    margin-top: -28px;
    width: 56px;
    height: 56px;
  }
  to {
    border: 1px solid #F15A25;
    box-shadow: 0 0 1px 0 #F15A25 inset, 0 0 1px 0 #F15A25;
    background: transparent;
    margin-left: -7px;
    margin-top: -7px;
    width: 20px;
    height: 20px;
  }
}

@keyframes menuClick {
  from {
    border: 1px solid #F15A25;
    background: transparent;
    margin-left: -7px;
    margin-top: -7px;
    width: 20px;
    height: 20px;
  }
  to {
    border: 1px solid #F15A25;
    background: transparent;
    margin-left: -28px;
    margin-top: -28px;
    width: 56px;
    height: 56px;
  }
}

@keyframes mouseDownToDefault {
  from {
    border: 1px solid #F15A25;
    box-shadow: 0 0 1px 0 #F15A25 inset, 0 0 1px 0 #F15A25;
    background: transparent;
    margin-left: -7px;
    margin-top: -7px;
    width: 20px;
    height: 20px;
  }
  to {
    border: 1px solid #F15A25;
    box-shadow: 0 0 1px 0 #F15A25 inset, 0 0 1px 0 #F15A25;
    background: #F15A25;
    height: 20px;
    width: 20px;
    margin-top: -7px;
    margin-left: -7px;
  }
}

/* Hide default cursor */
*, *::before, *::after {
  cursor: none !important;
}

body {
  cursor: none !important;
}

/* Ensure interactive elements don't show default cursor */
a, button, input, select, textarea,
[role="button"],
.clickable,
.menu-wrapper,
.slick-arrow,
.custom-button,
.close-btn,
.modal-content,
.stories-card,
[data-bs-toggle],
[data-bs-dismiss],
.video-speed-btn,
.speed-option {
  cursor: none !important;
}

/* Hide cursor on touch devices */
@media (hover: none) and (pointer: coarse) {
    #cursor {
        display: none !important;
    }
    
    *, *::before, *::after,
    html, body,
    a, button, input, select, textarea,
    [role="button"],
    .clickable,
    .menu-wrapper,
    .slick-arrow,
    .custom-button,
    .close-btn,
    .modal-content,
    .stories-card,
    [data-bs-toggle],
    [data-bs-dismiss] {
        cursor: auto !important;
    }
}