/* ==========================================
   ROBOT LANDLORD - 2-LED TOP RIGHT CLUSTER
   ========================================== */

/* Only run animations and inject LEDs when the parent has this class */
.robot-landlord-mode fluent-card {
    position: relative;
    overflow: hidden;
    animation: border-glitch-rare 10.5s infinite;
}

    .robot-landlord-mode fluent-card > * {
        animation: content-blur-glitch 10.5s infinite;
    }

    /* LED 1 (Rightmost - primary, transforms into text on hover) */
    .robot-landlord-mode fluent-card::after {
        content: "";
        position: absolute;
        top: 10px;
        right: 12px;
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background-color: #00ff66;
        box-shadow: 0 0 5px #00ff66;
        animation: led-random-blink-1 4s infinite steps(1);
        z-index: 3;
        transition: all 0.3s ease;
    }

    /* LED 2 (Left of LED 1, perfectly on the same line) */
    .robot-landlord-mode fluent-card::before {
        content: "";
        position: absolute;
        top: 10px;
        right: 21px;
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background-color: #00ff66;
        box-shadow: 0 0 5px #00ff66;
        animation: led-random-blink-2 5.2s infinite steps(1);
        z-index: 2;
        transition: all 0.3s ease;
    }

    /* Hover and Focus States */
    .robot-landlord-mode fluent-card:hover,
    .robot-landlord-mode fluent-card:focus-within {
        border-color: #00f6ff;
        box-shadow: 0 0 12px rgba(0, 246, 255, 0.6);
        animation: none;
    }

        .robot-landlord-mode fluent-card:hover > *,
        .robot-landlord-mode fluent-card:focus-within > * {
            animation: none;
        }

        /* Primary indicator transforms into red "ROBOT LANDLORD" text on hover */
        .robot-landlord-mode fluent-card:hover::after,
        .robot-landlord-mode fluent-card:focus-within::after {
            content: "ROBOT LANDLORD";
            width: auto;
            height: auto;
            border-radius: 0;
            background-color: transparent;
            font-family: monospace;
            font-size: 7px;
            font-weight: 700;
            letter-spacing: 1px;
            color: #ff2a2a;
            text-shadow: 0 0 8px #ff2a2a, 0 0 2px #ffffff;
            box-shadow: none;
            animation: none;
        }

        /* Secondary LED completely disappears on hover */
        .robot-landlord-mode fluent-card:hover::before,
        .robot-landlord-mode fluent-card:focus-within::before {
            opacity: 0;
            visibility: hidden;
            animation: none;
        }

/* ==========================================
   KEYFRAME ANIMATIONS
   ========================================== */

@keyframes border-glitch-rare {
    0%, 70%, 75%, 100% {
        box-shadow: none;
    }

    72%, 73.5% {
        box-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
    }
}

@keyframes content-blur-glitch {
    0%, 70%, 75%, 100% {
        filter: blur(0px);
        transform: translate(0, 0);
        opacity: 1;
    }

    72% {
        filter: blur(4px);
        transform: translate(1px, -1px);
        opacity: 0.7;
    }

    73.5% {
        filter: blur(0px);
        transform: translate(0, 0);
        opacity: 1;
    }
}

@keyframes led-random-blink-1 {
    0%, 15%, 28%, 65%, 72%, 90% {
        background-color: #00ff66;
        box-shadow: 0 0 5px #00ff66;
        opacity: 1;
    }

    8%, 22%, 40%, 50%, 68%, 82%, 95% {
        background-color: transparent;
        box-shadow: none;
        opacity: 0;
    }
}

@keyframes led-random-blink-2 {
    0%, 10%, 35%, 48%, 75%, 88% {
        background-color: transparent;
        box-shadow: none;
        opacity: 0;
    }

    5%, 20%, 42%, 60%, 80%, 94% {
        background-color: #00ff66;
        box-shadow: 0 0 5px #00ff66;
        opacity: 1;
    }
}