/* =============================================================
 * style.css - Helmet AI
 * Site styles + auth pages - single shared file
 * ============================================================= */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}


/* ---------- Hero typing animation ---------- */
#typing {
    white-space: pre-line;
}

.cursor {
    animation: blink 0.7s infinite;
}

@keyframes blink {
    50% {
        opacity: 0;
    }
}


/* ---------- Header nav links (animated underline) ---------- */
.nav-link {
    position: relative;
    padding: 0.5rem 1rem;
    transition: color 0.2s;
}
.nav-link::before,
.nav-link::after {
    content: "";
    position: absolute;
    width: 0;
    height: 2px;
    background: #9333ea;
    transition: width 0.3s ease;
}
.nav-link::before {
    left: 0;
    top: 0;
}

.nav-link::after {
    bottom: 0;
    right: 0;
    transition-delay: 0.15s;
}

.nav-link:hover::before,
.nav-link:hover::after {
    width: 100%;
}


/* ---------- Animated border (e.g. helmet image) ---------- */
.animated-border::before {
    content: "";
    position: absolute;
    left: -50%;
    top: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(
        #0b7d97 0deg,
        #9d00ff 90deg,
        #d50000 180deg,
        #9d00ff 270deg,
        #031469 360deg
    );
    filter: blur(10px);
    animation: rotate 2s linear infinite;
    z-index: 1;
}
.animated-border::after {
    content: "";
    position: absolute;
    inset: 10px;
    background: #fff;
    border-radius: 12px;
    z-index: 2;
}
.animated-border img {
    z-index: 3;
    position: relative;
}
@keyframes rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}


/* ---------- Auth pages background ---------- */
.auth-bg {
    background:
        radial-gradient(circle at 20% 20%, rgba(168, 85, 247, 0.18), transparent 40%),
        radial-gradient(circle at 80% 80%, rgba(236, 72, 153, 0.18), transparent 40%);
}


/* ---------- Auth cards ---------- */
.auth-card {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.auth-card:hover {
    transform: translateY(-3px);
}


/* ---------- Helmet status indicator dots ---------- */
.dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 6px;
}
.dot-active {
    background: #16a34a;
    box-shadow: 0 0 8px #16a34a;
}

.dot-offline {
    background: #dc2626;
}

.dot-maintenance {
    background: #f59e0b;
}


/* ---------- Battery bar (dashboard) ---------- */
.battery-bar {
    height: 6px;
    border-radius: 3px;
    background: #e5e7eb;
    overflow: hidden;
}
.dark .battery-bar {
    background: #1f2937;
}
.battery-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.4s ease;
}


/* ---------- Hard-hide override (beats Tailwind responsive `md:inline-block`) ---------- */
.is-hidden {
    display: none !important;
}


/* ---------- Fade-up entrance animation ---------- */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-up {
    animation: fadeUp 0.45s ease both;
}