/* Provopar Londrina — Unity Heart Design System
   Custom layer on top of Tailwind (Play CDN). Tokens mirror DESIGN.md. */

:root {
  --primary: #9e0012;
  --primary-container: #c41e24;
  --secondary: #3c6a00;
  --tertiary: #005914;
  --on-surface: #191c1b;
  --outline: #906f6c;
}

* {
  -webkit-tap-highlight-color: transparent;
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  background-color: #f8faf8;
  color: var(--on-surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4,
.font-display {
  font-family: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
}

::selection {
  background-color: #ffd9d6;
  color: #410003;
}

/* Focus visibility */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}
::-webkit-scrollbar-track {
  background: #f2f4f2;
}
::-webkit-scrollbar-thumb {
  background: #d8dad9;
  border-radius: 9999px;
  border: 3px solid #f2f4f2;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--outline);
}
html {
  scrollbar-color: #d8dad9 #f2f4f2;
  scrollbar-width: thin;
}

/* Tabular numerals for animated counters */
.tabular-nums {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* ---------- Floating navbar ---------- */
#site-nav {
  transition: padding 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, top 0.35s ease;
}
#site-nav.is-scrolled {
  box-shadow: 0px 8px 30px rgba(25, 28, 27, 0.1);
}

#mobile-menu {
  transition: opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1), transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.28s;
  transform: translateY(-8px) scale(0.98);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
#mobile-menu.is-open {
  transform: translateY(0) scale(1);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* ---------- Scroll reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Depth & texture ---------- */
.grain {
  position: absolute;
  inset: 0;
  opacity: 0.05;
  mix-blend-mode: multiply;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.dot-grid {
  background-image: radial-gradient(rgba(144, 111, 108, 0.35) 1.4px, transparent 1.4px);
  background-size: 28px 28px;
}

[data-parallax] {
  will-change: transform;
}

@keyframes float-slow {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-18px) rotate(3deg); }
}
@keyframes float-slower {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(16px) rotate(-2deg); }
}
.animate-float-slow {
  animation: float-slow 9s ease-in-out infinite;
}
.animate-float-slower {
  animation: float-slower 12s ease-in-out infinite;
}

/* Section divider (angled soft edge for layered depth) */
.divider-edge {
  position: absolute;
  left: 0;
  right: 0;
  height: 72px;
  pointer-events: none;
}
.divider-edge svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* ---------- Cards ---------- */
.card-elevate {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease;
}
.card-elevate:hover {
  transform: translateY(-6px);
  box-shadow: 0px 20px 45px rgba(25, 28, 27, 0.1);
}

/* ---------- Buttons ---------- */
.btn-press:active {
  transform: scale(0.97);
}

/* ---------- Pix copy button state ---------- */
.copy-flash {
  animation: copy-flash 0.5s ease;
}
@keyframes copy-flash {
  0% { transform: scale(1); }
  40% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

/* ---------- Badge pulse ---------- */
.pulse-dot::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  background: currentColor;
  animation: pulse-ring 2.2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes pulse-ring {
  0% { transform: scale(1); opacity: 0.6; }
  75%, 100% { transform: scale(2.4); opacity: 0; }
}

/* Back to top button */
#back-to-top {
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
  opacity: 0;
  transform: translateY(12px);
  visibility: hidden;
}
#back-to-top.is-visible {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
}

/* Bento grid card image-free texture panel */
.panel-texture {
  background-image: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.35), transparent 55%);
}