/* Modern motion layer for the NexusBear homepage. */

.nb-scroll-progress {
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  pointer-events: none;
  transform: scaleX(0);
  transform-origin: left center;
  background: linear-gradient(90deg, #651fff 0%, #6256ff 48%, #40d8e8 100%);
  box-shadow: 0 0 18px rgba(101,31,255,.42);
}

.nb-home-hero .title,
.nb-home-hero--mobile .exoBole:first-child {
  animation: nbHeroTitleIn .9s cubic-bezier(.2,.75,.2,1) both;
}

.nb-home-hero .box {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  animation: nbHeroCtaIn .8s .22s cubic-bezier(.2,.75,.2,1) both;
  transition: transform .28s ease, box-shadow .28s ease;
}

.nb-home-hero .box::before {
  animation-duration: 3.8s;
}

.nb-home-hero .box:hover,
.nb-home-hero .box:focus-visible {
  box-shadow: 0 20px 42px rgba(90,69,239,.28);
  transform: translateY(-4px) scale(1.015);
}

.nb-home-hero .phone,
.nb-home-hero .phone img {
  animation: none !important;
  transform: none !important;
  transition: none !important;
  will-change: auto;
}

.nb-home-hero .fei,
.nb-home-hero .fei2,
.nb-home-hero .fei3 {
  filter: drop-shadow(0 12px 18px rgba(90,69,239,.14));
}

body.nb-motion-enabled .nb-motion-reveal {
  --nb-motion-x: 0px;
  opacity: 0;
  filter: blur(4px);
  transform: translate3d(var(--nb-motion-x), 28px, 0) scale(.96);
  transform-origin: center bottom;
  transition:
    opacity .78s cubic-bezier(.2,.75,.2,1),
    filter .78s ease,
    transform .78s cubic-bezier(.2,.75,.2,1);
  transition-delay: var(--nb-motion-delay, 0ms);
}

body.nb-motion-enabled .nb-motion-reveal.is-visible {
  opacity: 1;
  filter: blur(0);
  transform: translate3d(0, 0, 0) scale(1);
}

.nb-motion-title {
  position: relative;
}

.nb-motion-title::after {
  content: "";
  display: block;
  width: min(86px, 22vw);
  height: 4px;
  margin: 16px auto 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #651fff, #40d8e8, #f4b6d2, #651fff);
  background-size: 220% 100%;
  box-shadow: 0 8px 24px rgba(101,31,255,.2);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .72s .18s cubic-bezier(.2,.75,.2,1);
}

.nb-motion-title.is-visible::after {
  transform: scaleX(1);
  animation: nbAccentFlow 7s .9s ease-in-out infinite;
}

.nb-section-ambient {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.nb-section-ambient::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -35%;
  pointer-events: none;
  opacity: .48;
  background:
    radial-gradient(circle at 18% 28%, rgba(64,216,232,.14), transparent 28%),
    radial-gradient(circle at 82% 68%, rgba(101,31,255,.12), transparent 30%);
  transform: translate3d(-2%, -1%, 0) scale(1);
  animation: nbAmbientDrift 14s ease-in-out infinite alternate;
}

.nb-section-ambient > * {
  position: relative;
  z-index: 1;
}

.grid .item,
.gray,
.nb-google-reviews__summary,
.nb-google-reviews__card {
  transition: transform .3s cubic-bezier(.2,.75,.2,1), box-shadow .3s ease;
}

.grid .item,
.gray {
  position: relative;
  overflow: hidden;
}

.grid .item::after,
.gray::after,
.website-ui-card::after {
  content: "";
  position: absolute;
  z-index: 5;
  inset: -45% auto -45% -65%;
  width: 38%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.72), transparent);
  pointer-events: none;
  transform: translateX(-160%) rotate(18deg);
  transition: transform .75s cubic-bezier(.2,.75,.2,1);
}

.grid .item:hover,
.gray:hover {
  box-shadow: 0 20px 42px rgba(76,47,162,.16);
  transform: translateY(-7px);
}

.grid .item:hover::after,
.gray:hover::after,
.website-ui-card:hover::after,
.website-ui-card:focus-visible::after {
  transform: translateX(620%) rotate(18deg);
}

.grid .item .zn {
  transition: transform .28s ease;
}

.grid .item:hover .zn {
  transform: translate(3px,-3px) rotate(-8deg);
}

.website-ui-card {
  isolation: isolate;
}

.nb-google-reviews__summary:hover,
.nb-google-reviews__card:hover {
  transform: translateY(-5px);
}

@keyframes nbHeroTitleIn {
  from { opacity: 0; transform: translate3d(0,28px,0); letter-spacing: .025em; }
  to { opacity: 1; transform: translate3d(0,0,0); letter-spacing: normal; }
}

@keyframes nbHeroCtaIn {
  from { opacity: 0; transform: translate3d(0,18px,0) scale(.97); }
  to { opacity: 1; transform: translate3d(0,0,0) scale(1); }
}

@keyframes nbAccentFlow {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@keyframes nbAmbientDrift {
  from { transform: translate3d(-2%, -1%, 0) scale(1); }
  to { transform: translate3d(3%, 2%, 0) scale(1.04); }
}

@media (max-width: 960px) {
  .grid .item:hover,
  .gray:hover,
  .nb-google-reviews__summary:hover,
  .nb-google-reviews__card:hover {
    transform: none;
  }

  body.nb-motion-enabled .nb-motion-reveal {
    filter: none;
    transform: translate3d(0,18px,0) scale(.98);
  }

  .nb-section-ambient::before {
    opacity: .32;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nb-home-hero .title,
  .nb-home-hero--mobile .exoBole:first-child,
  .nb-home-hero .box,
  .nb-home-hero .box::before,
  .nb-home-hero .fei2,
  .nb-home-hero .fei3,
  .nb-home-hero .fei {
    animation: none !important;
  }

  body.nb-motion-enabled .nb-motion-reveal,
  body.nb-motion-enabled .nb-motion-reveal.is-visible {
    opacity: 1;
    filter: none;
    transform: none;
    transition: none;
  }

  .nb-motion-title::after {
    transform: scaleX(1);
    animation: none;
    transition: none;
  }

  .nb-section-ambient::before {
    animation: none;
  }
}