/* --- CUSTOM CURSOR --- */
.custom-cursor {
  width: 30px;
  height: 30px;
  border: 2px solid var(--color-accent-sunset);
  border-radius: 50%;
  position: fixed;
  pointer-events: none;
  z-index: var(--z-cursor);
  transition: transform 100ms ease, background 200ms ease, border-color 200ms ease;
  mix-blend-mode: difference;
}

.custom-cursor.hover {
  transform: scale(1.8);
  background: rgba(224, 122, 58, 0.15);
  border-color: var(--color-accent-sunset);
}

.custom-cursor-dot {
  width: 6px;
  height: 6px;
  background: var(--color-accent-sunset);
  border-radius: 50%;
  position: fixed;
  pointer-events: none;
  z-index: var(--z-cursor);
  transition: transform 50ms ease;
}

@media (max-width: 768px) {
  .custom-cursor, .custom-cursor-dot { display: none; }
}

/* --- PARTICLES --- */
.particles-container {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: var(--z-particles);
  overflow: hidden;
}

.particle {
  position: absolute;
  width: 8px;
  height: 8px;
  opacity: 0.15;
  animation: particleFloat linear infinite;
}

.particle--leaf {
  background: var(--color-primary-light);
  border-radius: 50% 0 50% 0;
}

.particle--dot {
  background: var(--color-accent-sunset);
  border-radius: 50%;
}

@keyframes particleFloat {
  0% { transform: translateY(100vh) rotate(0deg); opacity: 0; }
  10% { opacity: 0.15; }
  90% { opacity: 0.15; }
  100% { transform: translateY(-100px) rotate(360deg); opacity: 0; }
}