/* Behaviour the Lovable build did with React: entrance animations, mobile menu, form states. */

/* Entrance animations. Hidden start states apply only when JavaScript runs (html.js). */
.js [data-rv] { transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1); }
.js [data-rv]:not(.in) { opacity: 0; transform: translateY(32px); }
.js [data-rv*="60px"]:not(.in) { transform: translateY(60px); }
.js [data-rv*="scale"]:not(.in) { transform: scale(0.94); }
.js [data-rv*="110%"]:not(.in) { opacity: 1; transform: translateY(110%); }
@media (prefers-reduced-motion: reduce) {
  .js [data-rv]:not(.in) { opacity: 1; transform: none; }
  .js [data-rv] { transition: none; }
}

/* Header gets a soft blur once the page scrolls */
#siteHeader.scrolled { background: color-mix(in oklab, var(--background) 85%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); }

/* Mobile menu */
.mobile-menu { border-top: 1px solid var(--border); background: var(--background); }
.mobile-menu nav { display: grid; padding-block: 12px 24px; }
.mobile-menu a { font-family: var(--font-display); font-size: 28px; font-weight: 700; letter-spacing: -0.03em; padding-block: 8px; text-decoration: none; color: var(--foreground); }
.mobile-menu a[aria-current] { color: var(--accent); }
.mobile-menu .mobile-cta { margin-top: 12px; justify-self: start; font-family: var(--font-body, inherit); font-size: 14px; font-weight: 600; letter-spacing: 0; background: var(--primary); color: var(--primary-foreground); border-radius: 999px; padding: 12px 22px; }
@media (min-width: 768px) { .mobile-menu { display: none !important; } }

/* Contact form states */
.form-error { color: var(--destructive); font-size: 14px; margin-top: 12px; }
.form-done { border-radius: 1.5rem; background: var(--surface); padding: 2.5rem; display: grid; gap: 0.75rem; }
.form-done h2 { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; letter-spacing: -0.04em; line-height: 1; margin: 0; }
.form-done p { color: var(--muted-foreground); margin: 0; }

/* Hero "Reach" chart: bars breathe gently */
@media (prefers-reduced-motion: no-preference) {
  .reach-bar { transform-origin: bottom; animation: reach 2.4s ease-in-out infinite; }
  .reach-bar:nth-child(2) { animation-delay: .3s } .reach-bar:nth-child(3) { animation-delay: .6s }
  .reach-bar:nth-child(4) { animation-delay: .9s } .reach-bar:nth-child(5) { animation-delay: 1.2s }
  @keyframes reach { 50% { transform: scaleY(0.55); } }
}