/* Static site fallback — no Next.js hydration required */
.mxd-page-transition {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

html:not(.has-gsap) .loading-fade,
html:not(.has-gsap) .loading-wrap .loading-fade,
html:not(.has-gsap) .loading-split,
html:not(.has-gsap) .loading-chars,
html:not(.has-gsap) .loading-item {
  opacity: 1 !important;
  visibility: visible !important;
}

html:not(.has-gsap) .loading-wrap {
  opacity: 1 !important;
}

html:not(.has-gsap) .loading-split .line,
html:not(.has-gsap) .loading-chars .char {
  transform: none !important;
  opacity: 1 !important;
}

html:not(.has-gsap) .loading-split span,
html:not(.has-gsap) .loading-chars span {
  opacity: 1 !important;
}

html.has-gsap .loading-chars .char,
html.has-gsap .loading-split .line {
  will-change: transform, opacity;
}

html.has-gsap .line {
  overflow: hidden;
  display: block;
}

html.has-gsap .char {
  display: inline-block;
}

.mxd-menu.mxd-menu--open {
  pointer-events: auto;
}

.mxd-menu.mxd-menu--open .mxd-menu__backdrop {
  pointer-events: auto;
}

body.menu-open {
  overflow: hidden;
}

/* Hero text always readable */
.mxd-hero-09__descr .t-bold,
.mxd-hero-09__descr span {
  opacity: 1 !important;
  color: inherit !important;
}

.mxd-section-manifest .t-large,
.mxd-section-manifest .t-bright {
  opacity: 1 !important;
}

/* Disable custom cursor overlay issues on static */
.mxd-cursor {
  display: none !important;
}

@media (pointer: fine) {
  .mxd-cursor {
    display: block !important;
  }
}

/* Sticky "My Approach" section — fallback without GSAP */
.mxd-dv-sticky-img:not(.sticky-ready) .mxd-dv-sticky-img__titleitem:not(:first-child) h2 {
  opacity: 0;
  transform: translateY(100%);
}

.mxd-dv-sticky-img:not(.sticky-ready) .images__listitem:not(:first-child) .images__overflow {
  clip-path: inset(50% round 0%);
}

.mxd-dv-sticky-img__content,
.mxd-dv-sticky-img__btnholder {
  opacity: 1 !important;
}

.mxd-dv-sticky-img__titleitem h2 {
  will-change: transform;
}

.mxd-dv-sticky-img__images .images__overflow {
  will-change: clip-path;
}

.mxd-dv-sticky-img__progress {
  transform: scaleX(var(--sticky-progress, 0));
}

/* Back to Top + slide buttons — hover animations (no React/GSAP) */
@keyframes slideUp {
  0% { transform: translateY(0); opacity: 1; }
  50% { transform: translateY(-100%); opacity: 1; }
  51% { opacity: 0; }
  52% { opacity: 0; transform: translateY(100%); }
  53% { opacity: 1; }
  100% { transform: translateY(0); opacity: 1; }
}

@keyframes slideDown {
  0% { transform: translateY(0); opacity: 1; }
  50% { transform: translateY(100%); opacity: 1; }
  51% { opacity: 0; }
  52% { opacity: 0; transform: translateY(-100%); }
  53% { opacity: 1; }
  100% { transform: translateY(0); opacity: 1; }
}

@keyframes slideRight {
  0% { transform: translate(0); opacity: 1; }
  50% { transform: translate(100%); opacity: 1; }
  51% { opacity: 0; }
  52% { opacity: 0; transform: translate(-100%); }
  53% { opacity: 1; }
  100% { transform: translate(0); opacity: 1; }
}

@keyframes slideLeft {
  0% { transform: translate(0); opacity: 1; }
  50% { transform: translate(-100%); opacity: 1; }
  51% { opacity: 0; }
  52% { opacity: 0; transform: translate(100%); }
  53% { opacity: 1; }
  100% { transform: translate(0); opacity: 1; }
}

@keyframes slideRightUp {
  0% { transform: translate(0, 0); opacity: 1; }
  50% { transform: translate(100%, -100%); opacity: 1; }
  51% { opacity: 0; }
  52% { opacity: 0; transform: translate(-100%, 100%); }
  53% { opacity: 1; }
  100% { transform: translate(0, 0); opacity: 1; }
}

.slide-up .btn-caption,
.slide-down .btn-caption,
.slide-right .btn-caption,
.slide-left .btn-caption {
  display: inline-flex;
}

.slide-up i svg,
.slide-down i svg,
.slide-right i svg,
.slide-left i svg,
.slide-right-up i svg {
  display: block;
}

@media (hover: hover) {
  .slide-up:hover i svg {
    animation: slideUp 0.6s cubic-bezier(0.23, 0.65, 0.74, 1.09) both;
  }

  .slide-down:hover i svg {
    animation: slideDown 0.6s cubic-bezier(0.23, 0.65, 0.74, 1.09) both;
  }

  .slide-right:hover i svg {
    animation: slideRight 0.6s cubic-bezier(0.23, 0.65, 0.74, 1.09) both;
  }

  .slide-left:hover i svg {
    animation: slideLeft 0.6s cubic-bezier(0.23, 0.65, 0.74, 1.09) both;
  }

  .slide-right-up:hover i svg {
    animation: slideRightUp 0.6s cubic-bezier(0.23, 0.65, 0.74, 1.09) both;
  }
}

button.main-menu__toggle {
  background: none;
  border: 0;
  padding: 0;
  width: 100%;
  text-align: left;
  cursor: pointer;
  color: inherit;
  font: inherit;
}

.main-menu__item.is-open > .submenu {
  display: block;
}