/* Живая команда на сайте: помощник Атлас, роботы выглядывают и реагируют на клики */
.atlas-btn { position: fixed; right: 22px; bottom: 22px; z-index: 50; width: 72px; height: 72px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; background: #000; box-shadow: 0 0 0 2px var(--accent), 0 0 30px rgba(79,224,220,.55); transition: transform .25s; }
.atlas-btn img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.atlas-btn:hover { transform: scale(1.08) rotate(-4deg); }
.atlas-btn::after { content: ""; position: absolute; right: 2px; top: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); animation: ping 1.8s infinite; }
@keyframes ping { 50% { transform: scale(1.4); opacity: .4; } }
.bubble { position: fixed; right: 104px; bottom: 34px; z-index: 50; max-width: 300px; background: var(--ground-3); color: var(--ink); padding: 14px 16px; border-radius: 18px 18px 4px 18px; font-size: 15px; line-height: 1.45; box-shadow: 0 12px 40px rgba(0,0,0,.5); opacity: 0; transform: translateY(10px) scale(.96); transition: opacity .3s, transform .3s; pointer-events: none; }
.bubble.show { opacity: 1; transform: none; pointer-events: auto; }
.bubble b { color: var(--accent); }
.bubble .x { position: absolute; right: 8px; top: 6px; background: none; border: 0; color: var(--ink-2); cursor: pointer; font-size: 16px; }

.atlas-chat { position: fixed; right: 22px; bottom: 108px; z-index: 55; width: min(380px, calc(100vw - 32px)); max-height: min(560px, calc(100vh - 140px)); background: #0c1215; border-radius: 22px; box-shadow: 0 0 0 1px rgba(79,224,220,.25), 0 30px 80px rgba(0,0,0,.6); display: flex; flex-direction: column; overflow: hidden; opacity: 0; transform: translateY(16px) scale(.97); transform-origin: bottom right; transition: opacity .3s, transform .3s; pointer-events: none; }
.atlas-chat.open { opacity: 1; transform: none; pointer-events: auto; }
.atlas-chat header { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--ground-2); }
.atlas-chat header img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.atlas-chat header b { display: block; } .atlas-chat header span { font-size: 13px; color: var(--accent); }
.atlas-chat header button { margin-left: auto; background: none; border: 0; color: var(--ink-2); font-size: 20px; cursor: pointer; }
.atlas-chat .log { flex: 1; overflow: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.atlas-chat .m { max-width: 88%; padding: 11px 14px; border-radius: 16px; font-size: 15px; line-height: 1.45; animation: pop .3s; }
.atlas-chat .m.ai { background: var(--ground-3); border-bottom-left-radius: 4px; }
.atlas-chat .m.me { align-self: flex-end; background: var(--accent); color: var(--accent-ink); font-weight: 700; border-bottom-right-radius: 4px; }
.atlas-chat .qs { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 16px; }
.atlas-chat .qs button { background: var(--ground-2); color: var(--ink); border: 0; border-radius: 999px; padding: 9px 13px; font: 600 14px var(--font); cursor: pointer; }
.atlas-chat .qs button:hover { background: var(--accent); color: var(--accent-ink); }
@keyframes pop { from { opacity: 0; transform: translateY(8px); } }

/* робот выглядывает из-за края экрана */
.peek { position: fixed; z-index: 45; width: 130px; height: 130px; border-radius: 50%; overflow: hidden; cursor: pointer; border: 0; padding: 0; background: #000; box-shadow: 0 0 0 2px rgba(79,224,220,.6), 0 0 30px rgba(79,224,220,.35); transition: transform .6s cubic-bezier(.2,1.4,.4,1); }
.peek img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; }
.peek.left { left: 0; transform: translateX(-120%) rotate(-25deg); }
.peek.right { right: 0; transform: translateX(120%) rotate(25deg); }
.peek.left.in { transform: translateX(-28%) rotate(12deg); }
.peek.right.in { transform: translateX(28%) rotate(-12deg); }
.peek.in:hover { animation: wiggle .5s; }
.peek-say { position: fixed; z-index: 46; max-width: 240px; background: var(--ink); color: var(--ground); padding: 10px 14px; border-radius: 16px; font: 700 14px/1.35 var(--font); opacity: 0; transition: opacity .25s; pointer-events: none; }
.peek-say.show { opacity: 1; }
@keyframes wiggle { 25% { rotate: -8deg; } 75% { rotate: 8deg; } }

/* клик по роботу: прыжок и реплика */
.face { cursor: pointer; }
.face.jump { animation: jump .55s cubic-bezier(.3,1.6,.5,1); }
@keyframes jump { 40% { translate: 0 -22px; } }
.face .say { position: absolute; left: 12px; right: 12px; top: 12px; z-index: 3; background: var(--ink); color: var(--ground); font: 700 14px/1.35 var(--font); padding: 10px 12px; border-radius: 14px 14px 14px 4px; opacity: 0; transform: translateY(-6px); transition: opacity .25s, transform .25s; }
.face .say.show { opacity: 1; transform: none; }

/* глубина первого экрана за мышью */
.hero video, .hero .poster { transition: transform .4s ease-out; will-change: transform; }
.hero .wrap { transition: transform .4s ease-out; }

@media (max-width: 800px) {
  .atlas-btn { width: 60px; height: 60px; right: 14px; bottom: 14px; }
  .bubble { right: 84px; bottom: 22px; max-width: 220px; font-size: 14px; }
  .atlas-chat { right: 12px; bottom: 86px; }
  .peek { width: 96px; height: 96px; }
}
@media (prefers-reduced-motion: reduce) { .peek, .bubble, .atlas-chat { transition: none; } .face.jump { animation: none; } }

/* ===== фигурки героев без фона ===== */
.hero-atlas { position: absolute; right: 4vw; bottom: 0; height: 88vh; z-index: 1; pointer-events: auto; cursor: pointer; filter: drop-shadow(0 0 40px rgba(79,224,220,.35)); transition: transform .4s ease-out; }
.hero-atlas img { height: 100%; width: auto; animation: hover 6s ease-in-out infinite; }
.hero-atlas:hover img { filter: brightness(1.12); }
@keyframes hover { 50% { translate: 0 -10px; } }
@media (max-width: 900px) { .hero-atlas { right: -18vw; height: 62vh; opacity: .55; } }

.face { background: radial-gradient(circle at 50% 38%, rgba(79,224,220,.22), rgba(79,224,220,0) 60%), var(--ground-2); }
.face img.st, .face img.cr { position: absolute; left: 50%; bottom: 64px; height: 76%; width: auto; transform: translateX(-50%); object-fit: contain; transition: opacity .35s, transform .5s; filter: drop-shadow(0 18px 24px rgba(0,0,0,.5)); }
.face img.cr { opacity: 0; transform: translateX(-30%) rotate(4deg); }
.face:hover img.st { opacity: 0; transform: translateX(-70%) rotate(-4deg); }
.face:hover img.cr { opacity: 1; transform: translateX(-50%); }
.face:hover img { transform: translateX(-50%); }

.atlas .pics .pointer { position: absolute; left: -6%; bottom: -8%; height: 72%; width: auto; z-index: 3; filter: drop-shadow(0 0 30px rgba(79,224,220,.35)); pointer-events: none; }
@media (max-width: 800px) { .atlas .pics .pointer { left: -4%; height: 60%; } }

.plan.best { position: relative; overflow: visible; }
.plan-bot { position: absolute; right: -26px; top: -118px; height: 150px; width: auto; z-index: 3; animation: hover 4s ease-in-out infinite; filter: drop-shadow(0 10px 18px rgba(0,0,0,.5)); pointer-events: none; }
@media (max-width: 800px) { .plan-bot { right: 6px; top: -96px; height: 110px; } }

/* выглядывающие роботы: фигурка без рамки */
.peek { width: auto; height: 220px; border-radius: 0; background: none; box-shadow: none; overflow: visible; }
.peek img { width: auto; height: 100%; object-fit: contain; filter: drop-shadow(0 0 24px rgba(79,224,220,.4)); }
.peek.left { transform: translateX(-110%) rotate(-20deg); }
.peek.right { transform: translateX(110%) rotate(20deg); }
.peek.left.in { transform: translateX(-18%) rotate(10deg); }
.peek.right.in { transform: translateX(18%) rotate(-10deg); }
@media (max-width: 800px) { .peek { width: auto; height: 150px; } }

/* робот-носильщик идёт через экран */
.walker { position: fixed; bottom: 6px; left: 0; z-index: 44; height: 130px; pointer-events: auto; cursor: pointer; filter: drop-shadow(0 12px 20px rgba(0,0,0,.6)); }
.walker img { height: 100%; width: auto; animation: bob .5s ease-in-out infinite; }
.walker.go { animation: walk 9s linear forwards; }
/* картинки нарисованы лицом влево: идущего вправо разворачиваем, идущего влево — оставляем как есть */
.walker img { transform: scaleX(-1); }
.walker.back img { transform: none; }
.walker.back.go { animation-name: walkback; }
@keyframes walk { from { translate: -220px 0; } to { translate: calc(100vw + 40px) 0; } }
@keyframes walkback { from { translate: calc(100vw + 40px) 0; } to { translate: -220px 0; } }
@keyframes bob { 50% { translate: 0 -6px; rotate: 1.5deg; } }
@media (max-width: 800px) { .walker { height: 120px; } }
@media (prefers-reduced-motion: reduce) { .walker, .hero-atlas img, .plan-bot { animation: none; } }
/* подсказка у Атласа: видно, что на него можно нажать */
.atlas-tag { position: fixed; right: 100px; bottom: 44px; z-index: 49; background: var(--accent); color: var(--accent-ink); font: 800 13px/1 var(--font); padding: 9px 13px; border-radius: 999px; box-shadow: 0 8px 24px rgba(79,224,220,.35); cursor: pointer; animation: tagin .5s 2s both, nudge 3s 6s ease-in-out infinite; }
.atlas-tag::after { content: ""; position: absolute; right: -5px; top: 50%; width: 10px; height: 10px; background: var(--accent); transform: translateY(-50%) rotate(45deg); }
.atlas-tag.off { display: none; }
@keyframes tagin { from { opacity: 0; transform: translateX(14px); } }
@keyframes nudge { 0%, 80%, 100% { transform: none; } 85% { transform: translateX(-6px); } 90% { transform: none; } 95% { transform: translateX(-4px); } }
@media (max-width: 800px) { .atlas-tag { right: 84px; bottom: 32px; font-size: 12px; } }
@media (max-width: 900px) { .hero-atlas { display: none; } }
/* фигурки в карточках: у figure есть отступы по умолчанию — убираем, иначе карточка сжимается */
.cast .face { margin: 0; width: 100%; }
/* выглядывающие роботы не закрывают текст: выглядывают меньше, на узких экранах — только ходят по низу */
.peek.left.in { transform: translateX(-38%) rotate(10deg); }
.peek.right.in { transform: translateX(38%) rotate(-10deg); }
@media (max-width: 1200px) { .peek, .peek-say { display: none; } }
.cast .face img.st, .cast .face img.cr { top: 10px; bottom: 78px; height: auto; max-height: calc(100% - 88px); width: auto; max-width: 92%; margin: auto 0; }
.cast .face figcaption { padding-top: 30px; }
@media (min-width: 701px) and (max-width: 1050px) { .cast { grid-template-columns: repeat(3, 1fr); } }

/* Атлас и Ника — руководители команды */
.bosses { display: grid; grid-template-columns: 1fr 1fr 1.35fr; gap: 14px; margin: 0 0 18px; align-items: stretch; }
.boss { margin: 0; position: relative; border-radius: 22px; overflow: hidden; background: #0d1a1e; border: 1px solid rgba(79,224,220,.28); box-shadow: 0 0 40px rgba(79,224,220,.08); }
.boss img { display: block; width: 100%; height: 100%; aspect-ratio: 3/4; object-fit: cover; transition: transform .6s; }
.boss:hover img { transform: scale(1.04); }
.boss figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 50px 16px 14px; background: linear-gradient(transparent, rgba(4,11,13,.96)); }
.boss figcaption b { display: block; font-size: 22px; }
.boss figcaption span { font-size: 13px; opacity: .85; }
.boss-txt { align-self: center; padding: 6px 4px 6px 10px; }
.boss-txt .kind { color: var(--accent, #4fe0dc); font-weight: 800; font-size: 12px; text-transform: uppercase; letter-spacing: .1em; }
.boss-txt h3 { font-size: clamp(22px, 2.4vw, 30px); line-height: 1.15; margin: 10px 0 12px; }
.boss-txt .btn { margin-top: 8px; }
@media (max-width: 900px) { .bosses { grid-template-columns: 1fr 1fr; } .boss-txt { grid-column: 1 / -1; padding: 6px 2px; } }

/* ---------- лёгкий режим для телефонов и слабых устройств (28.10.2026) ----------
   На тач-экранах убираем то, что перерисовывается каждый кадр: зерно на весь экран, свет за курсором,
   анимированные тени и фильтры. Блоки ниже первого экрана браузер не рисует, пока до них не долистали. */
@media (hover: none), (max-width: 900px) {
  body::after, .spot, .walker { display: none !important; }
  .sky-mega, .sky-mega::before { animation: none !important; }
  .sky-mega { box-shadow: 0 0 40px rgba(255,140,40,.18) !important; }
  .step-bots img { animation: none !important; filter: none !important; }
  .hero h1, .glow { text-shadow: none !important; }
  .pult { box-shadow: none !important; }
  main > section:not(.hero) { content-visibility: auto; contain-intrinsic-size: auto 900px; }
}