/* Language2Go — public site overlay: page-transition motion, logo & menu micro-interactions */

/* ------------------------------------------------------------------ */
/* Route transition progress bar                                      */
/* ------------------------------------------------------------------ */

.l2g-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, #a63cc4, #7c2d91);
  z-index: 2147483000;
  opacity: 1;
  transition: width .2s ease, opacity .25s ease;
  pointer-events: none;
  will-change: width, opacity;
}

/* ------------------------------------------------------------------ */
/* Page (main) transition                                             */
/* ------------------------------------------------------------------ */

.l2g-page-leaving {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .16s ease, transform .16s ease;
  will-change: opacity, transform;
}

.l2g-page-entering {
  opacity: 0;
  transform: translateY(18px);
}

.l2g-page-enter-active {
  opacity: 1;
  transform: translateY(0);
  transition: opacity .45s cubic-bezier(.22, .61, .36, 1), transform .45s cubic-bezier(.22, .61, .36, 1);
  will-change: opacity, transform;
}

/* ------------------------------------------------------------------ */
/* Header menu links — hover underline (added on top of existing       */
/* active-state styling, never overrides it)                          */
/* ------------------------------------------------------------------ */

/* ------------------------------------------------------------------ */
/* Logo — hover motion, glare sweep and one-time intro                 */
/* ------------------------------------------------------------------ */

.l2g-logo-wrap {
  position: relative;
  display: inline-block;
  overflow: hidden;
  vertical-align: middle;
  /* room for the hover scale/tilt so the logo is not clipped */
  padding: 10px 12px;
  margin: -10px -12px;
  border-radius: 12px;
}

.l2g-logo-wrap img {
  display: block;
  transition: transform .3s ease;
  transform-origin: 50% 50%;
}

.l2g-logo-wrap:hover img {
  animation: l2g-logo-wiggle .8s cubic-bezier(.34, 1.56, .64, 1) forwards;
}
.l2g-logo-wrap img { will-change: transform; }

@keyframes l2g-logo-wiggle {
  0% { transform: rotate(0deg) scale(1) translateY(0); }
  20% { transform: rotate(-6deg) scale(1.1) translateY(-3px); }
  45% { transform: rotate(6deg) scale(1.1) translateY(-3px); }
  70% { transform: rotate(-3deg) scale(1.06) translateY(-1px); }
  100% { transform: rotate(0deg) scale(1.06) translateY(0); }
}

.l2g-logo-wrap::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, .55) 50%, transparent 60%);
  transform: translateX(-100%);
  pointer-events: none;
  transition: transform .7s ease;
}

.l2g-logo-wrap:hover::after {
  transform: translateX(100%);
}

.l2g-logo-wrap.l2g-logo-intro-playing {
  opacity: 0;
  transform: scale(.9);
}

.l2g-logo-wrap.l2g-logo-intro-playing.l2g-logo-intro-active {
  opacity: 1;
  transform: scale(1);
  transition: opacity .4s ease, transform .4s ease;
}

.l2g-logo-wrap.l2g-logo-intro-done {
  opacity: 1;
}

/* ------------------------------------------------------------------ */
/* Reduced motion                                                      */
/* ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .l2g-progress-bar {
    display: none !important;
  }

  .l2g-page-leaving,
  .l2g-page-entering,
  .l2g-page-enter-active {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .l2g-logo-wrap img {
    transition: none !important;
    animation: none !important;
  }

  .l2g-logo-wrap::after {
    transition: none !important;
  }

  .l2g-logo-wrap.l2g-logo-intro-playing,
  .l2g-logo-wrap.l2g-logo-intro-playing.l2g-logo-intro-active {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}