/*
 * Mernda Central motion layer.
 * Scroll reveals, hover and focus microinteractions. Everything is disabled
 * when the visitor prefers reduced motion.
 */

:root {
  --mc-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --mc-dur: 0.7s;
}

/* ---------- Scroll reveal ---------- */
.js-motion .mc-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--mc-dur) var(--mc-ease), transform var(--mc-dur) var(--mc-ease);
  transition-delay: var(--mc-delay, 0s);
  will-change: opacity, transform;
}
.js-motion .mc-reveal.is-inview {
  opacity: 1;
  transform: none;
}
.js-motion .splide__slide.mc-reveal { will-change: auto; }
/* Splide clones are created after the observer runs; never hide them */
.js-motion .splide__slide--clone.mc-reveal { opacity: 1; transform: none; transition: none; }

/* ---------- Hero entrance ---------- */
.js-motion .hero__media {
  animation: mc-hero-zoom 2.4s var(--mc-ease) both;
}
.js-motion .hero__title,
.js-motion .hero__bar,
.js-motion .page-hero__title,
.js-motion .tenant-hero__content {
  animation: mc-rise 0.9s var(--mc-ease) both;
}
.js-motion .hero__bar { animation-delay: 0.25s; }
.js-motion .site-header__inner {
  animation: mc-fade 0.8s ease 0.35s both;
}
@keyframes mc-hero-zoom {
  from { transform: scale(1.06); }
  to   { transform: scale(1); }
}
@keyframes mc-rise {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: none; }
}
@keyframes mc-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ---------- Buttons ---------- */
.btn {
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s var(--mc-ease), box-shadow 0.3s ease;
}
.btn svg {
  transition: transform 0.35s var(--mc-ease);
}
.btn:hover svg,
.btn:focus-visible svg {
  transform: translateX(6px);
}
.btn--solid:hover,
.btn--light:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -12px rgba(18, 18, 18, 0.45);
}
.btn--solid:active,
.btn--light:active { transform: translateY(0); box-shadow: none; }
.btn--ghost {
  position: relative;
}
.btn--ghost::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  height: 1px;
  width: 100%;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--mc-ease);
}
.btn--ghost:hover::after { transform: scaleX(1); }

/* ---------- Navigation ---------- */
#brx-header .bricks-nav-menu > li > a {
  position: relative;
  transition: opacity 0.3s ease;
}
#brx-header .bricks-nav-menu > li > a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.35s var(--mc-ease);
}
#brx-header .bricks-nav-menu > li > a:hover::after,
#brx-header .bricks-nav-menu > li.current-menu-item > a::after {
  transform: scaleX(1);
  transform-origin: left;
}
#brx-header .bricks-nav-menu > li.current-menu-item > a { text-decoration: none; }
.site-header__logo-image { transition: transform 0.4s var(--mc-ease); }
.site-header__logo:hover .site-header__logo-image { transform: translateY(-2px); }

/* ---------- Cards and tiles ---------- */
.tenant-tile__image,
.tenant-card__image,
.reason-card__image,
.about__image,
.tenant-info__gallery-image {
  transition: transform 0.7s var(--mc-ease), filter 0.5s ease;
}
.tenant-tile:hover .tenant-tile__image,
.tenant-card:hover .tenant-card__image--photo,
.reason-card:hover .reason-card__image {
  transform: scale(1.035);
}
.tenant-tile,
.tenant-card,
.reason-card { overflow: hidden; }
.tenant-tile__title,
.tenant-card__title { transition: color 0.3s ease; }
.tenant-tile:hover .tenant-tile__title,
.tenant-card:hover .tenant-card__title { color: var(--brand); }
.tenant-card {
  transition: box-shadow 0.4s ease, transform 0.4s var(--mc-ease);
}
.tenant-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 40px -28px rgba(18, 18, 18, 0.5);
}
.tenant-card__logo { transition: transform 0.4s var(--mc-ease); }
.tenant-card:hover .tenant-card__logo { transform: scale(1.06); }

/* ---------- Brands grid ---------- */
.brands__cell {
  position: relative;
  transition: background-color 0.3s ease;
}
.brands__logo {
  transition: transform 0.4s var(--mc-ease), opacity 0.3s ease;
}
.brands__cell:hover { background-color: rgba(142, 96, 155, 0.06); }
.brands__cell:hover .brands__logo { transform: scale(1.06); }

/* ---------- Slider arrows ---------- */
.directory-preview__controls .splide__arrow,
.directory-preview__controls button {
  transition: background-color 0.3s ease, color 0.3s ease;
}
.directory-preview__controls .splide__arrow:hover,
.directory-preview__controls button:hover {
  background-color: var(--brand);
  color: var(--surface);
}
.directory-preview__controls .splide__arrow svg { transition: transform 0.3s var(--mc-ease); }
.directory-preview__controls .splide__arrow--prev:hover svg { transform: translateX(-3px); }
.directory-preview__controls .splide__arrow--next:hover svg { transform: translateX(3px); }

/* ---------- Find Us ---------- */
.find-us__item::before {
  content: "";
  display: block;
  height: 1px;
  width: 0;
  background: var(--surface);
  transition: width 0.6s var(--mc-ease);
  margin-top: -13px;
  margin-bottom: 12px;
}
.find-us__item.is-inview::before { width: 100%; }
.find-us__map-embed iframe { transition: filter 0.6s ease; }
.find-us__map:hover .find-us__map-embed iframe { filter: grayscale(0) contrast(1); }

/* ---------- Forms and filters ---------- */
.brxe-form input,
.brxe-form textarea,
.brxe-filter-search input,
.brxe-filter-select {
  transition: border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}
.brxe-form input:focus,
.brxe-form textarea:focus {
  border-color: var(--brand) !important;
  outline: none;
}
.brxe-filter-search input:focus,
.brxe-filter-select:focus {
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 3px rgba(142, 96, 155, 0.15);
  outline: none;
}
.brxe-form ::placeholder { transition: opacity 0.3s ease; }
.brxe-form input:focus::placeholder,
.brxe-form textarea:focus::placeholder { opacity: 0.35; }

/* ---------- Footer ---------- */
.site-footer__link,
.site-footer__legal-link,
.contact__link {
  position: relative;
  transition: color 0.3s ease, opacity 0.3s ease;
}
.site-footer__link::after,
.contact__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.35s var(--mc-ease);
}
.site-footer__link:hover::after,
.contact__link:hover::after { transform: scaleX(1); transform-origin: left; }

/* ---------- CTA ---------- */
.js-motion .cta__image {
  transition: opacity 0.9s var(--mc-ease), transform 0.9s var(--mc-ease);
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .js-motion .mc-reveal { opacity: 1; transform: none; transition: none; }
  .js-motion .hero__media,
  .js-motion .hero__title,
  .js-motion .hero__bar,
  .js-motion .page-hero__title,
  .js-motion .tenant-hero__content,
  .js-motion .site-header__inner { animation: none; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}