/* CSS Variables */

:root {
  --t-fast: 0.2s;
  --t-base: 0.4s;
  --t-slow: 0.6s;
  --ease-default: cubic-bezier(0.83, 0, 0.17, 1);
  --padding-xs: 0.75em;
  --padding-sm: 1.25em;
  --padding-md: 2em;
  --padding-lg: 3.5em;
  --padding-xl: 5em;
}

/* Buttons - Theme Variants */

[button-theme-variant="dark"] {
  background-color: var(--base-color-brand-blue-500);
  border: none;
}

[button-theme-variant="white"] {
  background-color: var(--base-color-brand-white);
}

[button-theme-variant="dark-outline"] {
  background-color: transparent;
}

[button-theme-variant="white-outline"] {
  background-color: transparent;
}

[data-theme]:has([button-theme-variant="dark"]),
[data-theme]:has([button-theme-variant="white-outline"]) {
  color: var(--base-color-brand-white);
}

[data-theme]:has([button-theme-variant="white"]),
[data-theme]:has([button-theme-variant="dark-outline"]) {
  color: var(--text-color-text-primary);
}

[data-theme]:has([button-theme-variant="dark-outline"]) [button-theme-variant="dark-outline"] {
  border: 1px solid var(--base-color-brand-slate-100);
}

[data-theme]:has([button-theme-variant="white-outline"]) [button-theme-variant="white-outline"] {
  border: 1px solid var(--base-color-brand-white);
}

/* Badges */

[badge-variant="primary-white"] {
  background-color: var(--base-color-brand-white);
}

[badge-variant="second-white"] {
  background-color: #fff;
}

/* Typewriter Effect */

[data-write]::after {
  content: '|';
  margin-left: 2px;
  animation: blink 2s infinite;
}

@keyframes blink {

  0%,
  50%,
  100% {
    opacity: 1
  }

  25%,
  75% {
    opacity: 0
  }
}

/* Buttons - Label Hover Animation */

.button-label_wrap .p-md {
  display: block;
  transition: transform var(--t-slow) var(--ease-default);
}

.button:hover .button-label_wrap .p-md:not(.clone) {
  transform: translateY(-200%);
}

.button:hover .button-label_wrap .p-md.clone {
  transform: translateY(0);
}

/* Buttons - Arrow Animation */

.button-arrow {
  transition: transform var(--t-slow) var(--ease-default);
}

[data-arrow-left] {
  position: absolute;
  transform: translateX(-1100%);
}

[data-arrow-init]:hover [data-arrow-center] {
  transform: translateX(1100%);
}

[data-arrow-init]:hover [data-arrow-left] {
  transform: translateX(0);
}

[data-arrow-view="left"]:has([data-arrow-left], [data-arrow-center]) {
  rotate: 180deg;
}

/* ========================================
   Nav Links - Underline Hover
   ======================================== */

.nav-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 1px;
  background-color: currentColor;

  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--t-slow) var(--ease-default);
}

.nav-link:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* ========================================
   Nav Links - Dropdown Arrow
   ======================================== */

.dropdown-arrow {
  transition: transform var(--t-slow) var(--ease-default);
}

.nav-link.dropdown:hover .dropdown-arrow {
  transform: translateY(100%);
}

.nav-link.dropdown:hover .dropdown-arrow.clone {
  transform: translateY(0);
}

/* ========================================
   Links - Icon Arrow Hover
   ======================================== */

.hover-arrow {
  transition: transform var(--t-slow) var(--ease-default);
}

.icon-link-trigger:hover .hover-arrow {
  transform: translateX(100%);
}

.icon-link-trigger:hover .hover-arrow.left-arrow {
  transform: translateX(-100%);
}

/* ========================================
   Contact Links - Underline Hover
   ======================================== */

.contact-link {
  position: relative;
  display: inline-block;
  text-decoration: none;
  color: currentColor;
}

.contact-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 3px;
  background-color: currentColor;

  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--t-slow) var(--ease-default);
}

.contact-link:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* Footer - Social Icons Hover */

.icon-small.is-footer {
  transition: transform var(--t-slow) var(--ease-default);
}

.footer-social:hover .icon-small.is-footer {
  transform: translateY(-200%);
}

.footer-social:hover .icon-small.is-footer.icon-clone {
  transform: translateY(0);
}

/* Marquee - Trusted By */

.trustedby-marquee {
  display: flex;
  width: max-content;
  will-change: transform;
  animation: marquee 40s linear infinite;
}

.trustedby-marquee_collection {
  display: flex;
  flex-wrap: nowrap;
}

.trustedby-marquee_item {
  flex: 0 0 auto;
}

@keyframes marquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

/* ========================================
   Marquee - Footer
   ======================================== */

.footer-marquee_wrap {
  display: flex;
  width: max-content;
  flex-wrap: nowrap;
  will-change: transform;
  animation: footer-marquee 30s linear infinite;
}

.footer-marquee_item {
  flex: 0 0 auto;
}

@keyframes footer-marquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

/* ========================================
   FAQ Accordion
   ======================================== */

.faq-item_answer {
  display: grid;
  grid-template-rows: 0fr;
  transition:
    grid-template-rows var(--t-base) var(--ease-default);
}

.faq-item_answer-wrap {
  overflow: hidden;
}

.faq-item[data-accordion-status="active"] .faq-item_answer {
  grid-template-rows: 1fr;
}

.faq-item-icon {
  transition:
    transform var(--t-base) var(--ease-default);
}

.faq-item[data-accordion-status="active"] .faq-item-icon {
  transform: rotate(315deg);
}

/* ========================================
   Ring Gradient
   ======================================== */

.ring {
  background: conic-gradient(from 0deg,
      var(--brand-blue-primary),
      color-mix(in srgb, var(--brand-blue-primary) 0%, transparent));
}

/* ========================================
   Slider (GSAP)
   ======================================== */

[data-gsap-slider-init] {
  --slider-status: on;
  --slider-spv: 2;
  --slider-gap: 1.5rem;
}

@media screen and (max-width: 767px) {
  [data-gsap-slider-init] {
    --slider-status: on;
    --slider-spv: 1;
    --slider-gap: 0.625em;
  }
}

.gsap-slider_item {
  width: calc(((100% - 1px) - (var(--slider-spv) - 1) * var(--slider-gap)) / var(--slider-spv));
}

[data-gsap-slider-control] {
  cursor: pointer;
  opacity: 1;
  transition: opacity 0.4s ease;
}

[data-gsap-slider-control][disabled],
[data-gsap-slider-control-status="not-active"] {
  opacity: 0.5;
  pointer-events: none;
}

/* ========================================
   Top Line Animation
   ======================================== */

.top-line {
  transform: translateX(-100%);
  transform-origin: left;
  pointer-events: none;
}

.top-line.is-animating {
  animation: line-sweep 2s ease forwards;
}

@keyframes line-sweep {
  from {
    transform: translateX(-100%);
  }

  to {
    transform: translateX(100%);
  }
}

.top-line {
  animation-play-state: paused;
}

/* Case Studies Cards */

.cases-studies_card {
  transition: all 0.3s ease;
}

.cases-studies_card:hover .top-line {
  animation-play-state: running;
}

.cases-studies_card:hover .main-shape_wrapper {
  opacity: 1
}

.cases-card_button {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height var(--t-fast) ease, opacity var(--t-fast) ease, margin var(--t-fast) ease;
}

.cases-studies_card:hover .cases-card_button {
  max-height: 15px;
  opacity: 1;
}

/* Shape Backgrounds & Gradients */

.main-shape_wrapper {
  opacity: 0;
  transition: opacity var(--t-slow) ease;
}

.shape-1,
.shape-2 {
  animation: subtleGradient 10s ease-in-out infinite;
  mix-blend-mode: overlay;
}

.shape-2 {
  animation-delay: 7.5s;
}

[data-shape-gradient] {
  animation: subtleGradient 16s ease-in-out infinite;
  mix-blend-mode: overlay;
  will-change: background-position, transform;
}

[data-shape-one] {
  animation-delay: 0s;
}

[data-shape-two] {
  animation-delay: 8s;
}

@keyframes subtleGradient {
  0% {
    background-position: -40% 50%;
    transform: scale(1) translateX(0);
  }

  25% {
    background-position: 80% 45%;
    transform: scale(1.04) translateX(4%);
  }

  50% {
    background-position: 160% 55%;
    transform: scale(1.07) translateX(-4%);
  }

  75% {
    background-position: 60% 50%;
    transform: scale(1.04) translateX(2%);
  }

  100% {
    background-position: -40% 50%;
    transform: scale(1) translateX(0);
  }
}

/* ========================================
   Core Shape Circle Animation
   ======================================== */

.core-shape-circle {
  animation: coreShape 7s ease-in-out infinite;
  will-change: transform, filter, opacity;
}

@keyframes coreShape {
  0% {
    filter: blur(240px) brightness(0.9);
    opacity: 0.7;
    transform: translateX(0px) scale(1);
  }

  25% {
    transform: translateX(-30px) scale(1.03);
  }

  50% {
    filter: blur(150px) brightness(1.15);
    opacity: 1;
    transform: translateX(30px) scale(1.05);
  }

  75% {
    transform: translateX(-20px) scale(1.03);
  }

  100% {
    filter: blur(240px) brightness(0.9);
    opacity: 0.7;
    transform: translateX(0px) scale(1);
  }
}

/* Solutions Cards */

.solutions-card {
  transition: all 0.3s ease;
}

.solutions-card_bottom {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: all 0.3s ease;
}

.solutions-card.is-current .solutions-card_bottom {
  max-height: 150px;
  opacity: 1;
  padding-top: 1.5rem;
}

@media (max-width: 768px) {
  .solutions-card.is-current .solutions-card_bottom {
    max-height: 170px;
  }
}

/* Bar Variants & Slow Flow Animation */

@keyframes slowFlow {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

[data-bar-variant] {
  background-size: 200% 200%;
  animation: slowFlow 6s ease infinite;
}

[data-bar-variant="default"] {
  background: linear-gradient(90deg,
      rgb(19.61% 35.29% 92.55%) 0%,
      rgb(19.61% 35.29% 92.55% / 0) 100%);
  background-size: 200% 200%;
}

[data-bar-variant="second"] {
  background: linear-gradient(90deg,
      rgb(19.61% 35.29% 92.55% / 0) 0%,
      rgb(19.61% 35.29% 92.55%) 100%);
  background-size: 200% 200%;
  animation-delay: -1s;
  animation-direction: reverse;
}

[data-bar-variant="third"] {
  background: linear-gradient(90deg,
      rgb(0.39% 19.22% 100% / 0) 0%,
      rgb(64.71% 72.55% 100%) 100%);
  background-size: 200% 200%;
  animation-duration: 8s;
}

[data-bar-revert] {
  rotate: 180deg;
}

.bars-row:has(> [data-bar-variant]:nth-child(2))>[data-bar-variant]:nth-child(1) {
  flex: 0 0 70%;
}

.bars-row:has(> [data-bar-variant]:nth-child(2))>[data-bar-variant]:nth-child(2) {
  flex: 0 0 30%;
}

/* ========================================
   Meteor Animation
   ======================================== */

.meteor {
  position: absolute;
  pointer-events: none;
  will-change: transform, opacity;
}

.meteor-trail {
  width: 2px;
  height: 74px;
  background: linear-gradient(to bottom,
      rgba(51, 91, 236, 0),
      rgba(51, 91, 236, 1));
}

.meteor-head {
  width: 2px;
  height: 2px;
  background: #ffffff;
  margin: 0 auto;
}

/* ========================================
   Loader Spinner
   ======================================== */

.loader {
  border-radius: 50%;

  background: conic-gradient(from 0deg,
      rgba(50, 90, 236, 1),
      rgba(245, 249, 255, 0));

  animation: cursorLoader 1s linear infinite;
}

.loader::before {
  content: "";
  position: absolute;
  inset: 3px;
  background: #0f111a;
  border-radius: 50%;
}

@keyframes cursorLoader {
  to {
    transform: rotate(-360deg);
  }
}

/* ========================================
   Toggle Buttons
   ======================================== */

.button_toggle {
  transition: all var(--t-base) var(--ease-default);
}

.toggle-active_dot {
  background-color: var(--brand-blue-primary);
  border-radius: 1px;
  height: 6px;
  width: 0;
  margin-right: 0;
  opacity: 0;
  transform: scale(0);
  transition: all 0.6s var(--ease-default);
}

[data-toggle-status="active"] {
  background-color: var(--base-color-brand-blue-500);
  color: var(--base-color-brand-white);
}

[data-toggle-status="active"] .toggle-active_dot {
  width: 6px;
  margin-right: 0.5rem;
  opacity: 1;
  transform: scale(1);
}

[data-collection-status="not-active"] {
  display: none;
}

.button_toggle:not([data-toggle-status="active"]):hover .button-label_wrap .p-md:not(.clone) {
  transform: translateY(-200%);
}

.button_toggle:not([data-toggle-status="active"]):hover .button-label_wrap .p-md.clone {
  transform: translateY(0);
}

/* ========================================
   Filter Count
   ======================================== */

.filter-count {
  width: 0;
  margin-left: 0;
  opacity: 0;
  transition: all 0.6s var(--ease-default);
}

[data-toggle-status="active"] .filter-count {
  width: 15px;
  margin-left: 0.5rem;
  opacity: 1;
}

/* Case Filter - Collection Visibility */

[data-case-filter] [role="listitem"][data-collection-status="not-active"],
[data-case-filter] .w-dyn-item[data-collection-status="not-active"] {
  display: none;
}

/* Grid Layout Utilities */

[data-width="full-width"] {
  grid-column: 1 / -1;
}

[data-force-single-column="true"] {
  grid-column: 1;
}

/* Mobile Navigation - Hamburger Menu */

.menu-hamburger_bar {
  transform: translateY(0) rotate(0.001deg) scaleX(1);
  transition: transform var(--t-slow) var(--ease-default);
}

.menu-hamburger_bar:nth-child(1) {
  transform: translateY(-0.575em) rotate(0.001deg) scaleX(1);
}

.menu-hamburger_bar:nth-child(2) {
  transform: translateY(0em) rotate(0.001deg) scaleX(1);
}

.menu-hamburger_bar:nth-child(3) {
  transform: translateY(0.575em) rotate(0.001deg) scaleX(1);
}

[data-nav-status="active"] .menu-hamburger_bar:nth-child(1) {
  transform: translateY(0em) rotate(-45deg) scaleX(1);
}

[data-nav-status="active"] .menu-hamburger_bar:nth-child(2) {
  transform: translateY(0em) rotate(0.001deg) scaleX(0);
}

[data-nav-status="active"] .menu-hamburger_bar:nth-child(3) {
  transform: translateY(0em) rotate(45deg) scaleX(1);
}

/* Mobile Navigation - Menu Panel */

.nav-mobile_menu {
  height: 0;
  overflow: hidden;
  width: 100%;
  position: relative;
  z-index: 90
}

.mobile-menu_col {
  transform: translateY(2em);
  transition: transform var(--t-slow) var(--ease-default);
}

[data-nav-status="active"] .mobile-menu_col {
  transform: translateY(0em);
}

.nav-mobile_menu .separator {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.6s var(--ease-default);
}

[data-nav-status="active"] .nav-mobile_menu .separator {
  transform: scaleX(1);
}

/* Parallax Layers */

[data-parallax-layer] {
  will-change: transform;
}

/* IThouse Glass Icons & Tags */

.ithouse-glass_icon {
  position: absolute;
}

[data-position="top-right"].ithouse-glass_icon {
  position: absolute;
  top: 15%;
  right: 15%;
}

.ithouse-tag_parallax {
  position: absolute;
}

[data-position-tag="bottom-left"].ithouse-tag_parallax {
  position: absolute;
  bottom: 15%;
  left: 15%;
}

/* Flow Gradient Lines */

[data-flow] {
  position: relative;
  overflow: hidden;
  width: 100%;
}

[data-flow]::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;

  width: 50%;
  max-width: 600px;
  background: linear-gradient(90deg,
      rgba(51, 91, 236, 0) 0%,
      rgba(51, 91, 236, 1) 100%);

  will-change: transform;

  animation-name: flowMove;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-duration: var(--duration, 6s);
  animation-delay: var(--delay, 0s);

  transform: translateX(-150%);

  animation-fill-mode: both;
}

@keyframes flowMove {
  0% {

    transform: translateX(-150%);
  }

  100% {
    transform: translateX(350%);
  }
}

[data-flow-slow]::before {
  --duration: 9s;
}

[data-flow-medium]::before {
  --duration: 6s;
}

[data-flow-fast]::before {
  --duration: 3s;
}

[data-flow-inverted]::before {

  animation-direction: reverse;
  background: linear-gradient(270deg,
      rgba(51, 91, 236, 0) 0%,
      rgba(51, 91, 236, 1) 100%);
  right: 0;
  left: auto;
}

[data-flow-hidden]::before {
  content: none;
  display: none;
}

/* --- Delays --- */
[data-delay-1]::before {
  --delay: 1s;
}

[data-delay-2]::before {
  --delay: 2s;
}

[data-delay-3]::before {
  --delay: 3s;
}

[data-delay-4]::before {
  --delay: 4s;
}

[data-delay-5]::before {
  --delay: 5s;
}

/* Cursor Floating Animation */

.cursor {
  display: inline-block;
  animation: cursorFloat 3s var(--ease-default) infinite;
  transform-origin: center;
  will-change: transform;
}

@keyframes cursorFloat {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }

  25% {
    transform: translate(8px, -6px) rotate(8deg);
  }

  50% {
    transform: translate(-8px, 6px) rotate(-8deg);
  }

  75% {
    transform: translate(6px, 10px) rotate(6deg);
  }

  100% {
    transform: translate(0, 0) rotate(0deg);
  }
}

/* ========================================
   Graphic Trails
   ======================================== */

.graphic-trail-v {
  background: linear-gradient(90deg, rgba(50, 90, 236, 1) 0%, rgba(255, 255, 255, 0) 100%);
}

.graphic-trail-h {
  background: linear-gradient(0deg, rgba(50, 90, 236, 1) 0%, rgba(255, 255, 255, 0) 100%);
}

.graphic-trail-h {
  animation: drawHeight 17s var(--ease-default) infinite;
}

.graphic-trail-v {
  animation: drawWidth 17s var(--ease-default) infinite;
}

.graphic-trail_head {
  animation: popHead 17s var(--ease-default) infinite;
  transform-origin: center;
}

/* ========================================
   Rotating Text
   ======================================== */

.rotating-wrapper {
  position: relative;
  overflow: hidden;
  display: inline-block;
  vertical-align: bottom;
}

.rotating-inner {
  position: relative;
  display: block;
  white-space: nowrap;
}

/* ========================================
   Graphic Trails - Draw Animations
   ======================================== */

@keyframes drawWidth {
  0% {
    width: 0;
    opacity: 0;
  }

  1.5% {
    opacity: 1;
  }

  9%,
  98% {
    width: 100%;
    opacity: 1;
  }

  99.5% {
    width: 0;
    opacity: 1;
  }

  100% {
    width: 0;
    opacity: 0;
  }
}

@keyframes drawHeight {
  0% {
    height: 0;
    opacity: 0;
  }

  1.5% {
    opacity: 1;
  }

  9%,
  98% {
    height: 100%;
    opacity: 1;
  }

  99.5% {
    height: 0;
    opacity: 1;
  }

  100% {
    height: 0;
    opacity: 0;
  }
}

@keyframes popHead {

  0%,
  8% {
    transform: scale(0);
    opacity: 0;
  }

  10.5%,
  98% {
    transform: scale(1);
    opacity: 1;
  }

  99.5% {
    transform: scale(0);
    opacity: 1;
  }

  100% {
    transform: scale(0);
    opacity: 0;
  }
}

/* ========================================
   Check Card Animations
   ======================================== */

@keyframes popInCheck {

  0%,
  12% {
    transform: scale(0);
    opacity: 0;
  }

  13.5% {
    transform: scale(1.2);
    opacity: 1;
  }

  15%,
  98% {
    transform: scale(1);
    opacity: 1;
  }

  99.5% {
    transform: scale(0);
    opacity: 1;
  }

  100% {
    transform: scale(0);
    opacity: 0;
  }
}

.check-wrap .check-icon-card {
  animation: popInCheck 17s var(--ease-default) infinite;
  transform-origin: center;
}

@keyframes drawInnerLine {

  0%,
  15% {
    width: 0;
    opacity: 0;
  }

  16.5% {
    opacity: 1;
  }

  19.5%,
  98% {
    width: 100%;
    opacity: 1;
  }

  99.5% {
    width: 0;
    opacity: 1;
  }

  100% {
    width: 0;
    opacity: 0;
  }
}

.check-lines .check-line {
  animation: drawInnerLine 17s var(--ease-default) infinite;
  display: block;
  white-space: nowrap;
  overflow: hidden;
}

.check-lines .check-line:nth-child(2) {
  animation-delay: 0.2s;
}

/* Line Hover Overlay */

.line-hover-overlay {
  transition: opacity 0.6s ease;
}

.line-hover:hover .line-hover-overlay {
  opacity: 1;
}

/* Capabilities Cards */

.capabilities-card.is-current .capabilities-card_bottom {
  max-height: 50px;
  opacity: 1;
  padding-top: 1.5rem;
}

/* User path */

.middle-line_inner {
  animation: moveGradient 12s ease-in-out infinite;
}

@keyframes moveGradient {

  0% {
    transform: translateX(-100%);
  }

  60% {
    transform: translateX(calc(100vw));
  }

  100% {
    transform: translateX(calc(100vw));
  }
}