/* Atrecxa reconstruction — interaction, hover, and motion styles.
   Visual timing is matched to the published homepage, without Webflow IX. */

.header-button-wrap {
  display: flex;
}

.work-head.sticky {
  position: sticky;
  top: 0;
  z-index: 4;
  background-color: var(--color--background--page);
}

.cta-form-block {
  display: flex;
  flex-direction: column;
}

.page-wrapper {
  overflow: visible;
}

html.atrecxa,
body.atrecxa {
  overflow-x: clip;
}

.demo {
  display: none !important;
}

/* Button label / arrow swap */
.button-text {
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.button-text.is-one {
  position: relative;
}

.button-text.is-two {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(110%);
}

.primary-button:hover .button-text.is-one,
.primary-button:focus-visible .button-text.is-one {
  transform: translateY(-110%);
}

.primary-button:hover .button-text.is-two,
.primary-button:focus-visible .button-text.is-two {
  transform: translateY(0);
}

.button-arrow-pill .button-arrow:last-child {
  position: absolute;
  transform: rotate(45deg) translate(-120%, 120%);
}

.primary-button:hover .button-arrow-pill .button-arrow:first-child,
.primary-button:focus-visible .button-arrow-pill .button-arrow:first-child {
  transform: rotate(45deg) translate(120%, -120%);
}

.primary-button:hover .button-arrow-pill .button-arrow:last-child,
.primary-button:focus-visible .button-arrow-pill .button-arrow:last-child {
  transform: rotate(45deg) translate(0, 0);
}

.button-arrow-pill {
  position: relative;
}

.button-arrow {
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Footer / nav text swap */
.footer-link-text,
.navllink div,
.dropdown-link {
  transition: transform 0.35s ease, margin 0.4s ease, color 0.3s ease;
}

.footer-link-text.is-two {
  transform: translateY(110%);
}

.footer-link:hover .footer-link-text.one {
  transform: translateY(-110%);
}

.footer-link:hover .footer-link-text.is-two {
  transform: translateY(0);
}

.footer-social .social-arrow {
  transition: transform 0.35s ease;
}

.footer-social:hover .social-arrow {
  transform: translateX(4px);
}

/* Project / service underline */
.project-animated-line {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.5s ease;
}

.project-link:hover .project-animated-line,
.service-link:hover .project-animated-line,
.step.is-active .project-animated-line {
  transform: scaleX(1);
}

.project-image,
.media-image,
.media-image-service,
.about-media-image-small-large,
.inner-hero-image {
  transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.project-image-wrap:hover .project-image,
.blog-media:hover .media-image,
.service-media:hover .media-image-service {
  transform: scale(1.06);
}

.expert-v2-button .arrow {
  flex: none;
  max-width: 1.5rem;
  transition: transform 0.4s ease;
}

.expert-v2-button .arrow:last-child {
  position: absolute;
  transform: translateX(-120%);
}

.blog-arrow-pill {
  position: relative;
  overflow: hidden;
}

.expert-v2-button:hover .arrow:first-child {
  transform: translateX(120%);
}

.expert-v2-button:hover .arrow:last-child {
  transform: translateX(0);
}

/* FAQ */
.faq-card {
  position: relative;
}

.faq-card .faq-p-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s ease;
}

.faq-card .faq-p-wrap > * {
  overflow: hidden;
}

.faq-card.is-open .faq-p-wrap,
.faq-card[aria-expanded="true"] .faq-p-wrap {
  grid-template-rows: 1fr;
}

.faq-arrow-wrap-v3 {
  position: relative;
  width: 1.3rem;
  height: 1.3rem;
  flex-shrink: 0;
}

.faq-icon {
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.faq-icon.plus {
  opacity: 1;
}

.faq-card.is-open .faq-icon.plus {
  opacity: 0;
  transform: rotate(90deg);
}

.faq-card:not(.is-open) .faq-icon:not(.plus) {
  opacity: 0;
}

.faq-top {
  width: 100%;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
}

/* Dropdown */
.nav-dropdown-content {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.nav-dropdown.is-open .nav-dropdown-content,
.nav-dropdown-content.w--open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  display: block;
}

.nav-link-icon {
  transition: transform 0.3s ease;
}

.nav-dropdown.is-open .nav-link-icon {
  transform: rotate(180deg);
}

/* Lightbox */
.atrecxa-lightbox {
  position: fixed;
  inset: 0;
  z-index: 4000;
  background: rgba(13, 15, 18, 0.86);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.atrecxa-lightbox.is-open {
  display: flex;
}

.atrecxa-lightbox__frame {
  width: min(940px, 100%);
  aspect-ratio: 940 / 528;
  background: #000;
  position: relative;
}

.atrecxa-lightbox iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.atrecxa-lightbox__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 2.5rem;
  height: 2.5rem;
  border: 0;
  background: #fff;
  color: #1a1a1a;
  cursor: pointer;
  font-size: 1.25rem;
}

/* Form states */
.success-message,
.error-message {
  display: none;
  margin-top: 1rem;
  padding: 0.75rem 1rem;
}

.success-message.is-visible,
.w-form-done.is-visible {
  display: block;
  background: #e6f7ec;
  color: #0b4523;
}

.error-message.is-visible,
.w-form-fail.is-visible {
  display: block;
  background: #feecec;
  color: #5c0f0f;
}

.cta-form-field.is-invalid {
  border-bottom-color: #ef4444;
}

/* Custom slider track (keeps original Webflow class names) */
.atrecxa-track {
  display: flex;
  height: 100%;
  transition: transform 0.5s ease, opacity 0.5s ease;
}

.testimonial-slider .w-slide,
.slider-mobile .w-slide {
  min-width: 100%;
  flex: 0 0 100%;
}

.testimonial-slider.is-fade .w-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}

.testimonial-slider.is-fade .w-slide.is-active {
  position: relative;
  opacity: 1;
  pointer-events: auto;
}

.testimonial-slider.is-fade .atrecxa-track {
  display: block;
  position: relative;
}

.slider-arrow,
.slider-button-white {
  cursor: pointer;
  border: 0;
}

.hamburger-menu {
  cursor: pointer;
}

body.nav-open {
  overflow: hidden;
}

/* Reveal defaults — JS/GSAP animates these in */
[data-reveal] {
  will-change: transform, opacity;
}

.contact-grid {
  position: relative;
  min-height: 54.625rem;
}

.navigation-bar {
  z-index: 20;
}

.header-menu-wrapper[data-nav-menu-open] {
  display: block !important;
}

.blog-media {
  aspect-ratio: 4 / 3;
  display: flex;
}

.blog-media .media-image {
  height: 100%;
}

.step-media.v1 {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.step-media.v1 .media-image {
  height: 120%;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }

  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }
}