@tailwind base;
@tailwind components;
@tailwind utilities;
/* @import 'pagy.tailwind.css'; not working */
/*

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-coral-100;
  }
}

*/

@layer base {
  h1 {
    @apply text-2xl lg:text-3xl tracking-tight  font-black text-pretty text-ink-900 bg-clip-text;
  }
}
@layer utilities {
  .layout-container {
    @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 min-h-screen py-8;
  }
}
@layer components {
  .btn {
    @apply bg-coral-600 text-white px-6 py-2.5 rounded-full font-semibold hover:bg-coral-700 transition-colors shadow-lg shadow-coral-100;
  }
}

@keyframes spin-slow {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.animate-spin-slow {
  animation: spin-slow 20s linear infinite;
}

/* thespecial.app landing page (designsystem.md) */
@layer components {
  /* Night-gradient stand-in until public/landing/hero.jpg and cta.jpg exist. */
  .landing-night {
    background:
      /* bokeh: small, warm, out-of-focus city lights on the right where the photo's faces would be */
      radial-gradient(circle at 70% 16%, theme('colors.star.500 / 60%') 0 1.1%, transparent 1.4%),
      radial-gradient(circle at 77% 24%, theme('colors.coral.500 / 55%') 0 1.8%, transparent 2.2%),
      radial-gradient(circle at 84% 14%, theme('colors.star.500 / 45%') 0 2.4%, transparent 2.9%),
      radial-gradient(circle at 90% 30%, theme('colors.coral.500 / 50%') 0 1.3%, transparent 1.7%),
      radial-gradient(circle at 73% 38%, theme('colors.cat.happy / 45%') 0 2%, transparent 2.5%),
      radial-gradient(circle at 93% 48%, theme('colors.star.500 / 50%') 0 2.8%, transparent 3.4%),
      radial-gradient(circle at 81% 42%, theme('colors.cat.events / 40%') 0 1.5%, transparent 2%),
      radial-gradient(circle at 66% 30%, theme('colors.coral.500 / 40%') 0 1%, transparent 1.3%),
      /* warm wash behind the phone and skyline */
      radial-gradient(circle at 80% 38%, theme('colors.star.500 / 22%'), transparent 30%),
      radial-gradient(circle at 92% 62%, theme('colors.coral.500 / 30%'), transparent 28%),
      radial-gradient(circle at 70% 78%, theme('colors.cat.events / 20%'), transparent 30%),
      linear-gradient(160deg, theme('colors.navy.800') 0%, theme('colors.navy.950') 70%);
  }
  .landing-night--cta {
    background:
      radial-gradient(circle at 85% 50%, theme('colors.coral.500 / 45%'), transparent 22%),
      radial-gradient(circle at 15% 60%, theme('colors.star.500 / 30%'), transparent 24%),
      linear-gradient(160deg, theme('colors.navy.800') 0%, theme('colors.navy.950') 70%);
  }

  /* Scroll reveal: fade up 24px, 500ms. */
  [data-reveal] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 500ms cubic-bezier(0.22, 1, 0.36, 1), transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--reveal-delay, 0ms);
  }
  [data-reveal].is-visible {
    opacity: 1;
    transform: none;
  }

  /* Pins drop in from 12px above with a small bounce. */
  .landing-pin {
    animation: pin-drop 400ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
    animation-delay: var(--pin-delay, 0ms);
  }
  .landing-card {
    animation: card-in 160ms ease-out both;
  }
  .landing-float {
    animation: phone-float 6s ease-in-out infinite;
  }

  @keyframes pin-drop {
    from { opacity: 0; margin-top: -12px; }
    to { opacity: 1; margin-top: 0; }
  }
  @keyframes card-in {
    from { opacity: 0; transform: scale(0.96); }
    to { opacity: 1; transform: scale(1); }
  }
  @keyframes phone-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
  }

  @media (prefers-reduced-motion: reduce) {
    [data-reveal] { transform: none; transition: opacity 150ms linear; }
    .landing-pin, .landing-float { animation: none; }
    .landing-card { animation: card-in-reduced 150ms linear both; }
    @keyframes card-in-reduced { from { opacity: 0; } to { opacity: 1; } }
  }
}