/* Motion system Bmedical: editorial, calm and purposeful. */

@keyframes bmedical-hero-arrive {
  from {
    opacity: 0;
    transform: translateY(18px);
    filter: blur(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

@keyframes bmedical-menu-arrive {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: no-preference) {
  html.motion-ready #hero h1,
  html.motion-ready #hero p,
  html.motion-ready #hero .btn-cta-green,
  html.motion-ready #hero .btn-cta-secondary,
  html.motion-ready #hero > div > div > div:last-child {
    animation: bmedical-hero-arrive 700ms cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  html.motion-ready #hero p {
    animation-delay: 90ms;
  }

  html.motion-ready #hero .btn-cta-green {
    animation-delay: 160ms;
  }

  html.motion-ready #hero .btn-cta-secondary {
    animation-delay: 220ms;
  }

  html.motion-ready #hero > div > div > div:last-child {
    animation-delay: 120ms;
  }

  html.motion-ready .js-reveal .reveal {
    filter: blur(3px);
    transition: opacity 600ms cubic-bezier(0.16, 1, 0.3, 1),
                transform 600ms cubic-bezier(0.16, 1, 0.3, 1),
                filter 600ms cubic-bezier(0.16, 1, 0.3, 1);
  }

  html.motion-ready .js-reveal .reveal.active {
    filter: blur(0);
  }

  .btn-cta-green,
  .btn-cta-secondary,
  .desktop-nav-link,
  .footer-nav-link,
  .mobile-nav-link,
  header button {
    transition-property: color, background-color, border-color, box-shadow, transform;
    transition-duration: 220ms;
    transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  }

  .btn-cta-green:hover,
  .btn-cta-secondary:hover {
    transform: translateY(-2px);
  }

  .btn-cta-green:active,
  .btn-cta-secondary:active {
    transform: translateY(0) scale(0.985);
  }

  .desktop-nav-link,
  .footer-nav-link,
  .mobile-nav-link {
    position: relative;
  }

  .desktop-nav-link::after,
  .footer-nav-link::after,
  .mobile-nav-link::after {
    position: absolute;
    right: 0.5rem;
    bottom: 0.25rem;
    left: 0.5rem;
    height: 2px;
    border-radius: 999px;
    background: var(--clinic, #4F9AA1);
    content: "";
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
  }

  .desktop-nav-link:hover::after,
  .desktop-nav-link[aria-current="page"]::after,
  .footer-nav-link:hover::after,
  .footer-nav-link[aria-current="page"]::after,
  .mobile-nav-link:hover::after,
  .mobile-nav-link[aria-current="page"]::after {
    transform: scaleX(1);
    transform-origin: left;
  }

  main section .rounded-2xl.border,
  main section .rounded-3xl.border {
    transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 280ms cubic-bezier(0.16, 1, 0.3, 1),
                border-color 220ms ease;
  }

  main section .rounded-2xl.border:hover,
  main section .rounded-3xl.border:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 34px rgba(24, 53, 56, 0.09);
  }

  main img:not([alt*="Logótipo"]):not([alt*="logo"]) {
    transition: transform 700ms cubic-bezier(0.16, 1, 0.3, 1), filter 700ms ease;
  }

  main img:not([alt*="Logótipo"]):not([alt*="logo"]):hover {
    transform: scale(1.025);
    filter: saturate(1.04);
  }

  #mobile-menu:not(.hidden) {
    animation: bmedical-menu-arrive 260ms cubic-bezier(0.16, 1, 0.3, 1) both;
  }
}

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

  html.motion-ready #hero h1,
  html.motion-ready #hero p,
  html.motion-ready #hero .btn-cta-green,
  html.motion-ready #hero .btn-cta-secondary,
  html.motion-ready #hero > div > div > div:last-child,
  html.motion-ready .js-reveal .reveal {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
  }
}