/* styles.css — shared styles for all UI pages */

/* ============================================
   Frost / Glass
   ============================================ */
.frost {
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(20px) saturate(1.4);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 4px 24px rgba(0, 0, 0, 0.06);
}

.frost-strong {
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(24px) saturate(1.4);
    -webkit-backdrop-filter: blur(24px) saturate(1.4);
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 2px 12px rgba(0, 0, 0, 0.04);
}

/* ============================================
   Brand
   ============================================ */
.brand-gradient {
    background: linear-gradient(135deg, #2E8D19, #43BD28);
}

.brand-gradient-text {
    background: linear-gradient(135deg, #2E8D19, #43BD28);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}


/* ============================================
   Sonar rings
   ============================================ */
.sonar {
    position: fixed;
    z-index: 0;
    pointer-events: none;
}

.sonar-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(51, 155, 28, 0.3);
    box-shadow: 0 0 30px rgba(51, 155, 28, 0.15), 0 0 80px rgba(51, 155, 28, 0.08);
}

.sonar-ring {
    position: absolute;
    border-radius: 50%;
    border: 1.5px solid rgba(51, 155, 28, 0.13);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.ring-s1  { width: 60px;   height: 60px; }
.ring-s2  { width: 130px;  height: 130px; }
.ring-s3  { width: 200px;  height: 200px;  border-color: rgba(51, 155, 28, 0.12); }
.ring-s4  { width: 280px;  height: 280px;  border-color: rgba(51, 155, 28, 0.11); }
.ring-s5  { width: 370px;  height: 370px;  border-color: rgba(51, 155, 28, 0.10); }
.ring-s6  { width: 470px;  height: 470px;  border-color: rgba(51, 155, 28, 0.09); }
.ring-s7  { width: 580px;  height: 580px;  border-color: rgba(51, 155, 28, 0.08); }
.ring-s8  { width: 700px;  height: 700px;  border-color: rgba(51, 155, 28, 0.07); }
.ring-s9  { width: 830px;  height: 830px;  border-color: rgba(51, 155, 28, 0.06); }
.ring-s10 { width: 970px;  height: 970px;  border-color: rgba(51, 155, 28, 0.05); }
.ring-s11 { width: 1120px; height: 1120px; border-color: rgba(51, 155, 28, 0.04); }
.ring-s12 { width: 1280px; height: 1280px; border-color: rgba(51, 155, 28, 0.03); }
.ring-s13 { width: 1450px; height: 1450px; border-color: rgba(51, 155, 28, 0.02); }

.ring-pulse {
    position: absolute;
    border-radius: 50%;
    border: 2px solid rgba(51, 155, 28, 0.15);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    opacity: 1;
    animation: pulse 8s ease-out infinite;
}

@keyframes pulse {
    0% {
        width: 60px; height: 60px;
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
        border-color: rgba(51, 155, 28, 0.2);
    }
    100% {
        width: 1400px; height: 1400px;
        opacity: 0;
        transform: translate(-50%, -50%) scale(1);
        border-color: rgba(51, 155, 28, 0);
    }
}

/* Sonar positioning variants */
.sonar-page {
    top: 30%;
    left: 50%;
    transform: translateX(-50%);
}

.sonar-center-page {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* ============================================
   Sonar ring stagger delays (nth-child)
   Page layout: center(1) + 13 static rings(2-14) + 4 pulses(15-18)
   ============================================ */
.sonar-page .ring-pulse:nth-child(15) { animation-delay: 0s; }
.sonar-page .ring-pulse:nth-child(16) { animation-delay: 2s; }
.sonar-page .ring-pulse:nth-child(17) { animation-delay: 4s; }
.sonar-page .ring-pulse:nth-child(18) { animation-delay: 6s; }

/* Login layout: center(1) + 7 static rings(2-8) + 3 pulses(9-11) */
.sonar-center-page .ring-pulse:nth-child(9)  { animation-delay: 0s; }
.sonar-center-page .ring-pulse:nth-child(10) { animation-delay: 2.5s; }
.sonar-center-page .ring-pulse:nth-child(11) { animation-delay: 5s; }

/* ============================================
   htmx indicators
   ============================================ */
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator { display: inline-flex; }
.htmx-request.htmx-indicator { display: inline-flex; }

/* ============================================
   Connect page pills
   ============================================ */
.connect-pill.active,
.connect-pill.active:hover {
    background: #339B1C;
    color: white !important;
    border-color: #339B1C;
}

.connect-section.hidden {
    display: none;
}