/* Seriously Scientific: Cosmos ambient background layer */
/* A full viewport, fixed layer that sits behind all site content and fills */
/* the empty space between the header and the footer. */

/* Fallback base colour so the page never loses its background if the script */
/* does not run. The animated layer paints over this. */
html{background-color:#1A0C08;}

/* Body made transparent so the fixed cosmos layer shows through the dead */
/* space. Higher specificity than the theme rule so it wins regardless of */
/* load order. */
html body{background-color:transparent !important;}

/* Header and footer share one transparency so the cosmos shows evenly */
/* through both. Lower the two alpha values for more see-through, raise */
/* them for less. Keep header and footer matched so the effect stays even. */
.site-header-new{
    background:linear-gradient(145deg, rgba(61,35,24,0.68), rgba(26,12,8,0.62));
}
.rf-footer{
    background:linear-gradient(180deg, rgba(61,35,24,0.68), rgba(26,12,8,0.62));
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
}

.ss-cosmos{
    position:fixed;
    inset:0;
    z-index:-1;
    pointer-events:none;
    overflow:hidden;
    background-color:#1A0C08;
}

.ss-cosmos canvas.ss-dust{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    display:block;
}

/* Nebula wash: a few very soft, slowly drifting clouds of warm colour. */
.ss-neb{position:absolute;inset:0;}
.ss-neb-blob{
    position:absolute;
    border-radius:50%;
    filter:blur(48px);
    mix-blend-mode:screen;
    will-change:transform;
}
.ss-neb-b1{
    width:68%;height:68%;left:-12%;top:-16%;
    background:radial-gradient(circle at 50% 50%,rgba(205,90,36,0.60),transparent 60%);
    animation:ssDrift1 36s ease-in-out infinite;
}
.ss-neb-b2{
    width:64%;height:64%;right:-14%;top:18%;
    background:radial-gradient(circle at 50% 50%,rgba(74,159,212,0.45),transparent 62%);
    animation:ssDrift2 44s ease-in-out infinite;
}
.ss-neb-b3{
    width:54%;height:54%;left:20%;bottom:-20%;
    background:radial-gradient(circle at 50% 50%,rgba(226,144,0,0.40),transparent 60%);
    animation:ssDrift3 40s ease-in-out infinite;
}
@keyframes ssDrift1{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(7%,6%) scale(1.12);}}
@keyframes ssDrift2{0%,100%{transform:translate(0,0) scale(1.05);}50%{transform:translate(-6%,-5%) scale(0.95);}}
@keyframes ssDrift3{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(5%,-6%) scale(1.1);}}

/* Ember twinkle: off by default, kept here so it can be switched on later. */
.ss-emb{position:absolute;inset:0;}
.ss-spark{position:absolute;border-radius:50%;animation:ssTwinkle 4s ease-in-out infinite;}
@keyframes ssTwinkle{0%,100%{opacity:0.08;transform:scale(0.8);}50%{opacity:0.95;transform:scale(1.15);}}

/* Optional single motif, off by default. */
.ss-motif{position:fixed;right:26px;bottom:22px;z-index:-1;pointer-events:none;opacity:0.5;}

/* Accessibility: honour a visitor who has asked for reduced motion. */
@media (prefers-reduced-motion: reduce){
    .ss-neb-blob{animation:none;}
    .ss-spark{animation:none;opacity:0.5;}
}

/* Weaker devices: keep the nebula but stop it animating (a static blur is */
/* cheap, an animated blur is not) and thin it down. Dust still drifts. */
@media (max-width:700px){
    .ss-neb-blob{animation:none;filter:blur(34px);}
    .ss-motif{display:none;}
}

/* Tuning panel: only injected when the URL has ?cosmos=tune */
.ss-tune{
    position:fixed;
    right:16px;
    bottom:16px;
    z-index:99999;
    width:262px;
    background:rgba(26,12,8,0.94);
    border:1px solid rgba(255,255,255,0.16);
    border-radius:12px;
    padding:14px;
    font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
    color:#F7FAFC;
    box-shadow:0 10px 30px rgba(0,0,0,0.5);
}
.ss-tune h4{margin:0 0 10px;font-size:0.85rem;font-weight:800;}
.ss-tune .ss-line{display:flex;align-items:center;gap:8px;margin:8px 0;font-size:0.78rem;color:#E2E8F0;}
.ss-tune label{user-select:none;}
.ss-tune input[type=range]{accent-color:#CD5A24;flex:1;min-width:0;}
.ss-tune input[type=checkbox]{accent-color:#CD5A24;width:15px;height:15px;}
.ss-tune select{
    background:#1A0C08;color:#F7FAFC;border:1px solid rgba(255,255,255,0.2);
    border-radius:6px;padding:3px 6px;font-family:inherit;font-size:0.76rem;
}
.ss-tune textarea{
    width:100%;height:54px;margin-top:8px;background:#120806;color:#fadb67;
    border:1px solid rgba(255,255,255,0.16);border-radius:6px;
    font-family:monospace;font-size:0.68rem;padding:6px;resize:none;box-sizing:border-box;
}
.ss-tune .ss-hint{font-size:0.68rem;color:#E2E8F0;opacity:0.7;margin-top:6px;line-height:1.4;}
.ss-tune button.ss-copy{
    width:100%;margin-top:8px;padding:7px 10px;cursor:pointer;
    font-family:inherit;font-size:0.76rem;font-weight:600;
    color:#2a1206;background:#CD5A24;border:none;border-radius:6px;
    transition:background 0.2s ease;
}
.ss-tune button.ss-copy:hover{background:#D4742E;}