/* MenuCanvas Preset: Style 5 (Daily Interaction #33 – "Websites / Apps / Branding")
 * Efekt: animowana "ramka" (4 linie) rysuje się wokół tekstu na hover.
 * Ramka dopasowana do szerokości tekstu (wrapper inline-block).
 * Bez ustawiania fontów/kolorów – linie używają currentColor.
 */

.mc-menu-container.mc-preset-style5 ul.mc-menu > li > a,
ul.mc-menu.mc-menu.mc-preset-style5 > li > a {
  text-decoration: none;
  position: relative; /* ramka pozycjonowana względem <a> */
}

/*
 * Animacja ramki: na hover lekko zwalnia pod koniec (bardziej "Webflow feel").
 * Uwaga: timing na wejściu (hover) różni się od wyjścia.
 */
.mc-menu-container.mc-preset-style5,
ul.mc-menu.mc-menu.mc-preset-style5 {
  --mc-style5-frame-duration: 520ms;
  --mc-style5-frame-ease-default: cubic-bezier(0.19, 1, 0.22, 1);
  --mc-style5-frame-ease-hover: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --mc-style5-frame-vertical-delay: 110ms;

  /* Minimalny odstęp tekstu od ramki (jeśli motyw nie daje paddingu) */
  --mc-style5-target-gap-y: calc(10px * var(--mc-button-scale, 1));
  --mc-style5-target-gap-x: calc(16px * var(--mc-button-scale, 1));
}

/* Kontener ramki – obejmuje CAŁY link <a> (łącznie z paddingiem z motywu) */
.mc-menu-container.mc-preset-style5 ul.mc-menu > li > a .mc-style5-frame,
ul.mc-menu.mc-menu.mc-preset-style5 > li > a .mc-style5-frame {
  position: absolute;
  top: calc(0px - var(--mc-style5-expand-top, 0px));
  right: calc(0px - var(--mc-style5-expand-right, 0px));
  bottom: calc(0px - var(--mc-style5-expand-bottom, 0px));
  left: calc(0px - var(--mc-style5-expand-left, 0px));
  pointer-events: none;
}

/* Wspólne dla linii */
.mc-menu-container.mc-preset-style5 ul.mc-menu > li > a .mc-style5-line,
ul.mc-menu.mc-menu.mc-preset-style5 > li > a .mc-style5-line {
  position: absolute;
  background: var(--mc-accent-color, currentColor);
  pointer-events: none;
  opacity: 1;
  will-change: transform;
  backface-visibility: hidden;
}

/* Góra / dół */
.mc-menu-container.mc-preset-style5 ul.mc-menu > li > a .mc-style5-line--top,
ul.mc-menu.mc-menu.mc-preset-style5 > li > a .mc-style5-line--top,
.mc-menu-container.mc-preset-style5 ul.mc-menu > li > a .mc-style5-line--bottom,
ul.mc-menu.mc-menu.mc-preset-style5 > li > a .mc-style5-line--bottom {
  left: 0;
  right: 0;
  height: var(--mc-line-thickness, 2px);
  transform: translateZ(0) scaleX(0);
  transition: transform var(--mc-style5-frame-duration) var(--mc-style5-frame-ease-default);
}

.mc-menu-container.mc-preset-style5 ul.mc-menu > li > a .mc-style5-line--top,
ul.mc-menu.mc-menu.mc-preset-style5 > li > a .mc-style5-line--top {
  top: 0;
  transform-origin: right center;
}

.mc-menu-container.mc-preset-style5 ul.mc-menu > li > a .mc-style5-line--bottom,
ul.mc-menu.mc-menu.mc-preset-style5 > li > a .mc-style5-line--bottom {
  bottom: 0;
  transform-origin: left center;
}

/* Lewa / prawa */
.mc-menu-container.mc-preset-style5 ul.mc-menu > li > a .mc-style5-line--left,
ul.mc-menu.mc-menu.mc-preset-style5 > li > a .mc-style5-line--left,
.mc-menu-container.mc-preset-style5 ul.mc-menu > li > a .mc-style5-line--right,
ul.mc-menu.mc-menu.mc-preset-style5 > li > a .mc-style5-line--right {
  top: 0;
  bottom: 0;
  width: var(--mc-line-thickness, 2px);
  transform: translateZ(0) scaleY(0);
  transition: transform var(--mc-style5-frame-duration) var(--mc-style5-frame-ease-default);
  transition-delay: var(--mc-style5-frame-vertical-delay); /* delikatne opóźnienie jak w Webflow */
}

/* Hover / focus: na wejściu ramka delikatnie zwalnia pod koniec */
.mc-menu-container.mc-preset-style5 ul.mc-menu > li > a:hover .mc-style5-line,
.mc-menu-container.mc-preset-style5 ul.mc-menu > li > a:focus-visible .mc-style5-line,
ul.mc-menu.mc-menu.mc-preset-style5 > li > a:hover .mc-style5-line,
ul.mc-menu.mc-menu.mc-preset-style5 > li > a:focus-visible .mc-style5-line {
  transition-timing-function: var(--mc-style5-frame-ease-hover);
}

.mc-menu-container.mc-preset-style5 ul.mc-menu > li > a .mc-style5-line--left,
ul.mc-menu.mc-menu.mc-preset-style5 > li > a .mc-style5-line--left {
  left: 0;
  transform-origin: bottom center;
}

.mc-menu-container.mc-preset-style5 ul.mc-menu > li > a .mc-style5-line--right,
ul.mc-menu.mc-menu.mc-preset-style5 > li > a .mc-style5-line--right {
  right: 0;
  transform-origin: top center;
}

/* Hover/focus: "rysuj ramkę" */
.mc-menu-container.mc-preset-style5 ul.mc-menu > li > a:hover .mc-style5-line--top,
.mc-menu-container.mc-preset-style5 ul.mc-menu > li > a:focus-visible .mc-style5-line--top,
ul.mc-menu.mc-menu.mc-preset-style5 > li > a:hover .mc-style5-line--top,
ul.mc-menu.mc-menu.mc-preset-style5 > li > a:focus-visible .mc-style5-line--top {
  transform: translateZ(0) scaleX(1);
}

.mc-menu-container.mc-preset-style5 ul.mc-menu > li > a:hover .mc-style5-line--bottom,
.mc-menu-container.mc-preset-style5 ul.mc-menu > li > a:focus-visible .mc-style5-line--bottom,
ul.mc-menu.mc-menu.mc-preset-style5 > li > a:hover .mc-style5-line--bottom,
ul.mc-menu.mc-menu.mc-preset-style5 > li > a:focus-visible .mc-style5-line--bottom {
  transform: translateZ(0) scaleX(1);
}

.mc-menu-container.mc-preset-style5 ul.mc-menu > li > a:hover .mc-style5-line--left,
.mc-menu-container.mc-preset-style5 ul.mc-menu > li > a:focus-visible .mc-style5-line--left,
ul.mc-menu.mc-menu.mc-preset-style5 > li > a:hover .mc-style5-line--left,
ul.mc-menu.mc-menu.mc-preset-style5 > li > a:focus-visible .mc-style5-line--left,
.mc-menu-container.mc-preset-style5 ul.mc-menu > li > a:hover .mc-style5-line--right,
.mc-menu-container.mc-preset-style5 ul.mc-menu > li > a:focus-visible .mc-style5-line--right,
ul.mc-menu.mc-menu.mc-preset-style5 > li > a:hover .mc-style5-line--right,
ul.mc-menu.mc-menu.mc-preset-style5 > li > a:focus-visible .mc-style5-line--right {
  transform: translateZ(0) scaleY(1);
}