/* Wonred Labs LLC — shared styles
   Loaded on every page AFTER the Tailwind Play CDN. Keeps custom CSS that
   Tailwind utilities don't cover (glass nav, blob animation delays, scroll
   reveal, FAQ accordion) consistent across all pages without a build step. */

/* Frosted navigation bar */
.glass-nav {
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Hero "blob" stagger — these utility classes are referenced in markup but are
   NOT generated by the Tailwind CDN, so define them here. */
.animation-delay-2000 { animation-delay: 2s; }
.animation-delay-4000 { animation-delay: 4s; }

/* Fallback keyframes + utility so the animated blobs work even on pages whose
   inline tailwind.config omits the keyframes. */
@keyframes blob {
  0%   { transform: translate(0px, 0px) scale(1); }
  33%  { transform: translate(30px, -50px) scale(1.1); }
  66%  { transform: translate(-20px, 20px) scale(0.9); }
  100% { transform: translate(0px, 0px) scale(1); }
}
.animate-blob { animation: blob 7s infinite; }

/* Scroll-reveal: elements tagged .reveal fade/slide in when scrolled into view
   (js/wonred.js adds .is-visible). */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* FAQ accordion: panel height animated by js/wonred.js via inline max-height. */
.faq-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}
.faq-icon {
  transition: transform 0.3s ease;
}
[data-faq-toggle][aria-expanded="true"] .faq-icon {
  transform: rotate(180deg);
}

/* Soft framed image treatment used for in-device mockups / illustrations. */
.img-frame {
  border-radius: 1rem;
  border: 1px solid rgba(51, 65, 85, 0.5);
  background: #1e293b;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
}

/* Respect users who prefer reduced motion. */
@media (prefers-reduced-motion: reduce) {
  .animate-blob { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}