/* Hide everything by default */
.show-fox,
.show-nova,
.show-avali {
    display: none;
}

/* thisfoxo.rocks - fox only */
.domain-fox .show-fox { display: inline-flex; }

/* nova-nyx - nova only */
.domain-nova .show-nova { display: inline-flex; }

/* avali-nyx - avali only */
.domain-avali .show-avali { display: inline-flex; }

/* Aurora wave along the top */
.domain-nova::before,
.domain-avali::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 40%;
    z-index: 9999;
    pointer-events: none;
    background: linear-gradient(
        180deg,
        rgba(80, 180, 255, 0.35) 0%,
                                rgba(120, 255, 200, 0.25) 25%,
                                rgba(200, 120, 255, 0.2) 55%,
                                transparent 100%
    );
    filter: blur(8px);
    animation: aurora-wave 5s ease-in-out forwards;
}

.domain-nova::after,
.domain-avali::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 30%;
    z-index: 9998;
    pointer-events: none;
    background: linear-gradient(
        180deg,
        rgba(200, 120, 255, 0.3) 0%,
                                rgba(80, 180, 255, 0.2) 40%,
                                transparent 100%
    );
    filter: blur(12px);
    animation: aurora-wave-2 5s ease-in-out forwards;
}

@keyframes aurora-wave {
    0%   { opacity: 0; transform: translateY(-100%) scaleY(1); }
    20%  { opacity: 1; transform: translateY(0%) scaleY(1.2); }
    35%  { opacity: 0.8; transform: translateY(-8%) scaleY(0.9); }
    50%  { opacity: 1; transform: translateY(5%) scaleY(1.1); }
    65%  { opacity: 0.9; transform: translateY(-5%) scaleY(1); }
    75%  { opacity: 1; transform: translateY(0%) scaleY(1); }
    100% { opacity: 0; transform: translateY(-100%) scaleY(1); }
}

@keyframes aurora-wave-2 {
    0%   { opacity: 0; transform: translateY(-100%) scaleX(1); }
    20%  { opacity: 0.6; transform: translateY(10%) scaleX(1.05); }
    40%  { opacity: 0.9; transform: translateY(-5%) scaleX(0.95); }
    60%  { opacity: 0.7; transform: translateY(8%) scaleX(1.03); }
    75%  { opacity: 0.8; transform: translateY(0%) scaleX(1); }
    100% { opacity: 0; transform: translateY(-100%) scaleX(1); }
}

.aurora-spark {
    display: none;
    position: fixed;
    top: -20px;  /* start above viewport */
    width: 3px;
    height: 3px;
    border-radius: 50%;
    z-index: 10000;
    pointer-events: none;
    opacity: 0;  /* hidden until animation starts */
}

.domain-nova .aurora-spark,
.domain-avali .aurora-spark {
    display: block;
}

.aurora-spark.s1 { left: 8%;  background: rgba(120, 255, 200, 0.9); animation: spark-1 2.4s ease-in 3.2s forwards; }
.aurora-spark.s2 { left: 18%; background: rgba(80, 180, 255, 0.9);  animation: spark-2 2.1s ease-in 3.5s forwards; }
.aurora-spark.s3 { left: 30%; background: rgba(200, 120, 255, 0.9); animation: spark-3 2.6s ease-in 3.3s forwards; }
.aurora-spark.s4 { left: 44%; background: rgba(120, 255, 200, 0.9); animation: spark-4 2.2s ease-in 3.7s forwards; }
.aurora-spark.s5 { left: 57%; background: rgba(80, 180, 255, 0.9);  animation: spark-5 2.5s ease-in 3.4s forwards; }
.aurora-spark.s6 { left: 68%; background: rgba(200, 120, 255, 0.9); animation: spark-6 2.0s ease-in 3.6s forwards; }
.aurora-spark.s7 { left: 79%; background: rgba(120, 255, 200, 0.9); animation: spark-7 2.3s ease-in 3.8s forwards; }
.aurora-spark.s8 { left: 90%; background: rgba(80, 180, 255, 0.9);  animation: spark-8 2.7s ease-in 4.0s forwards; }

/* each spark starts above the viewport (negative translateY) and falls differently */
@keyframes spark-1 {
    0%   { opacity: 0; transform: translateY(0px) scale(0); }
    10%  { opacity: 1; transform: translateY(5vh) scale(2); box-shadow: 0 0 10px 5px currentColor; }
    100% { opacity: 0; transform: translateY(65vh) translateX(10px) scale(0.5); }
}
@keyframes spark-2 {
    0%   { opacity: 0; transform: translateY(0px) scale(0); }
    10%  { opacity: 1; transform: translateY(5vh) scale(1.5); box-shadow: 0 0 8px 4px currentColor; }
    100% { opacity: 0; transform: translateY(72vh) translateX(-8px) scale(0.3); }
}
@keyframes spark-3 {
    0%   { opacity: 0; transform: translateY(0px) scale(0); }
    10%  { opacity: 1; transform: translateY(5vh) scale(2.5); box-shadow: 0 0 12px 6px currentColor; }
    100% { opacity: 0; transform: translateY(68vh) translateX(15px) scale(0.4); }
}
@keyframes spark-4 {
    0%   { opacity: 0; transform: translateY(0px) scale(0); }
    10%  { opacity: 1; transform: translateY(5vh) scale(3); box-shadow: 0 0 14px 7px currentColor; }
    100% { opacity: 0; transform: translateY(75vh) translateX(-12px) scale(0.2); }
}
@keyframes spark-5 {
    0%   { opacity: 0; transform: translateY(0px) scale(0); }
    10%  { opacity: 1; transform: translateY(5vh) scale(2); box-shadow: 0 0 10px 5px currentColor; }
    100% { opacity: 0; transform: translateY(70vh) translateX(-20px) scale(0.5); }
}
@keyframes spark-6 {
    0%   { opacity: 0; transform: translateY(0px) scale(0); }
    10%  { opacity: 1; transform: translateY(5vh) scale(1.8); box-shadow: 0 0 9px 4px currentColor; }
    100% { opacity: 0; transform: translateY(62vh) translateX(18px) scale(0.3); }
}
@keyframes spark-7 {
    0%   { opacity: 0; transform: translateY(0px) scale(0); }
    10%  { opacity: 1; transform: translateY(5vh) scale(2); box-shadow: 0 0 11px 5px currentColor; }
    100% { opacity: 0; transform: translateY(73vh) translateX(-15px) scale(0.4); }
}
@keyframes spark-8 {
    0%   { opacity: 0; transform: translateY(0px) scale(0); }
    10%  { opac