@import "tailwindcss";
@plugin '@tailwindcss/typography';
@import "basecoat-css";

/* Radar pulse animation */
@keyframes pulse-ring {
  0%   { transform: scale(0.9); opacity: 0.6; }
  100% { transform: scale(3.2); opacity: 0;   }
}
.pulse-ring {
  animation: pulse-ring 4s cubic-bezier(0.2, 0.5, 0.4, 1) infinite;
}
.pulse-ring:nth-child(2) { animation-delay: 1.3s; }
.pulse-ring:nth-child(3) { animation-delay: 2.6s; }

/* Scroll reveal via Stimulus */
[data-controller~="reveal"] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}
[data-controller~="reveal"].revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Hero entrance animations */
@keyframes hero-fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes hero-mockup-rise {
  from { opacity: 0; transform: translateY(32px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes hero-card-pop {
  from { opacity: 0; transform: translateY(10px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.hero-fade-up  { animation: hero-fade-up  0.7s cubic-bezier(0.22, 1, 0.36, 1) both; }
.hero-mockup   { animation: hero-mockup-rise 0.8s cubic-bezier(0.22, 1, 0.36, 1) both; }
.hero-card-pop { animation: hero-card-pop 0.55s cubic-bezier(0.22, 1, 0.36, 1) both; }

/* Hero card float — four distinct paths so the cards drift independently */
@keyframes hero-float-a {
  0%   { transform: translate(0px, 0px); }
  25%  { transform: translate(4px, -6px); }
  50%  { transform: translate(2px, -9px); }
  75%  { transform: translate(-3px, -5px); }
  100% { transform: translate(0px, 0px); }
}
@keyframes hero-float-b {
  0%   { transform: translate(0px, 0px); }
  25%  { transform: translate(-5px, -4px); }
  50%  { transform: translate(-3px, -8px); }
  75%  { transform: translate(4px, -3px); }
  100% { transform: translate(0px, 0px); }
}
@keyframes hero-float-c {
  0%   { transform: translate(0px, 0px); }
  30%  { transform: translate(5px, -5px); }
  60%  { transform: translate(3px, -9px); }
  80%  { transform: translate(-2px, -4px); }
  100% { transform: translate(0px, 0px); }
}
@keyframes hero-float-d {
  0%   { transform: translate(0px, 0px); }
  20%  { transform: translate(-4px, -7px); }
  55%  { transform: translate(-6px, -4px); }
  75%  { transform: translate(3px, -6px); }
  100% { transform: translate(0px, 0px); }
}
.hero-float-a { animation: hero-float-a 5.2s ease-in-out infinite 1.3s; }
.hero-float-b { animation: hero-float-b 6.1s ease-in-out infinite 1.45s; }
.hero-float-c { animation: hero-float-c 5.7s ease-in-out infinite 1.6s; }
.hero-float-d { animation: hero-float-d 4.9s ease-in-out infinite 1.7s; }

/* FAQ accordion */
details > summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
}
details > summary::-webkit-details-marker {
  display: none;
}
details[open] .faq-chevron {
  transform: rotate(180deg);
}
.faq-chevron {
  transition: transform 0.25s ease;
}