/*
* --------------------------------------------
* ARROW BUTTON ANIMATION
* For default Bricks Button elements.
* Add class .btn-arrow-animation.
* Requires the matching JS in engel.js.
*
* Colour: text and arrow inherit the button's own colour via
* currentColor, so no variant classes are needed — the button's
* colour styling drives everything.
*
* Note: button line-height is set globally in the theme to
* var(--lh-relaxed) (1.6, unitless), so the swap travels
* calc(var(--lh-relaxed) * 1em) = one line box.
*
* Animation is tablet-and-up only; below that the button renders
* static (single title, single arrow, no hover motion).
* --------------------------------------------
*/

.btn-arrow-animation {
  --dimensions: 25px;
  --transitionduration: 0.5s;
  --ease: cubic-bezier(0.1, 0, 0.3, 1);
  --transitiondurationswap: 0.5s;
  --easeswap: cubic-bezier(0.1, 0, 0.3, 1);
  --arrow-distance: 300%;
}

/* ---- Title swap (static base) ---- */
.btn-arrow-animation .swap-wrap {
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}

.btn-arrow-animation .swap-title {
  display: block;
  color: currentColor;
}

/* ---- Arrow track (static base) ---- */
.btn-arrow-animation .arrow-track {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--dimensions);
  height: var(--dimensions);
  flex-shrink: 0;
}

.btn-arrow-animation .arrow-track svg {
  position: absolute;
  width: var(--dimensions);
  height: var(--dimensions);
  fill: currentColor;
}

/* Below tablet the duplicate arrow is never used — hide it so it
   doesn't stack on top of the resting arrow */
.btn-arrow-animation .arrow-track .arrow-right {
  display: none;
}

/* ---- Animated behaviour: tablet and up ---- */
@media (min-width: 991px) {
  .btn-arrow-animation .swap-title {
    transition: transform var(--transitiondurationswap) var(--easeswap);
  }

  /* Clone sits one line below; it rides up with the parent on hover
     (do NOT add a hover transform here, or it double-counts and exits view) */
  .btn-arrow-animation .swap-title::after {
    display: block;
    content: attr(data-content);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    color: currentColor;
    transform: translateY(calc(var(--lh-relaxed) * 1em));
  }

  /* Original text rises and exits; clone rides up into view */
  .btn-arrow-animation:hover .swap-title {
    transform: translateY(calc(var(--lh-relaxed) * -1em));
  }

  .btn-arrow-animation .arrow-track svg {
    transition: transform var(--transitionduration) var(--ease);
  }

  /* Incoming arrow waits at bottom-left (235deg) */
  .btn-arrow-animation .arrow-track .arrow-right {
    display: block;
    transform: translate(
      calc(var(--arrow-distance) * -0.707),
      calc(var(--arrow-distance) * 0.707)
    );
  }

  /* On hover: original exits top-right (45deg), second enters to centre */
  .btn-arrow-animation:hover .arrow-track .arrow-left {
    transform: translate(
      calc(var(--arrow-distance) * 0.707),
      calc(var(--arrow-distance) * -0.707)
    );
  }
  .btn-arrow-animation:hover .arrow-track .arrow-right {
    transform: translate(0, 0);
  }
}