/*
 * Instituto Vértice — progressive visual polish.
 * Integration: load this stylesheet AFTER the exported Next stylesheet and
 * load vertice-motion.js with defer on public pages. Original bundles stay intact.
 * Public opt-ins: vm-card, vm-button, vm-reveal, vm-hero-image.
 * Add data-vm-static to a subtree that should never receive reveal animations.
 * This layer preserves the existing Quicksand/Manrope fonts and brand palette.
 */
:root {
  --vm-ease: cubic-bezier(.2, .75, .25, 1);
  --vm-focus: var(--color-leaf-600, #338526);
}

/* Safe without JavaScript: finite decorative motion and accessible focus. */
.animate-floaty {
  animation-duration: 4.4s;
  animation-iteration-count: 1;
  animation-fill-mode: none;
}

:where(main, header, footer) :where(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--vm-focus);
  outline-offset: 5px;
}
:where(main, header, footer) :where(a, button, input, select, textarea, summary) {
  -webkit-tap-highlight-color: rgba(89, 195, 71, .16);
}
:where(main) :where(h1, h2, h3) { text-wrap: balance; }
:where(main) :where([id]) { scroll-margin-top: 7rem; }

html.vm-enhanced .vm-header {
  transition: box-shadow 220ms ease, background-color 220ms ease;
}
html.vm-enhanced .vm-header.vm-scrolled {
  box-shadow: 0 8px 32px rgba(16, 30, 44, .13);
}
html.vm-enhanced .vm-card {
  transition: translate 220ms var(--vm-ease), box-shadow 220ms ease, border-color 220ms ease;
}
html.vm-enhanced .vm-button {
  transition: translate 180ms var(--vm-ease), box-shadow 180ms ease,
    background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}
html.vm-enhanced .vm-card:focus-within {
  box-shadow: 0 8px 30px rgba(16, 30, 44, .12);
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  html.vm-enhanced .vm-card:hover {
    translate: 0 -4px;
    box-shadow: 0 14px 36px rgba(16, 30, 44, .12);
  }
  html.vm-enhanced .vm-button:hover {
    translate: 0 -2px;
    box-shadow: 0 5px 16px rgba(16, 30, 44, .1);
  }
  html.vm-enhanced .vm-button:active { translate: 0 0; }
}

/* No hiding classes: every item stays readable if script or animation fails. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  .animate-floaty, .animate-rise, .animate-rise-late {
    animation: none !important;
    opacity: 1 !important;
  }
  html.vm-enhanced :where(.vm-card, .vm-button, .vm-header, .vm-reveal, .vm-hero-image) {
    animation: none !important;
    transition: none !important;
    translate: none !important;
  }
  html.vm-enhanced main :where([class*="transition-transform"], [class*="transition-all"]) {
    transition: none !important;
  }
}

@media print {
  .animate-floaty, .animate-rise, .animate-rise-late { animation: none !important; }
  html.vm-enhanced :where(.vm-card, .vm-button, .vm-header, .vm-reveal, .vm-hero-image) {
    animation: none !important;
    transition: none !important;
    box-shadow: none !important;
  }
}