/* ===== screen-hero.css — экран 1: свайп для подключения ===== */

.screen-hero .robot-wrap { transition: none; }

.screen-hero .stage {
    flex: 0 0 auto;
    justify-content: flex-start;
    padding-top: clamp(16px, 5vh, 44px);
  }

.screen-hero .bottom {
    margin-bottom: auto;
  }

.swipe-track {
    position:relative;
    width:100%;
    height:58px;
    border-radius:100px;
    background: var(--surface);
    border:1px solid var(--surface-border);
    display:flex;
    align-items:center;
    overflow:hidden;
    touch-action:none;
    user-select:none;
  }

.swipe-fill {
    position:absolute;
    left:0; top:0; bottom:0;
    width:58px;
    border-radius:100px;
    background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
    pointer-events:none;
  }

.swipe-label {
    position:absolute; left:0; right:0; text-align:center;
    font-family:'Chakra Petch', sans-serif;
    font-size:14px; font-weight:600; color: var(--text-primary);
    letter-spacing: 0.02em;
    pointer-events:none;
  }

.swipe-chevrons {
    position:absolute; right:20px; top:50%; transform:translateY(-50%);
    display:flex; gap:2px; color: var(--text-muted); pointer-events:none;
  }

.swipe-chevrons svg { width:14px; height:14px; opacity: 0.3; animation: chevron-flow 1.2s ease-in-out infinite; }

.swipe-chevrons svg:nth-child(1) { animation-delay: 0s; }

.swipe-chevrons svg:nth-child(2) { animation-delay: 0.18s; }

@keyframes chevron-flow {
    0%{ opacity: 0.25; transform: translateX(0); }
    40%{ opacity: 1; transform: translateX(3px); }
    80%{ opacity: 0.25; transform: translateX(5px); }
    100%{ opacity: 0.25; transform: translateX(0); }
  }

.swipe-thumb {
    position:absolute; left:4px; top:4px;
    width:50px; height:50px; border-radius:50%;
    background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
    display:flex; align-items:center; justify-content:center;
    box-shadow: 0 6px 18px -4px rgba(124,92,252,0.7);
    cursor:grab; z-index:2;
  }

.swipe-thumb svg { width:20px; height:20px; color:#fff; }

.swipe-hint {
    text-align:center;
    font-family:'Share Tech Mono', monospace;
    font-size:11px; letter-spacing:0.02em; color: var(--text-muted);
    margin-top: clamp(12px, 2.2vh, 20px);
  }