/* ============================================
   SOLUS - Page-Specific Styles
   ============================================ */

/* ============================================
   SOLUS PAGE - Body & Background
   ============================================ */

.page-solus {
    --solus-accent: #c8d8e8; /* pale silver-white matching logo */
    background-image:
        linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
        url('../../solus/img/background.webp');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    color: #e0e0e0;
}

/* Additional sparse stars - you are alone out here */
.page-solus::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image:
        radial-gradient(2.5px 2.5px at 8% 12%, rgba(255, 255, 255, 1.0), transparent),
        radial-gradient(2px 2px at 34% 6%, rgba(255, 255, 255, 0.9), transparent),
        radial-gradient(3px 3px at 62% 20%, rgba(255, 255, 255, 1.0), transparent),
        radial-gradient(2px 2px at 81% 8%, rgba(255, 255, 255, 0.85), transparent),
        radial-gradient(2.5px 2.5px at 92% 42%, rgba(255, 255, 255, 0.95), transparent),
        radial-gradient(2px 2px at 18% 55%, rgba(255, 255, 255, 0.8), transparent),
        radial-gradient(3px 3px at 48% 78%, rgba(255, 255, 255, 0.9), transparent),
        radial-gradient(2px 2px at 74% 88%, rgba(255, 255, 255, 0.75), transparent);
    pointer-events: none;
    z-index: -2;
    animation: solusStarPulse 12s ease-in-out infinite alternate;
}

@keyframes solusStarPulse {
    0%   { opacity: 0.6; }
    100% { opacity: 1.0; }
}

/* Cold, lonely ambient glow */
.page-solus::after {
    content: '';
    position: fixed;
    inset: 0;
    background:
        radial-gradient(ellipse 70% 40% at 80% 10%, rgba(180, 210, 255, 0.06), transparent),
        radial-gradient(ellipse 50% 30% at 15% 75%, rgba(150, 190, 240, 0.04), transparent),
        radial-gradient(ellipse 30% 20% at 50% 50%, rgba(200, 220, 255, 0.03), transparent);
    pointer-events: none;
    z-index: -1;
    animation: solusGlow 40s ease-in-out infinite alternate;
}

@keyframes solusGlow {
    0%   { opacity: 0.6; transform: scale(1); }
    100% { opacity: 1.0; transform: scale(1.08); }
}

/* ============================================
   SOLUS - Drifting Debris
   Slowly moving fragments - you are alone
   ============================================ */

.solus-debris {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
}

.solus-debris-piece {
    position: absolute;
    left: var(--x, 50%);
    top: var(--y, 50%);
    width: 2px;
    height: 2px;
    background: rgba(200, 216, 232, 0.5);
    animation: solusDebrisDrift var(--dur, 35s) var(--delay, 0s) ease-in-out infinite alternate;
}

.solus-debris-piece--bright {
    width: 3px;
    height: 3px;
    background: rgba(220, 235, 250, 0.65);
    box-shadow: 0 0 3px rgba(200, 216, 232, 0.4);
}

@keyframes solusDebrisDrift {
    from { transform: translate(0, 0); opacity: 0.4; }
    to   { transform: translate(var(--dx, 15px), var(--dy, 10px)); opacity: 0.7; }
}

/* ============================================
   SOLUS PAGE - Theme Overrides
   ============================================ */

/* Strip card boxes - content floats on the background */
.page-solus .info-card,
.page-solus .story-panel,
.page-solus .status-item {
    background: none;
    border: none;
    border-radius: 0;
}

.page-solus .badge-jam {
    color: var(--jam-accent);
    border-color: var(--jam-accent);
}

.page-solus .info-card h3 {
    color: var(--solus-accent);
}

.page-solus .feature-item i {
    color: var(--solus-accent);
}

.page-solus .section-header h2 {
    color: var(--solus-accent);
}