src/app/custom-style.css

/* @polsia:user-owned — custom global CSS */

/* Self-hosted variable fonts (CSP-safe: served from 'self') */
@import "@fontsource-variable/space-grotesk";
@import "@fontsource-variable/inter";

:root {
  /* Hero — solid deep indigo ink */
  --hero-bg: oklch(0.22 0.06 277);
  /* Solid indigo CTA */
  --cta-color: oklch(0.51 0.2 277);
  /* Sidebar background */
  --sidebar-bg: #f7f8fa;
  /* Card hover border accent */
  --card-hover-border: oklch(0.6 0.18 277);
  /* WhatsApp green */
  --whatsapp-green: #25d366;
}

/* ===== Hero — solid indigo base with animated aurora + grid overlay ===== */
.hero-gradient {
  background: var(--hero-bg);
}

/* Subtle dot-grid overlay, faded at the edges */
.hero-gradient::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(oklch(1 0 0 / 0.05) 1px, transparent 1px),
    linear-gradient(90deg, oklch(1 0 0 / 0.05) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, black, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, black, transparent 75%);
}

/* Slow-drifting aurora blobs */
.hero-glow {
  position: absolute;
  border-radius: 9999px;
  filter: blur(90px);
  pointer-events: none;
}

.hero-glow-1 {
  top: -6rem;
  right: -4rem;
  height: 22rem;
  width: 22rem;
  background: oklch(0.55 0.22 277 / 0.4);
  animation: drift-a 14s ease-in-out infinite alternate;
}

.hero-glow-2 {
  bottom: -8rem;
  left: -6rem;
  height: 26rem;
  width: 26rem;
  background: oklch(0.6 0.2 310 / 0.28);
  animation: drift-b 18s ease-in-out infinite alternate;
}

@keyframes drift-a {
  from {
    transform: translate(0, 0) scale(1);
  }
  to {
    transform: translate(-70px, 50px) scale(1.2);
  }
}

@keyframes drift-b {
  from {
    transform: translate(0, 0) scale(1.15);
  }
  to {
    transform: translate(60px, -40px) scale(0.95);
  }
}

/* Gradient headline treatment for the hero H1 */
.hero-title-gradient {
  background: linear-gradient(115deg, #fff 55%, oklch(0.82 0.11 285));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ===== Scroll reveal (driven by ScrollReveal in motion.tsx) ===== */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.reveal.in-view {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .hero-glow-1,
  .hero-glow-2 {
    animation: none;
  }

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

/* ===== Entrance animation (respects reduced motion) ===== */
@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-up {
  animation: fade-up 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.animate-delay-1 {
  animation-delay: 0.1s;
}

.animate-delay-2 {
  animation-delay: 0.2s;
}

.animate-delay-3 {
  animation-delay: 0.3s;
}

@media (prefers-reduced-motion: reduce) {
  .animate-fade-up {
    animation: none;
  }
}