/* ============================================================================
   ZALIO — Brand component primitives
   Buttons, cards, glass, dividers, animations. Structure unchanged; only the
   brand COLOUR values were swapped to Zalio Orange (#FF5A1F) + warm ink.
   Pair with colors_and_type.css.
   ============================================================================ */

/* ─── Buttons ────────────────────────────────────────────────────────────── */
.btn-primary {
  display: inline-flex; align-items: center; gap: 0.5rem; white-space: nowrap;
  background: linear-gradient(135deg, #FF5A1F 0%, #E64200 100%);
  color: #fff; font-weight: 700; font-size: 0.9375rem;
  padding: 0.75rem 1.5rem; border-radius: 0.625rem; border: none; cursor: pointer;
  transition: all 0.18s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.15);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 4px 24px rgba(255,90,31,0.35), 0 1px 3px rgba(0,0,0,0.1); }
.btn-primary:active { transform: translateY(0); }

.btn-dark {
  display: inline-flex; align-items: center; gap: 0.5rem; white-space: nowrap;
  background: var(--fg); color: #fff; font-weight: 700; font-size: 0.9375rem;
  padding: 0.75rem 1.5rem; border-radius: 0.625rem; border: none; cursor: pointer;
  transition: all 0.18s ease; box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.btn-dark:hover { transform: translateY(-1px); box-shadow: 0 4px 20px rgba(0,0,0,0.2); }

/* Navbar CTA variant — solid ink, smaller */
.btn-nav {
  display: inline-flex; align-items: center; gap: 0.5rem; white-space: nowrap;
  background: #1A1410; color: #fff; font-weight: 500; font-size: 0.875rem;
  padding: 0.5rem 1rem; border-radius: 0.5rem; border: none; cursor: pointer;
  transition: all 0.18s ease;
}
.btn-nav:hover { background: rgba(0,0,0,0.8); box-shadow: 0 4px 12px rgba(0,0,0,0.12); }

.btn-secondary {
  display: inline-flex; align-items: center; gap: 0.5rem; white-space: nowrap;
  background: rgba(0,0,0,0.04); color: var(--fg); font-weight: 600; font-size: 0.9375rem;
  padding: 0.75rem 1.25rem; border-radius: 0.625rem; border: 1px solid var(--border); cursor: pointer;
  transition: all 0.18s ease;
}
.btn-secondary:hover { background: rgba(0,0,0,0.06); }

.btn-ghost {
  display: inline-flex; align-items: center; gap: 0.5rem;
  color: var(--fg-muted); font-weight: 600; font-size: 0.9375rem;
  padding: 0.75rem 1rem; border-radius: 0.625rem; border: none; background: none; cursor: pointer;
  transition: color 0.15s ease;
}
.btn-ghost:hover { color: var(--fg); }

/* ─── Cards & surfaces ───────────────────────────────────────────────────── */
.card {
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: 1rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 4px 16px rgba(0,0,0,0.03);
}
.glass-light {
  background: rgba(255,255,255,0.8);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(0,0,0,0.06);
}
.glass-dark {
  background: rgba(255,255,255,0.05);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.07);
}

/* ─── Badges / pills ─────────────────────────────────────────────────────── */
.badge-accent {
  display: inline-block; font-size: 0.75rem; font-weight: 600; white-space: nowrap;
  padding: 0.25rem 0.625rem; border-radius: 9999px;
  background: rgba(255,90,31,0.12); color: #FF5A1F;
}
.eyebrow-badge {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: rgba(255,255,255,0.8); border: 1px solid rgba(0,0,0,0.07);
  border-radius: 9999px; padding: 0.375rem 0.875rem; box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  font-size: 0.75rem; font-weight: 500; color: rgba(0,0,0,0.5);
}

/* ─── Dividers ───────────────────────────────────────────────────────────── */
.divider { height: 1px; background: linear-gradient(90deg, transparent, var(--border) 25%, var(--border) 75%, transparent); }
.divider-glow { height: 1px; background: linear-gradient(90deg, transparent, rgba(255,90,31,0.3) 30%, rgba(255,90,31,0.3) 70%, transparent); }

/* ─── Animated gradient border ───────────────────────────────────────────── */
.gradient-border { position: relative; background: var(--bg-white); border-radius: 1rem; }
.gradient-border::before {
  content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px;
  background: linear-gradient(90deg, rgba(255,90,31,0.4), rgba(255,122,69,0.2), rgba(230,66,0,0.4), rgba(255,90,31,0.4));
  background-size: 200% 100%; animation: border-flow 4s linear infinite;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
}

/* ─── Animations ─────────────────────────────────────────────────────────── */
@keyframes fade-up   { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fade-in   { from { opacity: 0; } to { opacity: 1; } }
@keyframes float     { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes pulse-soft{ 0%,100% { opacity: 0.6; transform: scale(1); } 50% { opacity: 1; transform: scale(1.15); } }
@keyframes typing-dot{ 0%,80%,100% { transform: scale(0.55); opacity: 0.35; } 40% { transform: scale(1); opacity: 1; } }
@keyframes border-flow { 0% { background-position: 0% 0%; } 100% { background-position: 200% 0%; } }
@keyframes scroll-logos { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

.animate-float      { animation: float 4s ease-in-out infinite; }
.animate-pulse-soft { animation: pulse-soft 2.5s ease-in-out infinite; }
.animate-fade-up    { animation: fade-up 0.6s ease forwards; }

/* Scroll reveal — signature easing */
.reveal { opacity: 0; transform: translateY(24px);
  transition: opacity 0.65s cubic-bezier(0.22,1,0.36,1), transform 0.65s cubic-bezier(0.22,1,0.36,1); }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }