@layer base {
  :root {
    --navy-dark: #071524;
    --navy-nav: #0f2f52;
    --navy-card: #132b45;
    --navy-surface: #19385c;
    --blue: #5D7FEE;
    --sky: #819CFF;
    --text-primary: #F3F4F6;
    --text-secondary: #9CA3AF;
  }

  html {
    scroll-behavior: smooth;
    font-family: "Work Sans", sans-serif;
  }

  body {
    background-color: #071524;
    color: #F3F4F6;
    overflow-x: hidden;
  }
}

.hero-font {
  font-family: "Arvo", Georgia, serif;
}

.brand-font {
  font-family: "Contrail One", cursive, sans-serif;
}

.font-work {
  font-family: "Work Sans", sans-serif;
}

/* Hero Background Grid */
.hero-grid {
  background-image:
    linear-gradient(rgba(93, 127, 238, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(93, 127, 238, 0.12) 1px, transparent 1px);
  background-size: 36px 36px;
  mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
}

/* Floating animation */
@keyframes float-gentle {
  0%, 100% {
    transform: translateY(0px) rotate(-1deg);
  }
  50% {
    transform: translateY(-8px) rotate(1deg);
  }
}

.animate-float-gentle {
  animation: float-gentle 6s ease-in-out infinite;
}

@keyframes drift-slow {
  from {
    transform: translate3d(-15px, -10px, 0) scale(0.95);
  }
  to {
    transform: translate3d(20px, 20px, 0) scale(1.1);
  }
}

.animate-drift {
  animation: drift-slow 14s ease-in-out infinite alternate;
}

/* Ringing phone effect animation */
@keyframes phone-ring {
  0% { transform: rotate(0) scale(1); }
  4% { transform: rotate(-24deg) scale(1.18); }
  8% { transform: rotate(22deg) scale(1.18); }
  12% { transform: rotate(-20deg) scale(1.18); }
  16% { transform: rotate(20deg) scale(1.18); }
  20% { transform: rotate(-14deg) scale(1.12); }
  24% { transform: rotate(14deg) scale(1.12); }
  28% { transform: rotate(-8deg) scale(1.06); }
  32% { transform: rotate(8deg) scale(1.06); }
  36% { transform: rotate(0) scale(1); }
  100% { transform: rotate(0) scale(1); }
}

.animate-phone-ring {
  display: inline-block;
  transform-origin: center center;
  animation: phone-ring 2s ease-in-out infinite;
}