/* ── UX accent variable — funciona nas 3 páginas ────────────────────────────
   home/arch definem --accent; cto define --blue com o mesmo valor (#FF9966)  */
:root { --ux-accent: var(--accent, var(--blue, #FF9966)); }

/* ── Fade de entrada da página (CSS puro, sem JS necessário) ──────────────── */
@keyframes ux-page-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
body { animation: ux-page-in 0.4s ease both; }

/* ── Barra de progresso de scroll ─────────────────────────────────────────── */
#scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0%;
  background: var(--ux-accent);
  z-index: 99999;
  pointer-events: none;
  will-change: width;
}

/* ── Hero entrance animations ─────────────────────────────────────────────── */
@keyframes ux-fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes ux-fade-up-sm {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes ux-rule-in {
  from { opacity: 0; transform: scaleX(0); transform-origin: left center; }
  to   { opacity: 1; transform: scaleX(1); transform-origin: left center; }
}
@keyframes ux-panel-in {
  from { opacity: 0; transform: scale(0.97) translateY(12px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.hero-animate {
  opacity: 0;
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}
.hero-animate.anim-fade-up    { animation-name: ux-fade-up;    animation-duration: 500ms; }
.hero-animate.anim-fade-up-lg { animation-name: ux-fade-up;    animation-duration: 600ms; }
.hero-animate.anim-rule       { animation-name: ux-rule-in;    animation-duration: 400ms; }
.hero-animate.anim-fade-up-sm { animation-name: ux-fade-up-sm; animation-duration: 500ms; }
.hero-animate.anim-panel      { animation-name: ux-panel-in;   animation-duration: 600ms; }

/* ── Stagger reveal individual ────────────────────────────────────────────── */
.reveal-item {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-item.visible { opacity: 1; transform: none; }

/* ── Navbar — transição suave do logo ─────────────────────────────────────── */
.navbar-logo img {
  transition: height 0.3s ease !important;
}
.ux-scrolled .navbar-logo img {
  height: 3.5rem !important;
}

/* ── Back to top — transição suave ───────────────────────────────────────── */
#scrollToTop {
  transition: opacity 0.3s ease, transform 0.3s ease, background 0.2s !important;
}
#scrollToTop:hover { transform: translateY(-3px) !important; }

/* ── Form: spinner no btn-loading (formoid já aplica a classe) ────────────── */
.btn-loading {
  position: relative !important;
  color: transparent !important;
  pointer-events: none !important;
}
.btn-loading::after {
  content: "";
  position: absolute;
  width: 16px; height: 16px;
  top: 50%; left: 50%;
  margin: -8px 0 0 -8px;
  border: 2px solid rgba(255,255,255,0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: ux-spin 0.7s linear infinite;
}
@keyframes ux-spin { to { transform: rotate(360deg); } }

/* Form alerts com fade-in (formoid controla hidden/visible) */
[data-form-alert]:not([hidden]),
[data-form-alert-danger]:not([hidden]) {
  animation: ux-fade-up-sm 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Label com cor accent quando campo ativo (JS adiciona .field-active no .uf-field) */
.uf-field.field-active label    { color: var(--ux-accent); transition: color 0.2s; }
.uf-field input:focus,
.uf-field textarea:focus        { background-color: rgba(255,153,102,0.04); }

/* ── Logo marquee (mobile) ───────────────────────────────────────────────── */
.logo-marquee-wrap { overflow: hidden; }
.logo-marquee-track {
  display: flex !important;
  gap: 1rem;
  width: max-content;
  animation: ux-marquee 40s linear infinite;
}
.logo-marquee-track.paused { animation-play-state: paused; }
@keyframes ux-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ── Prefers-reduced-motion ──────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  body { animation: none !important; }
  .hero-animate,
  .reveal-item {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .logo-marquee-track { animation: none !important; }
  #scroll-progress { display: none; }
}