/* ==========================================================
   MICROINTERACTIONS — CARDS
========================================================== */

.vt-card,
.search-result-card,
.event-list-card,
.news-card,
.bando-card,
.service-card,
.equipment-card,
.corporation-card {
  transition:
    transform .22s ease,
    box-shadow .22s ease,
    border-color .22s ease,
    background-color .22s ease;
}

.vt-card:hover,
.search-result-card:hover,
.event-list-card:hover,
.news-card:hover,
.bando-card:hover,
.service-card:hover,
.equipment-card:hover,
.corporation-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.vt-card__media img,
.event-list-card__media img,
.news-card__media img,
.service-card__media img,
.equipment-card__media img {
  transition: transform .45s ease;
}

.vt-card:hover .vt-card__media img,
.event-list-card:hover .event-list-card__media img,
.news-card:hover .news-card__media img,
.service-card:hover .service-card__media img,
.equipment-card:hover .equipment-card__media img {
  transform: scale(1.035);
}

/* ==========================================================
   MICROINTERACTIONS — ARROWS
========================================================== */

.vt-card__more i,
.vt-card__arrow i,
.search-result-card__arrow i,
.event-list-card__arrow i,
.vt-button i {
  transition: transform .2s ease;
}

.vt-card:hover .vt-card__more i,
.vt-card:hover .vt-card__arrow i,
.search-result-card:hover .search-result-card__arrow i,
.event-list-card:hover /*.event-list-card__arrow i*/,
.vt-button:hover i {
  transform: translateX(4px);
}


/* ==========================================================
   MICROINTERACTIONS — BUTTONS
========================================================== */

.vt-button,
.citizen-button,
.site-search-toggle,
.mobile-menu-toggle,
.site-search-form button {
  transition:
    transform .18s ease,
    background-color .18s ease,
    color .18s ease,
    border-color .18s ease,
    box-shadow .18s ease;
}

.vt-button:hover,
.citizen-button:hover,
.site-search-form button:hover {
  transform: translateY(-2px);
}

.site-search-toggle:hover,
.mobile-menu-toggle:hover {
  background: var(--color-primary-soft);
  border-color: rgba(17, 53, 85, .22);
}

.duty-pharmacy-card__button::after {
  transition: transform .2s ease;
}

.duty-pharmacy-card__button:hover::after,
.duty-pharmacy-card__button:focus-visible::after {
  transform: translateX(4px);
}

/* ==========================================================
   MICROINTERACTIONS — EXTERNAL LINKS
========================================================== */

.fa-arrow-up-right-from-square {
  transition: transform .2s ease;
}

a:hover .fa-arrow-up-right-from-square,
a:focus-visible .fa-arrow-up-right-from-square {
  transform: translate(2px, -2px);
}

/* ==========================================================
   MICROINTERACTIONS — MAIN MENU
========================================================== */

.main-menu > .menu > .menu-item > a::before {
  transition:
    opacity .2s ease,
    transform .22s ease;
  transform: scaleX(.35);
  transform-origin: left center;
}

.main-menu > .menu > .menu-item:hover > a::before,
.main-menu > .menu > .menu-item:focus-within > a::before,
.main-menu > .menu > .menu-item.menu-item--active-trail > a::before,
.main-menu > .menu > .menu-item > a.is-active::before {
  transform: scaleX(1);
}

/* ==========================================================
   MICROINTERACTIONS — SECTION LINKS
========================================================== */

.vt-section-heading__link i {
  transition: transform .2s ease;
}

.vt-section-heading__link:hover i,
.vt-section-heading__link:focus-visible i {
  transform: translateX(4px);
}

/* ==========================================================
   MICROINTERACTIONS — SEARCH
========================================================== */

.site-search-panel.is-open {
  animation: vtPanelIn .22s ease both;
}

.site-search-form input {
  transition:
    border-color .2s ease,
    box-shadow .2s ease,
    background-color .2s ease;
}

.site-search-form input:focus {
  border-color: rgba(17, 53, 85, .45);
  box-shadow: 0 0 0 4px rgba(17, 53, 85, .08);
}

@keyframes vtPanelIn {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==========================================================
   MICROINTERACTIONS — MOBILE MENU
========================================================== */

@media (max-width: 900px) {
  .mobile-menu.is-open {
    animation: vtMobileMenuIn .22s ease both;
  }

  .mobile-menu a,
  .mobile-menu span {
    transition:
      background-color .18s ease,
      color .18s ease,
      padding-left .18s ease;
  }

  .mobile-menu a:hover,
  .mobile-menu span:hover {
    padding-left: 1.85rem;
    background: var(--color-primary-soft);
  }
}

@keyframes vtMobileMenuIn {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==========================================================
   REDUCED MOTION
========================================================== */

@media (prefers-reduced-motion: reduce) {
  .vt-card,
  .search-result-card,
  .event-list-card,
  .news-card,
  .bando-card,
  .service-card,
  .equipment-card,
  .corporation-card,
  .vt-card__media img,
  .event-list-card__media img,
  .news-card__media img,
  .service-card__media img,
  .equipment-card__media img,
  .vt-card__more i,
  .vt-card__arrow i,
  .search-result-card__arrow i,
  .event-list-card__arrow i,
  .vt-button,
  .citizen-button,
  .site-search-toggle,
  .mobile-menu-toggle,
  .site-search-form button {
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }
}