/* Technical motion layer — hero atmosphere, scroll reveals, card lift */

.welcome-area .header-text {
  z-index: 2;
}

.ut-stage {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.ut-grid {
  position: absolute;
  inset: -20%;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.16) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse at center, #000 15%, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 15%, transparent 72%);
  animation: utGridDrift 22s linear infinite;
}

.ut-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(8px);
  opacity: 0.55;
  will-change: transform;
}

.ut-orb-a {
  width: 280px;
  height: 280px;
  left: 8%;
  top: 18%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.55), rgba(130, 97, 238, 0) 68%);
  animation: utDriftA 16s ease-in-out infinite;
}

.ut-orb-b {
  width: 340px;
  height: 340px;
  right: 6%;
  bottom: 12%;
  background: radial-gradient(circle, rgba(115, 255, 0, 0.35), rgba(255, 88, 158, 0) 70%);
  animation: utDriftB 18s ease-in-out infinite;
}

.ut-scan {
  position: absolute;
  left: 0;
  right: 0;
  height: 70px;
  opacity: 0.45;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.07), transparent);
  animation: utScan 8.5s ease-in-out infinite;
}

.welcome-area .header-text h1 {
  animation: utRise 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.welcome-area .header-text p {
  animation: utRise 0.95s cubic-bezier(0.16, 1, 0.3, 1) 0.12s both;
}

.welcome-area .header-text .main-button-slider,
.welcome-area .header-text a.main-button-slider {
  animation: utRise 0.95s cubic-bezier(0.16, 1, 0.3, 1) 0.24s both;
}

.welcome-area .header-text h1 strong {
  color: #fff;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .welcome-area .header-text h1 strong {
    background-image: linear-gradient(100deg, #ffffff 0%, #f5f3ff 28%, #ddd6fe 48%, #ffffff 72%, #ecfccb 100%);
    background-size: 220% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: utShimmer 6s linear infinite;
  }
}

a.main-button-slider,
button.main-button,
a.main-button {
  position: relative;
  overflow: hidden;
}

a.main-button-slider::after,
button.main-button::after,
a.main-button::after {
  content: "";
  position: absolute;
  top: 0;
  left: -70%;
  width: 40%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  transform: skewX(-20deg);
  animation: utShine 3.8s ease-in-out infinite;
}

.header-area .main-nav {
  transition: transform 0.35s ease, box-shadow 0.35s ease, background 0.35s ease;
}

html.ut-scrolled .header-area .main-nav {
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 10px 30px rgba(30, 30, 46, 0.12);
}

@media (min-width: 992px) {
  .header-area .main-nav .nav li a {
    position: relative;
  }

  .header-area .main-nav .nav li a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, #8261ee, #73ff00);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .header-area .main-nav .nav li a:hover::after,
  .header-area .main-nav .nav li a.active::after {
    transform: scaleX(1);
  }
}

.features-small-item,
.mini .mini-content .mini-box,
.team-item,
.contact-form {
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.45s ease;
}

.features-small-item:hover,
.team-item:hover,
.contact-form:hover {
  transform: translateY(-12px);
  box-shadow: 0 24px 50px rgba(130, 97, 238, 0.2);
}

.mini .mini-content .mini-box:hover {
  margin-top: 0;
  transform: translateY(-12px);
  box-shadow: 0 22px 44px rgba(130, 97, 238, 0.18);
}

.features-small-item .icon {
  animation: utFloat 3.4s ease-in-out infinite;
}

.home-feature .col-lg-4:nth-child(2) .icon {
  animation-delay: 0.4s;
}

.home-feature .col-lg-4:nth-child(3) .icon {
  animation-delay: 0.8s;
}

.mini .mini-content .mini-box i {
  display: inline-block;
  animation: utFloat 3.6s ease-in-out infinite;
}

.mini .mini-content .row > div:nth-child(2) .mini-box i { animation-delay: 0.25s; }
.mini .mini-content .row > div:nth-child(3) .mini-box i { animation-delay: 0.5s; }
.mini .mini-content .row > div:nth-child(4) .mini-box i { animation-delay: 0.75s; }
.mini .mini-content .row > div:nth-child(5) .mini-box i { animation-delay: 1s; }
.mini .mini-content .row > div:nth-child(6) .mini-box i { animation-delay: 1.25s; }

.section img.rounded {
  animation: utFloat 6.5s ease-in-out infinite;
}

.center-heading .section-title,
.left-heading .section-title {
  background-image: linear-gradient(90deg, #8261ee, #73ff00);
  background-repeat: no-repeat;
  background-size: 0 3px;
  background-position: left bottom;
  padding-bottom: 6px;
}

.center-heading .section-title {
  background-position: center bottom;
}

html.ut-js .ut-reveal.is-in .section-title {
  animation: utUnderline 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
}

html.ut-js .ut-reveal {
  opacity: 0;
  transform: translateY(32px);
}

html.ut-js .ut-reveal.is-in {
  animation: utRise 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}

html.ut-js .ut-reveal.ut-settled {
  animation: none;
  opacity: 1;
  transform: none;
}

html.ut-js #work-process .mini-box.ut-reveal.is-in:not(.ut-settled) {
  animation: utProcessRise 0.7s cubic-bezier(0.2, 0.75, 0.25, 1) both;
}

html.ut-js .features-small-item.ut-settled:hover,
html.ut-js .team-item.ut-settled:hover,
html.ut-js .contact-form.ut-settled:hover,
html.ut-js .mini-box.ut-settled:hover {
  transform: translateY(-12px);
}

@keyframes utProcessRise {
  from {
    opacity: 0;
    transform: translateY(22px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes utRise {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes utShimmer {
  from { background-position: 0% center; }
  to { background-position: 220% center; }
}

@keyframes utGridDrift {
  from { transform: translateY(0); }
  to { transform: translateY(56px); }
}

@keyframes utDriftA {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(36px, 24px, 0); }
}

@keyframes utDriftB {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(-40px, -28px, 0); }
}

@keyframes utScan {
  0% { top: -20%; opacity: 0; }
  15% { opacity: 1; }
  100% { top: 110%; opacity: 0; }
}

@keyframes utShine {
  0%, 55% { left: -70%; }
  100% { left: 140%; }
}

@keyframes utFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@keyframes utUnderline {
  from { background-size: 0 3px; }
  to { background-size: 72px 3px; }
}

@media (max-width: 991px) {
  .ut-orb-a,
  .ut-orb-b {
    opacity: 0.35;
  }

  .section img.rounded,
  .features-small-item .icon,
  .mini .mini-content .mini-box i {
    animation: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ut-grid,
  .ut-orb,
  .ut-scan,
  .welcome-area .header-text h1,
  .welcome-area .header-text p,
  .welcome-area .header-text .main-button-slider,
  .welcome-area .header-text a.main-button-slider,
  .welcome-area .header-text h1 strong,
  a.main-button-slider::after,
  button.main-button::after,
  a.main-button::after,
  .features-small-item .icon,
  .mini .mini-content .mini-box i,
  .section img.rounded,
  .center-heading .section-title,
  .left-heading .section-title {
    animation: none !important;
  }

  html.ut-js .ut-reveal,
  html.ut-js .ut-reveal.is-in,
  html.ut-js .ut-reveal.ut-settled {
    animation: none !important;
    opacity: 1;
    transform: none;
  }
}