/* THEME 3: COSMIC DARK */
:root {
    --bg-color: #000000;
    --card-bg: #111111;
    --card-border: #222222;
    --text-heading: #ffffff;
    --text-body: #cccccc;
    --accent-1: #be185d; 
    --accent-2: #8b5cf6;
    --font-heading: 'Orbitron', sans-serif;
    --font-body: 'Space Grotesk', sans-serif;
}
body {
    font-family: var(--font-body);
    background-color: var(--bg-color);
    color: var(--text-body);
    overflow-x: hidden; /* Prevent horizontal scrollbar from animations */
}

/* Animated Starfield Background */
@keyframes move-stars {
    from { transform: translateY(0px); }
    to   { transform: translateY(-2000px); }
}

.stars, .stars2, .stars3 {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 2000px; /* Taller than viewport to allow for vertical animation */
    background-repeat: repeat;
    background-size: cover;
    z-index: -1;
}

.stars {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Cdefs%3E%3Cstyle%3E .star%7B fill:white; animation: sparkle 2s ease-in-out infinite; %7D @keyframes sparkle%7B 0%25,100%25 %7B opacity: 0.5; %7D 50%25 %7B opacity: 1; %7D %7D %3C/style%3E%3C/defs%3E%3Cg class='star'%3E%3Ccircle cx='10%25' cy='10%25' r='1'/%3E%3Ccircle cx='50%25' cy='20%25' r='0.5'/%3E%3Ccircle cx='80%25' cy='15%25' r='1'/%3E%3Ccircle cx='30%25' cy='30%25' r='0.5'/%3E%3Ccircle cx='70%25' cy='40%25' r='1'/%3E%3Ccircle cx='90%25' cy='35%25' r='0.5'/%3E%3Ccircle cx='20%25' cy='55%25' r='1'/%3E%3Ccircle cx='60%25' cy='65%25' r='0.5'/%3E%3Ccircle cx='85%25' cy='60%25' r='1'/%3E%3Ccircle cx='40%25' cy='80%25' r='0.5'/%3E%3Ccircle cx='75%25' cy='85%25' r='1'/%3E%3Ccircle cx='15%25' cy='95%25' r='0.5'/%3E%3C/g%3E%3C/svg%3E");
    animation: move-stars 50s linear infinite;
}

.stars2 {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Cdefs%3E%3Cstyle%3E .star%7B fill:%23cccccc; animation: sparkle 3s ease-in-out infinite; %7D @keyframes sparkle%7B 0%25,100%25 %7B opacity: 0.3; %7D 50%25 %7B opacity: 0.8; %7D %7D %3C/style%3E%3C/defs%3E%3Cg class='star'%3E%3Ccircle cx='5%25' cy='25%25' r='0.8'/%3E%3Ccircle cx='45%25' cy='5%25' r='0.4'/%3E%3Ccircle cx='85%25' cy='30%25' r='0.8'/%3E%3Ccircle cx='25%25' cy='45%25' r='0.4'/%3E%3Ccircle cx='65%25' cy='55%25' r='0.8'/%3E%3Ccircle cx='95%25' cy='50%25' r='0.4'/%3E%3Ccircle cx='15%25' cy='70%25' r='0.8'/%3E%3Ccircle cx='55%25' cy='80%25' r='0.4'/%3E%3Ccircle cx='90%25' cy='75%25' r='0.8'/%3E%3Ccircle cx='35%25' cy='95%25' r='0.4'/%3E%3C/g%3E%3C/svg%3E");
    animation: move-stars 100s linear infinite;
}

.stars3 {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Cdefs%3E%3Cstyle%3E .star%7B fill:%23999999; animation: sparkle 4s ease-in-out infinite; %7D @keyframes sparkle%7B 0%25,100%25 %7B opacity: 0.1; %7D 50%25 %7B opacity: 0.5; %7D %7D %3C/style%3E%3C/defs%3E%3Cg class='star'%3E%3Ccircle cx='2%25' cy='50%25' r='0.6'/%3E%3Ccircle cx='40%25' cy='15%25' r='0.3'/%3E%3Ccircle cx='78%25' cy='40%25' r='0.6'/%3E%3Ccircle cx='22%25' cy='60%25' r='0.3'/%3E%3Ccircle cx='68%25' cy='70%25' r='0.6'/%3E%3Ccircle cx='98%25' cy='65%25' r='0.3'/%3E%3Ccircle cx='12%25' cy='85%25' r='0.6'/%3E%3Ccircle cx='58%25' cy='95%25' r='0.3'/%3E%3C/g%3E%3C/svg%3E");
    animation: move-stars 150s linear infinite;
}
h1, h2, h3 {
    font-family: var(--font-heading); color: var(--text-heading); font-weight: 900; text-transform: uppercase;
}
.card {
    background: var(--card-bg); 
    border: 1px solid var(--card-border);
    position: relative;
}
.card:hover { 
    border-color: transparent;
    transform: translateY(-5px);
}
.card:hover::before {
    content: '';
    position: absolute;
    inset: -1px;
    background: linear-gradient(45deg, var(--accent-1), var(--accent-2));
    border-radius: inherit;
    z-index: -1;
    animation: rotate 3s linear infinite;
}
@keyframes rotate { 100% { transform: rotate(360deg); } }
.gradient-text { background: linear-gradient(45deg, var(--accent-1), var(--accent-2)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.cta-button { background: linear-gradient(45deg, var(--accent-1), var(--accent-2)); }
.cta-button:hover { box-shadow: 0 0 25px rgba(190, 24, 93, 0.5); }
.cursor-dot { background-color: var(--accent-1); }
.cursor-outline { border-color: var(--accent-1); }
.cursor-outline.hover { background-color: rgba(190, 24, 93, 0.3); }

/* Add a glow to the rotating border on card hover */
.card:hover::before {
    filter: blur(8px);
}

/* Apply gradient to the 'RECOMMENDED' tag */
.featured-card .absolute {
    background: linear-gradient(45deg, var(--accent-1), var(--accent-2));
    color: var(--text-heading);
}