/* Custom properties and base setup */
:root {
  --ring-color: #10b981;
}

body {
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.touch-manipulation {
    touch-action: manipulation;
}

.scrollbar-hide::-webkit-scrollbar {
    display: none;
}
.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

@keyframes pulse-slow {
  0%, 100% {
    opacity: 0.8;
    transform: scale(1);
  }
  50% {
    opacity: 0.4;
    transform: scale(1.05);
  }
}

.animate-pulse-slow {
  animation: pulse-slow 10s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.animation-delay-2000 {
  animation-delay: 2s;
}

@keyframes spin-cw {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.orbit-spin {
  animation: spin-cw 25s linear infinite;
  transform-origin: center;
}

.scroll-reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
              transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.scroll-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

noscript .scroll-reveal {
  opacity: 1;
  transform: translateY(0);
}

.habit-complete-burst {
  animation: habit-pop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes habit-pop {
  0% { transform: scale(1); }
  50% { transform: scale(1.15); }
  100% { transform: scale(1); }
}

.habit-ring {
  position: fixed;
  border: 2px solid var(--ring-color);
  border-radius: 50%;
  pointer-events: none;
  z-index: 100;
  animation: ring-expand 0.5s ease-out forwards;
}

@keyframes ring-expand {
  0% { transform: scale(0.5); opacity: 1; border-width: 4px; }
  100% { transform: scale(1.8); opacity: 0; border-width: 1px; }
}

.habit-particle {
  position: fixed;
  pointer-events: none;
  z-index: 100;
  animation: particle-fly var(--dur) ease-out forwards;
  animation-delay: var(--delay);
  opacity: 0;
}

@keyframes particle-fly {
  0% { 
      transform: translate(0, 0) rotate(0deg); 
      opacity: 1; 
  }
  100% { 
      transform: translate(var(--tx), var(--ty)) rotate(var(--rot)); 
      opacity: 0; 
  }
}