/* Ringly — site.css */

html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-behavior: smooth; }
body { font-family: 'Inter', system-ui, sans-serif; font-feature-settings: 'cv02','cv03','cv04','cv11'; }

/* Aurora hero — animated gradient mesh */
.aurora {
  position: relative; isolation: isolate; overflow: hidden;
  background: #0A0E1F;
}
.aurora::before, .aurora::after {
  content: ""; position: absolute; inset: -20%; z-index: -1; pointer-events: none;
  filter: blur(80px); opacity: .55;
}
.aurora::before {
  background:
    radial-gradient(60% 50% at 15% 25%, #4F46E5 0%, transparent 60%),
    radial-gradient(50% 50% at 80% 15%, #06B6D4 0%, transparent 60%),
    radial-gradient(60% 60% at 45% 80%, #8B5CF6 0%, transparent 60%);
  animation: aurora-1 22s ease-in-out infinite alternate;
}
.aurora::after {
  background:
    radial-gradient(40% 40% at 80% 70%, #06B6D4 0%, transparent 60%),
    radial-gradient(45% 45% at 10% 80%, #6366F1 0%, transparent 60%);
  animation: aurora-2 28s ease-in-out infinite alternate;
  opacity: .35;
}
@keyframes aurora-1 { 0%{transform:translate3d(0,0,0) rotate(0)} 100%{transform:translate3d(2%,-3%,0) rotate(8deg)} }
@keyframes aurora-2 { 0%{transform:translate3d(0,0,0) rotate(0)} 100%{transform:translate3d(-3%,2%,0) rotate(-6deg)} }

.hero-grid {
  background-image:
    linear-gradient(to right, rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 30%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 30%, transparent 100%);
}

.text-gradient {
  background: linear-gradient(120deg, #67E8F9 0%, #818CF8 45%, #C084FC 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

.glass {
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid rgba(255,255,255,0.10);
}

@keyframes pulse-soft { 0%,100%{opacity:1} 50%{opacity:.5} }
.animate-pulse { animation: pulse-soft 2s ease-in-out infinite; }

:where(input,select,textarea,button,a):focus-visible {
  outline: 2px solid #06B6D4; outline-offset: 2px; border-radius: 4px;
}
:where(input,select,textarea):focus-visible { outline-offset: 0; }

select { font-variant-emoji: emoji; }

@media (prefers-reduced-motion: reduce) {
  .aurora::before, .aurora::after, .animate-pulse { animation: none !important; }
}