/* ===== layout.css — общий каркас экранов: topbar, logo, stage, bubble ===== */

.screen {
    position:absolute;
    inset:0;
    display:none;
    flex-direction:column;
    z-index:1;
  }

.screen.active { display:flex; }

.topbar {
    position:relative;
    z-index:2;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding: clamp(18px, 5vw, 26px) clamp(18px, 5vw, 26px) 0;
    min-height: 62px;
  }

.logo {
    display:flex; align-items:center; gap:8px;
    font-family:'Orbitron', sans-serif;
    font-weight:700; font-size:15px;
    letter-spacing:0.04em;
    text-transform:uppercase;
  }

.logo-dot {
    width:8px; height:8px; border-radius:50%;
    background: linear-gradient(135deg, var(--accent-1), var(--accent-neon));
    box-shadow: 0 0 10px var(--accent-1);
  }

.stage {
    position:relative;
    z-index:2;
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding: 0 clamp(20px, 6vw, 32px);
    gap: clamp(14px, 3vh, 26px);
  }

.bubble {
    position:relative;
    background: var(--surface);
    border:1px solid var(--surface-border);
    backdrop-filter: blur(10px);
    padding: clamp(10px, 3vw, 14px) clamp(14px, 4vw, 20px);
    border-radius: 18px;
    font-family:'Chakra Petch', sans-serif;
    font-weight:500;
    font-size: clamp(13px, 3.6vw, 15px);
    color: var(--text-primary);
    max-width: min(280px, 78%);
    text-align:center;
    line-height:1.5;
    animation: bubble-in 0.6s ease-out;
  }

.bubble::after {
    content:"";
    position:absolute;
    left:50%; bottom:-7px;
    transform: translateX(-50%) rotate(45deg);
    width:14px; height:14px;
    background: rgba(255,255,255,0.08);
    border-right:1px solid var(--surface-border);
    border-bottom:1px solid var(--surface-border);
    backdrop-filter: blur(10px);
  }

@keyframes bubble-in { from{ opacity:0; transform: translateY(8px) scale(0.96); } to{ opacity:1; transform:none; } }

.signal-link {
    position:relative; z-index:1;
    width:40px; height:24px;
    display:flex; align-items:flex-end; justify-content:center;
  }

.signal-link svg { width:100%; height:100%; overflow:visible; }

.signal-arc { transform-box: fill-box; transform-origin: 50% 100%; animation: signal-pulse 1.4s ease-in-out infinite; }

.signal-arc:nth-child(1) { animation-delay: 0.3s; }

.signal-arc:nth-child(2) { animation-delay: 0.15s; }

.signal-arc:nth-child(3) { animation-delay: 0s; }

@keyframes signal-pulse {
    0%{ opacity:0; transform: translateY(4px) scale(0.85); }
    35%{ opacity:1; transform: translateY(0) scale(1); }
    70%{ opacity:1; }
    100%{ opacity:0; transform: translateY(-2px) scale(1.05); }
  }

@keyframes beacon-pulse { 0%,100%{ opacity:0.35; transform: scale(0.9); } 50%{ opacity:0.85; transform: scale(1.3); } }

@keyframes engine-pulse { 0%,100%{ opacity:0.5; transform: scale(0.85); } 50%{ opacity:1; transform: scale(1.15); } }

@keyframes vpn-scroll { 0%{ transform: translateX(-150px); } 100%{ transform: translateX(0px); } }