/* GoodWide: hover effects, marquees and loops that the Webflow runtime used
   to drive with JS (IX2). Paired with js/site.js. */

/* ---------- Text roll on links and buttons ---------- */
.nav-link, .nav-link-icon, .nav-button, .button {
  transition: opacity .5s cubic-bezier(.25, 1, .5, 1);
}

.nav-link-text, .nav-button-text, .button-text {
  transition: transform .5s cubic-bezier(.25, 1, .5, 1);
}

@media (hover: hover) {
  .nav-link:hover .nav-link-text,
  .nav-link-icon:hover .nav-link-text,
  .nav-button:hover .nav-button-text,
  .button:hover .button-text {
    transform: translateY(-100%);
  }

  /* the other links in the same group fade back */
  :has(> .nav-link:hover) > .nav-link:not(:hover) {
    opacity: .25;
  }
}

/* ---------- Logo and "GoodWide" marquees ---------- */
.clients-wrapper {
  animation: gw-marquee 50s linear infinite;
}

.strip-block {
  animation: gw-marquee 80s linear infinite;
}

.strip-block.reverse {
  animation-name: gw-marquee-reverse;
}

@keyframes gw-marquee {
  to { transform: translateX(-100%); }
}

@keyframes gw-marquee-reverse {
  to { transform: translateX(100%); }
}

/* ---------- "Scroll down" line ---------- */
.line-scroll-down {
  animation: gw-scroll-line 1.47s infinite;
}

@keyframes gw-scroll-line {
  0%, 45.6% { opacity: 1; transform: none; height: 25%; animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
  72.7% { opacity: 0; transform: translateY(10px); height: 10%; }
  72.8% { opacity: 0; transform: translateY(-2px); height: 0%; animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
  100% { opacity: 1; transform: none; height: 25%; }
}

/* ---------- Case cards and hero cards (desktop pointer only) ---------- */
@media (min-width: 992px) and (hover: hover) {
  .block-icon-project {
    opacity: 0;
    filter: blur(7px);
    transform: translate(-50%, 50%) rotate(-50deg);
    transition: opacity .6s cubic-bezier(.25, 1, .5, 1), filter .6s cubic-bezier(.25, 1, .5, 1), transform .6s cubic-bezier(.25, 1, .5, 1);
  }

  .case:hover .block-icon-project,
  .link-block-project:hover .block-icon-project {
    opacity: 1;
    filter: blur(0);
    transform: none;
  }

  .img-main-project-a, .img-main-project {
    transition: scale .6s cubic-bezier(.25, 1, .5, 1);
  }

  .case:hover .img-main-project-a,
  .link-block-project:hover .img-main-project {
    scale: 1.1;
  }

  /* hero card caption drops in under the card on hover */
  .text-block-project {
    opacity: 0;
    filter: blur(7px);
    transform: translateY(-3em);
    transition: opacity .7s cubic-bezier(.25, 1, .5, 1), filter .7s cubic-bezier(.25, 1, .5, 1), transform .7s cubic-bezier(.25, 1, .5, 1);
  }

  .link-block-project:hover + .text-block-project {
    opacity: 1;
    filter: blur(0);
    transform: none;
  }

  /* services: row turns white and its image floats in next to the pointer */
  .grid-services {
    transition: background-color .5s cubic-bezier(.25, 1, .5, 1);
  }

  .grid-services:hover {
    background-color: var(--white);
  }

  .block-image-services {
    visibility: hidden;
    opacity: 0;
    transform: translateX(-10%);
    transition: opacity .5s cubic-bezier(.25, 1, .5, 1), transform .5s cubic-bezier(.25, 1, .5, 1), visibility 0s .5s;
  }

  .grid-services:hover .block-image-services {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition-delay: 0s;
  }
}

@media (prefers-reduced-motion: reduce) {
  .clients-wrapper, .strip-block, .line-scroll-down {
    animation: none;
  }
}