:where([class^="ri-"])::before { content: "\f3c2"; }
body {
font-family: 'Space Grotesk', sans-serif;
background-color: #070b1a;
overflow-x: hidden;
}
.space-bg {
    background: linear-gradient(to bottom, #070b1a, #0f1a3a);
    position: relative;
    overflow: hidden;
}

#stars-container {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
.star {
position: absolute;
width: 2px;
height: 2px;
background-color: white;
border-radius: 50%;
opacity: 0;
animation: twinkle 5s infinite;
}
@keyframes twinkle {
0% { opacity: 0; }
50% { opacity: 1; }
100% { opacity: 0; }
}
.meteor-container {
    position: relative;
    width: 300px;
    height: 300px;
    margin: 0 auto;
    transform-origin: center;
}

@media (max-width: 640px) {
    .meteor-container {
        width: 70vw;
        height: 70vw;
    }
}
.meteor {
width: 100%;
height: 100%;
position: relative;
animation: pulse 3s infinite alternate;
}
@keyframes pulse {
0% { transform: scale(1); filter: brightness(1); }
100% { transform: scale(1.05); filter: brightness(1.2); }
}
.meteor-trail {
position: absolute;
width: 150px;
height: 5px;
background: linear-gradient(90deg, rgba(255,107,43,0), rgba(255,107,43,0.8));
border-radius: 50%;
opacity: 0;
transform: rotate(45deg);
filter: blur(2px);
animation: trail 2s infinite;
}
@keyframes trail {
0% { opacity: 0; transform: translateX(-100px) translateY(-100px) rotate(45deg); }
30% { opacity: 0.8; }
100% { opacity: 0; transform: translateX(100px) translateY(100px) rotate(45deg); }
}
.glow {
position: absolute;
width: 100%;
height: 100%;
background: radial-gradient(circle, rgba(255,107,43,0.3) 0%, rgba(255,107,43,0) 70%);
border-radius: 50%;
animation: glow 4s infinite alternate;
}
@keyframes glow {
0% { opacity: 0.5; transform: scale(1.2); }
100% { opacity: 0.8; transform: scale(1.5); }
}
.btn {
position: relative;
overflow: hidden;
transition: all 0.3s ease;
}
.btn::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 70%);
transform: scale(0);
transition: transform 0.5s ease-out;
border-radius: 50%;
z-index: -1;
}
.btn:hover::before {
transform: scale(1);
}
.btn:hover {
transform: translateY(-3px);
box-shadow: 0 10px 20px rgba(140, 82, 255, 0.3);
}
.contract-box {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
transition: all 0.3s ease;
}
.contract-box:hover {
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.copy-btn {
transition: all 0.3s ease;
}
.copy-btn:hover {
background-color: rgba(255, 255, 255, 0.1);
}
.expand-btn {
transition: all 0.3s ease;
}
.story-container {
max-height: 0;
overflow: hidden;
transition: max-height 0.5s ease;
}
.story-container.expanded {
max-height: 2000px;
}
.rotate-icon {
transition: transform 0.3s ease;
}
.rotate-icon.rotated {
transform: rotate(180deg);
}