/* Motion layer: shared, restrained animations for the active site experience. */
:root {
  --gb-motion-ease: cubic-bezier(.2, .8, .2, 1);
  --gb-motion-x: 50%;
  --gb-motion-y: 45%;
}

.gb-shell-header {
  transition:
    transform .72s var(--gb-motion-ease),
    opacity .55s ease,
    height .3s ease,
    background .3s ease,
    box-shadow .3s ease;
}

body.gb-motion-enabled:not(.gb-motion-loaded) .gb-shell-header {
  transform: translateY(-105%);
  opacity: 0;
}

body.gb-motion-loaded .gb-shell-header {
  transform: translateY(0);
  opacity: 1;
}

.gb-shell-header.is-scrolled {
  background: rgba(255, 255, 255, .88);
  box-shadow: 0 13px 42px rgba(7, 20, 38, .12);
}

.gb-shell-header::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  z-index: 5;
  background: linear-gradient(90deg, #1768e5, #66d5ff, #f3b94f);
  transform: scaleX(var(--gb-scroll-progress, 0));
  transform-origin: left;
  transition: transform .08s linear;
}

.gb-shell-brand img {
  transform-origin: center;
}

body.gb-motion-loaded .gb-shell-brand img {
  animation: gbMotionLogoIn .8s var(--gb-motion-ease) .18s both;
}

body.gb-motion-loaded .gb-shell-brand > span {
  animation: gbMotionTextIn .65s var(--gb-motion-ease) .28s both;
}

body.gb-motion-loaded .gb-shell-nav > a {
  animation: gbMotionNavIn .55s var(--gb-motion-ease) both;
  animation-delay: calc(.3s + var(--gb-nav-index, 0) * 65ms);
}

.gb-shell-nav a::after {
  transition: transform .35s var(--gb-motion-ease), background .35s ease;
}

.gb-shell-nav a:hover::after {
  transform: scaleX(1);
  background: linear-gradient(90deg, #1768e5, #66d5ff);
}

.gb-shell-quote,
.gb-page-button--primary,
.gbi-button,
.gb-contact-form button[type='submit'] {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.gb-shell-quote::before,
.gb-page-button--primary::before,
.gbi-button::before,
.gb-contact-form button[type='submit']::before {
  content: '';
  position: absolute;
  top: -50%;
  bottom: -50%;
  left: -70%;
  width: 42%;
  z-index: -1;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.32), transparent);
  transform: skewX(-18deg);
  transition: left .7s var(--gb-motion-ease);
}

.gb-shell-quote:hover::before,
.gb-page-button--primary:hover::before,
.gbi-button:hover::before,
.gb-contact-form button[type='submit']:hover::before {
  left: 130%;
}

body.gb-motion-loaded .gb-shell-quote {
  animation: gbMotionQuoteIn .65s var(--gb-motion-ease) .7s both;
}

.gb-motion-hero-glow {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .42;
  background: radial-gradient(
    circle 360px at var(--gb-motion-x) var(--gb-motion-y),
    rgba(102, 213, 255, .18),
    rgba(23, 104, 229, .06) 44%,
    transparent 72%
  );
  transition: opacity .35s ease;
}

.gbi-hero__content { position: relative; z-index: 2; }
.gbi-hero::after { animation: gbMotionGrid 16s linear infinite; }

.gb-home-slide__content > *,
.gbi-hero__content > * {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .62s ease, transform .72s var(--gb-motion-ease);
}

.gb-home-slide.is-active .gb-home-slide__content > *,
.gbi-hero__content.is-visible > * {
  opacity: 1;
  transform: translateY(0);
}

.gb-home-slide__content > :nth-child(1), .gbi-hero__content > :nth-child(1) { transition-delay: .28s; }
.gb-home-slide__content > :nth-child(2), .gbi-hero__content > :nth-child(2) { transition-delay: .38s; }
.gb-home-slide__content > :nth-child(3), .gbi-hero__content > :nth-child(3) { transition-delay: .49s; }
.gb-home-slide__content > :nth-child(4), .gbi-hero__content > :nth-child(4) { transition-delay: .6s; }

.gb-home-slide.is-active h1 span,
.gbi-hero__content.is-visible h1 span {
  background-image: linear-gradient(90deg, #66d5ff, #d8f6ff, #66d5ff);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  animation: gbMotionAccent 5s ease-in-out infinite;
}

.gb-home-carousel__arrows button i,
.gb-page-button i,
.gb-service-card a i,
.gb-journey__link i {
  transition: transform .28s var(--gb-motion-ease);
}

.gb-home-carousel__arrows button:hover i,
.gb-page-button:hover i,
.gb-service-card a:hover i,
.gb-journey__link:hover i {
  transform: translateX(4px);
}

.gb-home-carousel__arrows [data-carousel-prev]:hover i { transform: translateX(-4px); }

.gb-motion-reveal {
  opacity: 0;
  transform: translateY(30px) scale(.985);
  transition:
    opacity .7s ease var(--gb-motion-delay, 0ms),
    transform .8s var(--gb-motion-ease) var(--gb-motion-delay, 0ms);
}

.gb-motion-reveal.is-motion-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* The legal bar touches the viewport edge and must never depend on intersection. */
.gb-footer-bottom__inner {
  opacity: 1 !important;
  transform: none !important;
}

.gb-journey__step.gb-motion-reveal {
  transform: translateX(34px);
}

.gb-journey__step.gb-motion-reveal.is-motion-visible { transform: translateX(0); }

.gb-journey__step::before {
  transform: scale(0);
  transition: transform .45s var(--gb-motion-ease) .25s, box-shadow .35s ease;
}

.gb-journey__step.is-motion-visible::before {
  transform: scale(1);
  box-shadow: 0 0 0 7px rgba(23, 104, 229, .1);
}

.gb-motion-tilt {
  --gb-tilt-x: 0deg;
  --gb-tilt-y: 0deg;
  transform-style: preserve-3d;
  will-change: transform;
}

.gb-motion-tilt > i,
.gb-motion-tilt .gbi-card__icon,
.gb-motion-tilt .gbi-quote__avatar {
  transition: transform .35s var(--gb-motion-ease);
}

.gb-motion-tilt:hover > i,
.gb-motion-tilt:hover .gbi-card__icon,
.gb-motion-tilt:hover .gbi-quote__avatar {
  transform: translateZ(24px) scale(1.06) rotate(-3deg);
}

.gb-service-card.gb-motion-tilt:hover,
.gbi-card.gb-motion-tilt:hover,
.gbi-quote.gb-motion-tilt:hover,
.gb-legal-card.gb-motion-tilt:hover {
  transform: perspective(1000px) rotateX(var(--gb-tilt-x)) rotateY(var(--gb-tilt-y)) translateY(-7px) !important;
}

.gbi-quote {
  transition: transform .35s var(--gb-motion-ease), box-shadow .35s ease, border-color .35s ease;
}

.gbi-quote:hover {
  border-color: rgba(23,104,229,.24);
  box-shadow: 0 25px 55px rgba(7,20,38,.1);
}

.gbi-cta {
  position: relative;
  isolation: isolate;
}

.gbi-cta::after {
  content: '';
  position: absolute;
  width: 340px;
  height: 340px;
  right: -130px;
  top: -170px;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(102,213,255,.2), transparent 68%);
  animation: gbMotionCtaGlow 7s ease-in-out infinite alternate;
}

.gb-footer-main > div.is-motion-visible i {
  animation: gbMotionIconPulse .6s var(--gb-motion-ease) both;
}

@keyframes gbMotionLogoIn {
  0% { opacity: 0; transform: scale(.55) rotate(-16deg); }
  65% { transform: scale(1.08) rotate(3deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}

@keyframes gbMotionTextIn {
  from { opacity: 0; transform: translateX(-14px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes gbMotionNavIn {
  from { opacity: 0; transform: translateY(-12px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes gbMotionQuoteIn {
  from { opacity: 0; transform: translateX(18px) scale(.94); }
  to { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes gbMotionGrid {
  to { background-position: 64px 64px, 64px 64px; }
}

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

@keyframes gbMotionCtaGlow {
  from { transform: translate3d(0, 0, 0) scale(.85); opacity: .55; }
  to { transform: translate3d(-55px, 42px, 0) scale(1.12); opacity: 1; }
}

@keyframes gbMotionIconPulse {
  0% { transform: scale(.75); opacity: .4; }
  70% { transform: scale(1.12); }
  100% { transform: scale(1); opacity: 1; }
}

@media (max-width: 900px) {
  body.gb-motion-loaded .gb-shell-nav > a { animation: none; }
  .gb-motion-hero-glow { opacity: .25; }
}

@media (hover: none), (pointer: coarse) {
  .gb-service-card.gb-motion-tilt:hover,
  .gbi-card.gb-motion-tilt:hover,
  .gbi-quote.gb-motion-tilt:hover,
  .gb-legal-card.gb-motion-tilt:hover { transform: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .gb-shell-header,
  .gb-motion-reveal,
  .gb-home-slide__content > *,
  .gbi-hero__content > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .gb-shell-brand img,
  .gb-shell-brand > span,
  .gb-shell-nav > a,
  .gb-shell-quote,
  .gbi-hero::after,
  .gb-home-slide h1 span,
  .gbi-hero h1 span,
  .gbi-cta::after,
  .gb-footer-main i {
    animation: none !important;
  }

  .gb-motion-hero-glow { display: none; }
  .gb-shell-header::after { transition: none; }
}