/* Scene Styles for House Scene */

body {
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: linear-gradient(to bottom, #1a1a2e 0%, #16213e 100%);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

svg {
    max-width: 100%;
    height: auto;
}

/* Connection status indicator */
#connection-status {
    position: fixed;
    top: 10px;
    right: 10px;
    padding: 8px 16px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    transition: background-color 0.3s, color 0.3s;
}

#connection-status.connected {
    background-color: #28a745;
    color: white;
}

#connection-status.disconnected {
    background-color: #dc3545;
    color: white;
}

/* Glow effect for lights */
.glowing {
    filter: url(#glow);
}

/* Window lit effect */
.window-lit {
    filter: url(#window-glow);
}

/* Tree lights */
[id^="tree-light-"] {
    transition: fill 0.2s ease-in-out, filter 0.2s ease-in-out;
}

/* Tree light glow when on */
[id^="tree-light-"].glowing {
    filter: url(#glow);
}

/* Tree light no glow when off (explicit) */
[id^="tree-light-"]:not(.glowing) {
    filter: none;
}

/* Window transition */
[id^="window-"] {
    transition: fill 0.3s ease-in-out;
}

/* Billboard text */
[id^="billboard-text-"] {
    transition: fill 0.2s ease-in-out;
}

/* Mark overlay styles */
.mark-overlay {
    pointer-events: none;
    animation: mark-fade-in 0.2s ease-out;
}

.mark-border {
    animation: mark-pulse 1s ease-in-out infinite;
}

.mark-label {
    text-shadow: 0 0 3px black;
}

@keyframes mark-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes mark-pulse {
    0%, 100% {
        opacity: 1;
        stroke-width: 2;
    }
    50% {
        opacity: 0.7;
        stroke-width: 3;
    }
}