/* Home only. Other pages retain their existing shared background. */
.moonlit-home {
    background: #080e18;
    isolation: isolate;
}

#moonlit-coast {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    background: #080e18 url('../images/moonlit-coast.webp') center / cover no-repeat;
    contain: strict;
}

#moonlit-coast canvas {
    display: block;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 800ms ease;
}

#moonlit-coast[data-state='running'] canvas,
#moonlit-coast[data-state='paused'] canvas {
    opacity: 1;
}

/* A quiet dark surface keeps the existing text legible over silver water. */
.moonlit-home header,
.moonlit-home .service-card {
    background: rgba(5, 12, 21, 0.66);
}

.moonlit-home .service-card:hover {
    background: rgba(5, 12, 21, 0.82);
}

.coast-motion-toggle {
    position: fixed;
    right: 14px;
    bottom: calc(14px + var(--coast-banner-height, 0px));
    z-index: 20;
    border: 1px solid rgba(202, 221, 238, 0.28);
    border-radius: 24px;
    padding: 9px 14px;
    background: rgba(7, 16, 28, 0.86);
    color: #d9e5ef;
    font: 12px/1.4 system-ui, sans-serif;
    cursor: pointer;
}

.coast-motion-toggle::before {
    content: '☾';
    margin-right: 7px;
    color: #e8dfc9;
}

.coast-motion-toggle:hover,
.coast-motion-toggle:focus-visible {
    border-color: #c9d7e4;
    background: #101e2d;
}

.coast-motion-toggle:focus-visible {
    outline: 2px solid #e6e0cc;
    outline-offset: 3px;
}

@media (max-aspect-ratio: 3/4) {
    #moonlit-coast {
        background-image: url('../images/moonlit-coast-mobile.webp');
    }
}

@media (prefers-reduced-motion: reduce) {
    #moonlit-coast canvas,
    .moonlit-home .service-card {
        animation: none;
        transition: none;
    }
}

@media print {
    #moonlit-coast,
    .coast-motion-toggle {
        display: none;
    }
}