/* Reusable Tellerdesk motion. Orange light only. Does not change layout or copy. */

.ai-ambient-glow,
.ai-gradient-field,
.ai-particles,
.ai-flow-line,
.ai-glow-border,
.ai-light-sweep,
.ai-section-background {
  pointer-events: none;
}

.ai-gradient-field,
.ai-section-background {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.ai-ambient-glow {
  position: absolute;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: rgba(255, 122, 0, 0.16);
  filter: blur(28px);
  opacity: 0.8;
}

.ai-particles {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255, 153, 51, 0.55);
}

.ai-glow-border {
  position: relative;
}

.ai-light-sweep {
  position: relative;
  overflow: hidden;
}

#channels,
#explore,
#webchat,
#voice,
#connect,
.box-pricing-2,
.td-feature-page .td-feature,
.pp .pp-section:first-of-type {
  position: relative;
  isolation: isolate;
}

#channels > .container,
#explore > .container,
#webchat > .container,
#voice > .container,
#connect > .container,
.box-pricing-2 .container,
.td-feature > .container,
.pp .pp-section:first-of-type .pp-wrap {
  position: relative;
  z-index: 1;
}

#channels::before,
#explore::before,
#webchat::before,
#voice::before,
.td-feature-page .td-feature::before,
.pp .pp-section:first-of-type::before {
  content: "";
  position: absolute;
  z-index: 0;
  width: 220px;
  height: 220px;
  left: 8%;
  top: 18%;
  border-radius: 50%;
  background: rgba(255, 122, 0, 0.16);
  filter: blur(26px);
  pointer-events: none;
}

#explore::after,
#webchat::after {
  content: "";
  position: absolute;
  z-index: 0;
  width: 160px;
  height: 160px;
  left: auto;
  top: auto;
  right: 10%;
  bottom: 12%;
  border-radius: 50%;
  background: rgba(255, 76, 0, 0.1);
  filter: blur(22px);
  pointer-events: none;
}

#webchat::before {
  width: 280px;
  height: 280px;
  background: rgba(255, 122, 0, 0.2);
}

#channels::after {
  content: "";
  position: absolute;
  inset: 8% 12% auto;
  height: 46%;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 122, 0, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 122, 0, 0.045) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at center, #000 20%, transparent 72%);
}

.td-scene-glow {
  background: radial-gradient(ellipse at 50% 28%, rgba(255, 122, 0, 0.28) 0%, rgba(255, 153, 51, 0.1) 32%, rgba(23, 23, 23, 0) 68%);
}

.td-explore .td-ibx {
  position: relative;
}

.td-explore .td-ibx::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background: linear-gradient(100deg, transparent 36%, rgba(255, 153, 51, 0.14) 50%, transparent 64%);
  transform: translateX(-120%);
}

#webchat .td-bubble.ai {
  box-shadow: 0 0 0 1px rgba(253, 120, 5, 0.28);
}

.box-newsletter {
  position: relative;
  isolation: isolate;
}
.box-newsletter::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 18%;
  right: 18%;
  top: 0;
  height: 72px;
  border-radius: 50%;
  background: rgba(255, 122, 0, 0.16);
  filter: blur(16px);
  pointer-events: none;
}

.card-features-5,
.card-casestudy,
.card-pricing-style-2,
.td-feature-points article,
.td-help-card,
.pp .pp-section article,
.crm-features article {
  transition: transform 0.32s ease, border-color 0.32s ease, box-shadow 0.32s ease;
}

@media (prefers-reduced-motion: no-preference) {
  .td-scene-glow {
    animation: ai-glow-pulse 10s ease-in-out infinite;
  }

  #channels::before,
  .td-feature-page .td-feature::before,
  .pp .pp-section:first-of-type::before {
    animation: ai-orb 16s ease-in-out infinite;
  }

  #explore::before,
  #voice::before {
    animation: ai-orb 18s ease-in-out infinite reverse;
  }

  #webchat::before {
    animation: ai-orb 12s ease-in-out infinite;
  }

  #explore::after,
  #webchat::after {
    animation: ai-orb 20s ease-in-out infinite;
  }

  .td-explore .td-ibx::after {
    animation: ai-sweep 11s ease-in-out infinite;
  }

  #webchat .td-bubble.ai {
    animation: ai-border-pulse 8s ease-in-out infinite;
  }

  .td-home .banner-hero .btn-brand-4-medium,
  .box-newsletter::before {
    animation: ai-cta-glow 9s ease-in-out infinite;
  }

  .td-ai.is-on .td-ai-glow {
    animation: td-ai-fade 0.7s ease 0.2s both, ai-glow-pulse 10s ease-in-out 1.4s infinite;
  }

  .card-features-5:hover,
  .card-casestudy:hover,
  .card-pricing-style-2:hover,
  .td-feature-points article:hover,
  .td-help-card:hover,
  .pp .pp-section article:hover,
  .crm-features article:hover {
    transform: translateY(-3px);
    border-color: rgba(253, 120, 5, 0.5);
    box-shadow: 0 14px 28px rgba(255, 122, 0, 0.12);
  }
}

@keyframes ai-glow-pulse {
  0%, 100% { opacity: 0.62; transform: scale(0.98); }
  50% { opacity: 0.9; transform: scale(1.04); }
}

@keyframes ai-orb {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.7; }
  50% { transform: translate3d(12px, -16px, 0) scale(1.06); opacity: 0.95; }
}

@keyframes ai-sweep {
  0%, 55% { transform: translateX(-120%); opacity: 0; }
  68% { opacity: 1; }
  100% { transform: translateX(120%); opacity: 0; }
}

@keyframes ai-border-pulse {
  0%, 100% { box-shadow: 0 0 0 1px rgba(253, 120, 5, 0.22); }
  50% { box-shadow: 0 0 0 1px rgba(253, 120, 5, 0.55), 0 0 18px rgba(255, 122, 0, 0.16); }
}

@keyframes ai-cta-glow {
  0%, 100% { box-shadow: 0 8px 24px rgba(255, 122, 0, 0.08); }
  50% { box-shadow: 0 10px 32px rgba(255, 122, 0, 0.2); }
}

@media (max-width: 767px) {
  #channels::after,
  #explore::after,
  #webchat::after {
    display: none;
  }

  #channels::before,
  #explore::before,
  #webchat::before,
  #voice::before,
  .td-feature-page .td-feature::before,
  .pp .pp-section:first-of-type::before {
    width: 140px;
    height: 140px;
    filter: blur(14px);
  }

  .td-explore .td-ibx::after {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .td-scene-glow,
  #channels::before,
  #channels::after,
  #explore::before,
  #explore::after,
  #webchat::before,
  #webchat::after,
  #voice::before,
  .td-feature-page .td-feature::before,
  .pp .pp-section:first-of-type::before,
  .td-explore .td-ibx::after,
  #webchat .td-bubble.ai,
  .td-home .banner-hero .btn-brand-4-medium,
  .box-newsletter::before,
  .td-ai.is-on .td-ai-glow {
    animation: none !important;
  }

  .card-features-5:hover,
  .card-casestudy:hover,
  .card-pricing-style-2:hover,
  .td-feature-points article:hover,
  .td-help-card:hover,
  .pp .pp-section article:hover,
  .crm-features article:hover {
    transform: none;
  }
}