/* SpectraaBridge Analytics — extras for the static/PHP build (loaded after styles.css). */

/* scroll fade-in, applied by site.js only */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* gentle lift on feature cards (replaces the React spring hover) */
[data-testid*="-card-"] {
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s ease, border-color 0.35s ease;
}
[data-testid*="-card-"]:hover {
  transform: translateY(-6px);
}

/* native select styled like the other inputs */
.sb-native-select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.5rem;
  border: 1px solid var(--input, #cbd2e3);
  border-radius: 0.5rem;
  padding-left: 0.625rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234A5370' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  background-color: #fff;
  color: var(--color-navy, #0a1235);
  cursor: pointer;
}
.sb-native-select:focus-visible {
  outline: none;
  border-color: var(--ring, #00858b);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring, #00858b) 50%, transparent);
}

/* mobile menu link active state */
#mobile-menu a[aria-current="page"] {
  background: var(--color-mist, #ddf3f3);
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  [data-testid*="-card-"]:hover { transform: none; }
}