/* Custom styles supporting the Tailwind layout */

:root {
  color-scheme: light;
}

html {
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  background:
    radial-gradient(circle at 14% 86%, rgba(213, 235, 220, 0.75), transparent 26%),
    radial-gradient(circle at 86% 18%, rgba(227, 236, 213, 0.85), transparent 28%),
    linear-gradient(135deg, #f7f1e4 0%, #faf8f2 48%, #f0f5e9 100%);
}

.text-balance {
  text-wrap: balance;
}

.text-pretty {
  text-wrap: pretty;
}

.domain-title {
  direction: ltr;
  unicode-bidi: isolate;
  font-size: clamp(3.1rem, 9vw, 6.7rem);
  line-height: 0.98;
  text-shadow: 0 14px 28px rgba(13, 49, 85, 0.08);
}

.dot {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 9999px;
  opacity: 0.22;
  animation: floatDot 7s ease-in-out infinite;
}

.dot-green { background: #14965a; }
.dot-gold { background: #d2a54c; }

.dot-1 { top: 18%; right: 6%; animation-delay: 0s; }
.dot-2 { top: 23%; left: 12%; animation-delay: 1s; }
.dot-3 { top: 48%; right: 17%; animation-delay: 2s; }
.dot-4 { top: 57%; left: 7%; animation-delay: 3s; }
.dot-5 { bottom: 12%; right: 24%; animation-delay: 4s; }
.dot-6 { bottom: 8%; left: 23%; animation-delay: 5s; }

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.8s ease,
    transform 0.8s ease;
}

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

@keyframes floatDot {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}

@media (max-width: 640px) {
  .domain-title {
    font-size: clamp(2.5rem, 14vw, 4.2rem);
    letter-spacing: -0.07em;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}