@import url('tokens/colors.css');
@import url('tokens/typography.css');
@import url('tokens/spacing.css');

/* Animated gradient motion — replaces the static brand pattern on inner pages. */
.motion-gradient-bg { position: absolute; overflow: hidden; pointer-events: none; }
.motion-gradient-bg::before,
.motion-gradient-bg::after {
  content: "";
  position: absolute;
  width: 55%;
  padding-bottom: 55%;
  border-radius: 50%;
  filter: blur(70px);
  will-change: transform;
}
.motion-gradient-bg::before {
  top: -12%;
  left: -8%;
  background: radial-gradient(circle, var(--color-teal), transparent 70%);
  animation: motion-gradient-drift-a 24s ease-in-out infinite alternate;
}
.motion-gradient-bg::after {
  bottom: -14%;
  right: -8%;
  background: radial-gradient(circle, var(--color-terracotta), transparent 70%);
  animation: motion-gradient-drift-b 19s ease-in-out infinite alternate;
}
@keyframes motion-gradient-drift-a {
  0%   { transform: translate(0%, 0%) scale(1); }
  50%  { transform: translate(8%, 10%) scale(1.12); }
  100% { transform: translate(-5%, 4%) scale(0.94); }
}
@keyframes motion-gradient-drift-b {
  0%   { transform: translate(0%, 0%) scale(1); }
  50%  { transform: translate(-9%, -8%) scale(1.1); }
  100% { transform: translate(4%, -5%) scale(0.92); }
}
@media (prefers-reduced-motion: reduce) {
  .motion-gradient-bg::before,
  .motion-gradient-bg::after { animation: none; }
}

/* Stat counters — small pop as the count-up finishes. */
@keyframes stat-pop {
  0%   { transform: scale(.88); }
  55%  { transform: scale(1.06); }
  100% { transform: scale(1); }
}
.stat-pop { display: inline-block; animation: stat-pop 460ms cubic-bezier(.34,1.56,.64,1) both; }
@media (prefers-reduced-motion: reduce) {
  .stat-pop { animation: none; }
}

/* Informational cards arranged in grids — lift, a cursor-tracking spotlight
   and an accent glow on hover/focus; sibling cards dim to keep focus on it. */
.card-interactive {
  position: relative;
  isolation: isolate;
  transition: transform 320ms cubic-bezier(.16,.84,.28,1), box-shadow 320ms cubic-bezier(.16,.84,.28,1), opacity 300ms ease-in-out, filter 300ms ease-in-out;
}
.card-interactive::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--accent-primary) 20%, transparent), transparent 65%);
  opacity: 0;
  transition: opacity 300ms ease-out;
  pointer-events: none;
}
.card-interactive:hover,
.card-interactive:focus-within {
  transform: translateY(-6px) !important;
  box-shadow: 0 24px 48px -20px rgba(0,0,0,.28), 0 0 0 1.5px var(--accent-primary), 0 0 26px -4px var(--accent-primary);
}
.card-interactive:hover::before,
.card-interactive:focus-within::before {
  opacity: 1;
}
:has(> .card-interactive:hover) > .card-interactive:not(:hover),
:has(> .card-interactive:focus-within) > .card-interactive:not(:focus-within) {
  opacity: .5 !important;
  filter: brightness(.8);
}
.card-cta {
  opacity: 0;
  transform: translateY(15px);
  transition: opacity 300ms cubic-bezier(.4,0,.2,1), transform 300ms cubic-bezier(.4,0,.2,1);
}
.card-interactive:hover .card-cta,
.card-interactive:focus-within .card-cta {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .card-interactive,
  .card-interactive::before,
  .card-cta { transition: none; }
  .card-interactive:hover,
  .card-interactive:focus-within { transform: none !important; box-shadow: none; }
}

/* Fade transition between pages (Home <-> Método, Cases, etc). Native
   cross-document View Transitions; browsers without support just navigate
   normally, no fallback needed. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: page-fade-out 200ms ease both; }
::view-transition-new(root) { animation: page-fade-in 280ms ease both; }
@keyframes page-fade-out { to { opacity: 0; } }
@keyframes page-fade-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none; }
}

/* Header collapses to just the menu icon once scrolled. Hover the header
   (or tap the icon, for touch) to reveal it again. */
.header-collapsible {
  transition: opacity 260ms ease, transform 260ms ease;
}
[data-header].nav-collapsed .header-collapsible {
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
}
[data-header].nav-collapsed:hover .header-collapsible,
[data-header].nav-force-open .header-collapsible {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.nav-toggle-icon {
  appearance: none;
  background: none;
  border: 0;
  padding: 8px;
  margin: -8px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 26px;
  flex-shrink: 0;
}
.nav-toggle-icon span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--color-nude);
  border-radius: 1px;
}
@media (prefers-reduced-motion: reduce) {
  .header-collapsible { transition: none; }
}