/* ANIMATIONS.CSS — GPU-анимации без reflow */

@media (prefers-reduced-motion: no-preference) {

  .gsap-fade-up    { opacity: 0; transform: translateY(40px); }
  .gsap-fade-in    { opacity: 0; }
  .gsap-slide-left { opacity: 0; transform: translateX(-40px); }
  .gsap-slide-right{ opacity: 0; transform: translateX(40px); }

  .ui-browser { will-change: transform; animation: float-browser 6s ease-in-out infinite; }
  .ui-phone   { will-change: transform; animation: float-phone 7s ease-in-out infinite 1s; }
  .ui-chat    { will-change: transform; animation: float-chat 5s ease-in-out infinite 0.5s; }
  .ui-browser__content { animation: browser-scroll 5s ease-in-out infinite; }

  .btn--primary:active { transform: translateY(0) scale(0.98); }
  .faq-item__body { opacity: 0; transition: opacity 0.35s ease; }
  .faq-item__body:not([hidden]) { opacity: 1; }
  .process-step { opacity: 0.4; transition: opacity 0.5s ease; }
  .process-step.is-active { opacity: 1; }
  .process-step__number { transition: background 0.5s ease, border-color 0.5s ease; }
  .process-step.is-active .process-step__number { background: rgba(91,45,142,0.35); border-color: var(--color-accent-lt); }

  /* ─── @keyframes ────────────────────────────────────── */

  @keyframes float-browser {
    0%, 100% { transform: rotate(-3deg) translateY(0px); }
    50%       { transform: rotate(-3deg) translateY(-12px); }
  }
  @keyframes float-phone {
    0%, 100% { transform: rotate(4deg) translateY(0px); }
    50%       { transform: rotate(4deg) translateY(-16px); }
  }
  @keyframes float-chat {
    0%, 100% { transform: rotate(-1deg) translateY(0px); }
    50%       { transform: rotate(-1deg) translateY(-8px); }
  }
  @keyframes browser-scroll {
    0%   { transform: translateY(0); }
    30%  { transform: translateY(0); }
    60%  { transform: translateY(-40px); }
    90%  { transform: translateY(-40px); }
    100% { transform: translateY(0); }
  }

  @keyframes bot-bounce {
    0%   { transform: translateY(0); }
    50%  { transform: translateY(-6px); }
    100% { transform: translateY(0); }
  }

  @keyframes glow-pulse {
    0%,100%{box-shadow:0 0 20px rgba(91,45,142,0.4),0 0 50px rgba(91,45,142,0.15),inset 0 1px 0 rgba(255,255,255,0.1)}
    50%{box-shadow:0 0 40px rgba(91,45,142,0.7),0 0 100px rgba(91,45,142,0.3),inset 0 1px 0 rgba(255,255,255,0.15)}
  }

  @keyframes fade-scale-in {
    from { opacity: 0; transform: scale(0.95); }
    to   { opacity: 1; transform: scale(1); }
  }

  @keyframes cursor-blink {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0; }
  }

  .bot-widget__avatar { animation: bot-bounce 2s ease-in-out infinite; }
  .bot-widget.is-open .bot-widget__avatar { animation-play-state: paused; }
  .btn--glow { animation: glow-pulse 3s ease-in-out infinite; }
  .btn--glow:hover { animation-play-state: paused; }
  .contact-form__success:not([hidden]) { animation: fade-scale-in 0.4s ease forwards; }
  .trust-item__number.is-counting::after { content: '|'; animation: cursor-blink 0.7s step-end infinite; }

  /* ─── ПУЗЫРЬКИ HERO ─────────────────────────────────── */
  @keyframes bubble-rise {
    0%   { transform: translateY(110vh) scale(0.6); opacity: 0; }
    5%   { opacity: 1; }
    80%  { transform: translateY(-40vh) scale(1.2); opacity: 0.7; }
    93%  { transform: translateY(-60vh) scale(1.8); opacity: 0.15; }
    100% { transform: translateY(-70vh) scale(0.1); opacity: 0; }
  }

  @keyframes bubble-rise-sway {
    0%   { transform: translateY(110vh) translateX(0) scale(0.5); opacity: 0; }
    5%   { opacity: 1; }
    30%  { transform: translateY(70vh) translateX(15px) scale(0.8); }
    60%  { transform: translateY(20vh) translateX(-10px) scale(1.1); }
    82%  { transform: translateY(-45vh) translateX(8px) scale(1.3); opacity: 0.6; }
    95%  { transform: translateY(-65vh) translateX(0) scale(2.0); opacity: 0.1; }
    100% { transform: translateY(-75vh) scale(0.1); opacity: 0; }
  }

  @keyframes bubble-rise-fast {
    0%   { transform: translateY(110vh) scale(0.4); opacity: 0; }
    8%   { opacity: 0.8; }
    78%  { transform: translateY(-35vh) scale(1.0); opacity: 0.5; }
    92%  { transform: translateY(-55vh) scale(1.6); opacity: 0.1; }
    100% { transform: translateY(-65vh) scale(0.05); opacity: 0; }
  }

  .hero-bubble {
    position: absolute;
    bottom: -20px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(180,140,255,0.7), rgba(91,45,142,0.2));
    border: 0.5px solid rgba(155,127,232,0.4);
    contain: layout style;
  }

  .hero-bubble:nth-child(1)  { width:8px;  height:8px;  left:8%;  animation: bubble-rise-sway 14s ease-in-out infinite; animation-delay:0s;   }
  .hero-bubble:nth-child(2)  { width:14px; height:14px; left:22%; animation: bubble-rise-sway 20s ease-in-out infinite; animation-delay:3s;   }
  .hero-bubble:nth-child(3)  { width:18px; height:18px; left:42%; animation: bubble-rise-sway 24s ease-in-out infinite; animation-delay:1s;   }
  .hero-bubble:nth-child(4)  { width:10px; height:10px; left:68%; animation: bubble-rise-sway 16s ease-in-out infinite; animation-delay:5s;   }
  .hero-bubble:nth-child(5)  { width:6px;  height:6px;  left:15%; animation: bubble-rise 11s linear infinite;           animation-delay:2s;   }
  .hero-bubble:nth-child(6)  { width:12px; height:12px; left:55%; animation: bubble-rise 17s linear infinite;           animation-delay:4s;   }
  .hero-bubble:nth-child(7)  { width:5px;  height:5px;  left:75%; animation: bubble-rise 9s linear infinite;            animation-delay:7s;   }
  .hero-bubble:nth-child(8)  { width:16px; height:16px; left:85%; animation: bubble-rise 22s linear infinite;           animation-delay:0.5s; }
  .hero-bubble:nth-child(9)  { width:4px;  height:4px;  left:32%; animation: bubble-rise-fast 8s linear infinite;       animation-delay:6s;   }
  .hero-bubble:nth-child(10) { width:5px;  height:5px;  left:48%; animation: bubble-rise-fast 7s linear infinite;       animation-delay:2.5s; }
  .hero-bubble:nth-child(11) { width:4px;  height:4px;  left:62%; animation: bubble-rise-fast 9s linear infinite;       animation-delay:8s;   }
  .hero-bubble:nth-child(12) { width:6px;  height:6px;  left:90%; animation: bubble-rise-fast 10s linear infinite;      animation-delay:1.5s; }

  @media (max-width: 767px) {
    .hero-bubble:nth-child(n+7) { display: none; }
    .hero-bubbles { position: fixed; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; z-index: 1; }
  }

}

@media (prefers-reduced-motion: reduce) {
  .hero-bubble { animation: none; display: none; }
}

@keyframes shimmer{0%{background-position:-200% center}100%{background-position:200% center}}
@keyframes shimmer-slow{0%{background-position:-300% center}100%{background-position:300% center}}

@keyframes orb-float-1{
0%,100%{transform:translate(0,0) scale(1)}
33%{transform:translate(30px,-20px) scale(1.05)}
66%{transform:translate(-20px,15px) scale(0.95)}
}
@keyframes orb-float-2{
0%,100%{transform:translate(0,0) scale(1)}
33%{transform:translate(-25px,20px) scale(1.08)}
66%{transform:translate(15px,-25px) scale(0.92)}
}
@keyframes orb-float-3{
0%,100%{transform:translate(0,0) scale(1)}
50%{transform:translate(20px,10px) scale(1.03)}
}
@keyframes star-twinkle{
0%,100%{opacity:0.3;transform:scale(1)}
50%{opacity:1;transform:scale(1.5)}
}
@keyframes grid-pulse{
0%,100%{opacity:0.3}
50%{opacity:0.6}
}
@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

canvas.hero-sphere { filter: blur(0px); box-shadow: none; }

.hero-terminal-box { background:rgba(4,4,6,0.75); border:1px solid rgba(155,127,232,0.3); border-radius:10px; backdrop-filter:blur(20px); overflow:hidden; box-shadow:0 0 60px rgba(91,45,142,0.25),0 0 120px rgba(91,45,142,0.1),inset 0 1px 0 rgba(255,255,255,0.06); margin-bottom:2.5rem; width:100%; max-width:560px; }
.htb-bar { display:flex; align-items:center; gap:6px; padding:.8rem 1.2rem; background:rgba(255,255,255,0.03); border-bottom:1px solid rgba(155,127,232,0.15); }
.htb-dot { width:11px; height:11px; border-radius:50%; }
.htb-dot--r { background:#FF5F57; } .htb-dot--y { background:#FFBD2E; } .htb-dot--g { background:#28C840; }
.htb-path { font-size:.6rem; color:rgba(240,236,255,0.25); margin-left:auto; letter-spacing:1px; font-family:'JetBrains Mono','Fira Code',monospace; }
.htb-body { padding:1.2rem 1.5rem; height:175px; display:flex; flex-direction:column; gap:.15rem; overflow:hidden; }
.htb-prompt { color:var(--color-accent-lt); }
.htb-cursor { color:var(--color-accent-lt); animation:htbBlink 1s step-end infinite; }
@keyframes htbBlink { 0%,100% { opacity:1; } 50% { opacity:0; } }
.htb-line { font-family:'JetBrains Mono','Fira Code','Courier New',monospace; font-size:.82rem; line-height:1.7; white-space:pre; }
.htb-line--cmd { color:var(--color-text); }
.htb-line--out { background:linear-gradient(90deg,#FFD700,#FFA500,#FFD700); background-size:200% auto; -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; animation:goldShimmer 2s linear infinite; }
@keyframes goldShimmer { 0%{background-position:0% center} 100%{background-position:200% center} }
@media(max-width:768px){.htb-body{padding:1rem 1.2rem;}.htb-path{display:none;}.htb-line{font-size:.72rem;}}
.he-wrap{width:460px;background:#0A0814;border:1px solid rgba(155,127,232,0.2);border-radius:10px;overflow:hidden;box-shadow:0 0 80px rgba(91,45,142,0.2),inset 0 1px 0 rgba(255,255,255,0.04);animation:edFloat 7s ease-in-out infinite;font-family:'JetBrains Mono','Fira Code','Courier New',monospace;}
@keyframes edFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.he-bar{display:flex;align-items:center;gap:.8rem;padding:.65rem 1rem;background:rgba(255,255,255,0.025);border-bottom:1px solid rgba(155,127,232,0.12);}
.he-dots{display:flex;gap:5px}.he-dot{width:10px;height:10px;border-radius:50%}.he-dot.r{background:#FF5F57}.he-dot.y{background:#FFBD2E}.he-dot.g{background:#28C840}
.he-tabs{display:flex;gap:.2rem;flex:1}.he-tab{font-size:.6rem;padding:.25rem .7rem;border-radius:4px 4px 0 0;color:rgba(240,236,255,0.3);cursor:pointer;transition:.2s;border:1px solid transparent;border-bottom:none;letter-spacing:.3px}.he-tab.active{color:var(--color-text);background:rgba(155,127,232,0.08);border-color:rgba(155,127,232,0.18);}
.he-status{font-size:.58rem;letter-spacing:1px;color:#C9A84C;margin-left:auto;transition:color .4s}
.he-body{display:flex;padding:1rem 0;height:300px;overflow:hidden}.he-nums{padding:0 .8rem;min-width:36px;border-right:1px solid rgba(155,127,232,0.07);display:flex;flex-direction:column;gap:.05rem}.he-num{font-size:.68rem;color:rgba(240,236,255,0.12);text-align:right;line-height:1.75}
.he-code{padding:0 1.2rem;flex:1;overflow:hidden;display:flex;flex-direction:column;gap:.05rem}.he-line{font-size:.72rem;line-height:1.75;white-space:pre;animation:lineSlide .12s ease-out forwards}
@keyframes lineSlide{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:none}}
@media(max-width:1200px){.he-wrap{width:380px}}
@media(max-width:768px){
  .he-wrap{display:block;width:100%;max-width:100%;animation:none;transform:none;margin-top:0;border-radius:8px;height:280px;overflow:hidden}
  .he-body{height:220px;overflow:hidden;flex-shrink:0}
  .he-line{font-size:.65rem}
  .he-tab{font-size:.55rem;padding:.2rem .5rem}
}