/*
 * motion.css: native motion only (CSS animations, scroll-driven animations, View Transitions).
 * Allowed properties: transform and opacity. Every rule below is disabled under
 * prefers-reduced-motion, and none of them is needed to read the page:
 * the reveal lives inside @supports, so a browser without scroll timelines just shows the content.
 */

@keyframes md-rise {
  from {
    opacity: 0;
    transform: translateY(var(--md-space-4));
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes md-reveal {
  from {
    opacity: 0;
    transform: translateY(var(--md-space-5));
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* A bar slides out of its clipping track: its rounded leading end arrives first, so it reads as drawn. */
@keyframes md-draw-x {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: none;
  }
}

@keyframes md-draw-y {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: none;
  }
}

@keyframes md-vt-out {
  to {
    opacity: 0;
  }
}

@keyframes md-vt-in {
  from {
    opacity: 0;
    transform: translateY(var(--md-space-2));
  }
}

@media (prefers-reduced-motion: no-preference) {
  /* Entrance on load, for the hero parts. Stagger by position (no inline styles needed).
     Keep the h1 / LCP element OUT of a .m-stagger group: it starts transparent, which delays the largest
     contentful paint. Stagger the lede, actions and secondary parts only. */
  .m-rise {
    animation: md-rise var(--md-duration-slow) var(--md-ease-out) both;
  }

  .m-stagger > * {
    animation: md-rise var(--md-duration-slow) var(--md-ease-out) both;
  }

  .m-stagger > :nth-child(2) {
    animation-delay: var(--md-stagger);
  }
  .m-stagger > :nth-child(3) {
    animation-delay: calc(var(--md-stagger) * 2);
  }
  .m-stagger > :nth-child(4) {
    animation-delay: calc(var(--md-stagger) * 3);
  }
  .m-stagger > :nth-child(5) {
    animation-delay: calc(var(--md-stagger) * 4);
  }
  .m-stagger > :nth-child(n + 6) {
    animation-delay: calc(var(--md-stagger) * 5);
  }

  /* Cross-document View Transition: a short fade with a small rise. */
  ::view-transition-old(root) {
    animation: md-vt-out var(--md-duration-fast) var(--md-ease-out) both;
  }

  ::view-transition-new(root) {
    animation: md-vt-in var(--md-duration-base) var(--md-ease-out) both;
  }
}

/* Scroll-driven effects. Only in browsers that support view timelines, and only without reduced motion. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* Reveal: the element rises and fades in while it enters the viewport. */
    .m-reveal {
      animation: md-reveal linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 40%;
    }

    /* Same, for the children of a group, each starting a little later. */
    .m-reveal-group > * {
      animation: md-reveal linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 40%;
    }
    .m-reveal-group > :nth-child(2) {
      animation-range: entry 6% entry 46%;
    }
    .m-reveal-group > :nth-child(3) {
      animation-range: entry 12% entry 52%;
    }
    .m-reveal-group > :nth-child(n + 4) {
      animation-range: entry 18% entry 58%;
    }

    /* Draw-in of a trazo line (see trazos.css): the bar slides out of its clipping track while the track
       enters. The timeline belongs to the track, which never moves, so the effect is stable. */
    .m-draw {
      view-timeline: --md-draw block;
    }

    .m-draw .c-trazo-line__bar {
      animation: md-draw-x linear both;
      animation-timeline: --md-draw;
      animation-range: entry 10% entry 90%;
    }

    .m-draw.c-trazo-line--vertical .c-trazo-line__bar {
      animation-name: md-draw-y;
    }
  }
}

/* View Transition names. They keep persistent chrome still while the page content cross-fades. */
.vt-header {
  view-transition-name: site-header;
}

.vt-bottom-bar {
  view-transition-name: bottom-bar;
}

/* Gives every element its own automatic name (Chrome 126+), e.g. each listing card, so a card can
   morph into the ficha header without per-element inline styles. Ignored elsewhere. */
.vt-match {
  view-transition-name: match-element;
  view-transition-class: card;
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}