/* Base Settings */
:root {
  --x: 50%;
  --y: 50%;
  --scroll-y: 0px;
}

body {
  margin: 0;
  padding: 0;
  background-color: #000;
  color: #fff;
  cursor: none; /* Hide default cursor */
  overflow-x: hidden;
}

/* Custom Cursor */
#cursor-dot,
#cursor-outline {
  position: fixed;
  top: 0;
  left: 0;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
}

#cursor-dot {
  width: 4px;
  height: 4px;
  background-color: white;
  transition: transform 0.1s;
}

#cursor-outline {
  width: 32px;
  height: 32px;
  border: 1px solid white;
  mix-blend-mode: difference;
  transition: transform 0.15s ease-out, background-color 0.2s, width 0.2s, height 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Hover state for cursor */
body.hovering #cursor-outline {
  transform: translate(-50%, -50%) scale(2.5);
  background-color: white;
  color: black;
  mix-blend-mode: normal;
}

body.hovering #cursor-dot {
  opacity: 0;
}

/* Scroll Animations */
.fade-in-section {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1s ease-out, transform 1s ease-out;
}

.fade-in-section.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Hero Spotlight Effect */
.spotlight-bg {
  background: radial-gradient(circle 300px at var(--x) var(--y), rgba(255,255,255,0.1), transparent 100%);
}

.spotlight-mask {
  mask-image: radial-gradient(circle 400px at var(--x) var(--y), black 100%, transparent 0%);
  -webkit-mask-image: radial-gradient(circle 400px at var(--x) var(--y), black 100%, transparent 0%);
}

/* Author Text Decoration */
.author-bg-text {
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.05);
  color: transparent;
}

/* Hide scrollbar */
::-webkit-scrollbar {
  width: 0px;
  background: transparent;
}