/* ============================================
   FLOWING MENU — services selector
   Vanilla port of the React "FlowingMenu" component.
   Hover reveals an animated marquee sliding in from
   the closest edge (top/bottom). No external libs.
   ============================================ */

.menu-wrap {
  --fm-text: #ffffff;
  /* Transparent so the menu sits on whatever section background is behind it
     (on index that is the shared services→contact band, parallax lines and
     all) instead of stamping its own slightly different dark block. */
  --fm-bg: transparent;
  --fm-marquee-bg: #ffffff;
  --fm-marquee-text: #120F17;
  --fm-border: rgba(255, 255, 255, 0.14);
  --fm-reveal-ease: cubic-bezier(0.16, 1, 0.3, 1); /* ≈ expo.out */

  width: 100%;
  height: clamp(360px, 46vh, 540px);
  overflow: hidden;
  background-color: var(--fm-bg);
}

.menu {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0;
  padding: 0;
}

.menu__item {
  flex: 1;
  position: relative;
  overflow: hidden;
  text-align: center;
  border-top: 1px solid var(--fm-border);
}

.menu__item:first-child {
  border-top: none;
}

.menu__item-link {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  position: relative;
  cursor: pointer;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  font-weight: 700;
  font-size: clamp(1.6rem, 4vh, 3rem);
  letter-spacing: 0.02em;
  color: var(--fm-text);
  transition: opacity 0.4s var(--fm-reveal-ease);
}

.menu__item-link:hover,
.menu__item-link:focus:not(:focus-visible) {
  color: var(--fm-text);
}

/* ── Marquee overlay ── */
.marquee {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  background-color: var(--fm-marquee-bg);
  transform: translate3d(0, 101%, 0); /* hidden below by default */
  transition: transform 0.6s var(--fm-reveal-ease);
}

.marquee__inner-wrap {
  height: 100%;
  width: 100%;
  overflow: hidden;
  transform: translate3d(0, -101%, 0); /* counter-offset for reveal */
  transition: transform 0.6s var(--fm-reveal-ease);
}

/* When revealed, both slide to rest position */
.menu__item.is-active .marquee,
.menu__item.is-active .marquee__inner-wrap {
  transform: translate3d(0, 0, 0);
}

.marquee__inner {
  display: flex;
  align-items: center;
  position: relative;
  height: 100%;
  width: fit-content;
  will-change: transform;
}

.marquee__part {
  display: flex;
  align-items: center;
  height: 100%;
  flex-shrink: 0;
}

.marquee__part span {
  white-space: nowrap;
  text-transform: uppercase;
  font-weight: 400;
  font-size: clamp(1.6rem, 4vh, 3rem);
  line-height: 1;
  padding: 0 1vw;
  color: var(--fm-marquee-text);
}

.marquee__img {
  width: 220px;
  height: 100%;
  margin: 0 2vw;
  overflow: hidden;
  transform: skewX(-9deg);
}

/* Inner photo counter-skews so the image stays upright while the frame slants */
.marquee__img-inner {
  width: 100%;
  height: 100%;
  transform: skewX(9deg) scale(1.22);
  background-size: cover;
  background-position: 50% 50%;
}

@media (prefers-reduced-motion: reduce) {
  .marquee,
  .marquee__inner-wrap,
  .menu__item-link {
    transition-duration: 0.001ms;
  }
}