/* animations.css — modern motion for Wipbot landing */

/* Reveal on scroll — start hidden, enter via IntersectionObserver toggling .reveal-in */
[data-anim] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);
  will-change: opacity, transform;
}
[data-anim="left"]  { transform: translateX(-28px); }
[data-anim="right"] { transform: translateX(28px); }
[data-anim="scale"] { transform: scale(.94); }
[data-anim].reveal-in { opacity: 1; transform: none; }

/* Stagger via inline --i index */
[data-anim] { transition-delay: calc(var(--i, 0) * 80ms); }

/* Hover lifts on cards & program rows */
[data-program-row], article[data-card], [data-cta-card] {
  transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease;
}
[data-program-row]:hover, article[data-card]:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 48px rgba(14, 59, 71, .12);
}

/* Buttons — subtle press + hover */
a[href*="matricula"], a[href="#matricula"], button {
  transition: transform .2s ease, background-color .25s ease, box-shadow .25s ease, color .25s ease, border-color .25s ease;
}
a[href*="matricula"]:hover, a[href="#matricula"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(14, 59, 71, .18);
}
a[href*="matricula"]:active, a[href="#matricula"]:active { transform: translateY(0); }

/* Nav link underline grow */
header nav a {
  transition: color .2s ease;
  position: relative;
}
header nav a:not([href*="matricula"]):not([data-nav-pill])::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 2px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform .35s cubic-bezier(.2,.7,.2,1);
}
header nav a:not([href*="matricula"]):not([data-nav-pill]):hover::after { transform: scaleX(1); }

/* FAQ chevron rotate already inline; smooth its bg */
[data-faq-side] + div button { transition: color .2s ease; }

/* Hero collage parallax-ish breath */
@keyframes float-a { 0%,100% { transform: rotate(-3deg) translateY(0); } 50% { transform: rotate(-3deg) translateY(-8px); } }
@keyframes float-b { 0%,100% { transform: rotate(4deg) translateY(0); } 50% { transform: rotate(4deg) translateY(8px); } }
@keyframes float-c { 0%,100% { transform: rotate(3deg) translateY(0); } 50% { transform: rotate(3deg) translateY(-6px); } }
@keyframes float-d { 0%,100% { transform: rotate(-5deg) translateY(0); } 50% { transform: rotate(-5deg) translateY(6px); } }
[data-collage-primary]   { animation: float-a 7s ease-in-out infinite; }
[data-collage-secondary] { animation: float-b 8s ease-in-out infinite; }
[data-collage-stat]      { animation: float-c 6s ease-in-out infinite; }
[data-collage-chip]      { animation: float-d 9s ease-in-out infinite; }

/* Pulsing dot on hero badge */
@keyframes pulse-ring {
  0%   { box-shadow: 0 0 0 0 currentColor; opacity: .9; }
  70%  { box-shadow: 0 0 0 10px transparent; opacity: 0; }
  100% { box-shadow: 0 0 0 0 transparent; opacity: 0; }
}

/* Hero squiggle draws in */
@keyframes draw-squiggle { from { stroke-dashoffset: 600; } to { stroke-dashoffset: 0; } }
section svg path[stroke] { stroke-dasharray: 600; stroke-dashoffset: 600; animation: draw-squiggle 1.6s .6s cubic-bezier(.4,0,.2,1) forwards; }

/* Stat counter slow reveal */
@keyframes count-fade { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
[data-stats-grid] > div { animation: count-fade .7s ease-out both; }
[data-stats-grid] > div:nth-child(1) { animation-delay: .05s; }
[data-stats-grid] > div:nth-child(2) { animation-delay: .15s; }
[data-stats-grid] > div:nth-child(3) { animation-delay: .25s; }
[data-stats-grid] > div:nth-child(4) { animation-delay: .35s; }

/* Ribbon CTA arrow nudge */
@keyframes nudge { 0%,100% { transform: translateX(0); } 50% { transform: translateX(4px); } }
[data-ribbon] a { display: inline-block; }
[data-ribbon] a:hover { animation: nudge .8s ease-in-out infinite; }

/* Logo subtle shake on hover */
header a:has(img):hover img { animation: tilt .6s ease-in-out; }
@keyframes tilt { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-2deg); } 75% { transform: rotate(2deg); } }

/* Reduce motion respect */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  [data-anim] { opacity: 1; transform: none; }
}