/* --- Base & Font --- */
body {
    font-family: 'Inter', sans-serif;
    background-color: #0c0a14;
    color: #e2e2e2;
    overflow: hidden;
}

/* --- Interactive Aurora Background --- */
.aurora-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 150vw;
    height: 150vh;
    background: radial-gradient(circle, rgba(139, 92, 246, 0.25), rgba(192, 38, 211, 0.1), transparent 60%);
    filter: blur(100px);
    z-index: 1; /* Above starfield */
    transition: transform 0.2s ease-out;
}

/* --- Floating Particles Effect --- */
@keyframes float {
    0% { transform: translateY(0px); opacity: 0; }
    50% { opacity: 0.8; }
    100% { transform: translateY(-100vh); opacity: 0; }
}

.particles-container {
    position: absolute;
    inset: 0;
    z-index: 2; /* Above aurora */
    overflow: hidden;
}

.particle {
    position: absolute;
    border-radius: 50%;
    animation: float linear infinite;
    bottom: -50px;
}

.particle:nth-child(1) { left: 10%; width: 4px; height: 4px; animation-duration: 15s; animation-delay: -2s; background-color: rgba(192, 38, 211, 0.7); }
.particle:nth-child(2) { left: 25%; width: 6px; height: 6px; animation-duration: 20s; animation-delay: -5s; background-color: rgba(236, 72, 153, 0.7); }
.particle:nth-child(3) { left: 40%; width: 3px; height: 3px; animation-duration: 25s; animation-delay: 0s; background-color: rgba(139, 92, 246, 0.7); }
.particle:nth-child(4) { left: 55%; width: 3px; height: 3px; animation-duration: 38s; animation-delay: -8s; background-color: rgba(192, 38, 211, 0.5); }
.particle:nth-child(5) { left: 70%; width: 2px; height: 2px; animation-duration: 42s; animation-delay: -3s; background-color: rgba(236, 72, 153, 0.5); }
.particle:nth-child(6) { left: 85%; width: 2px; height: 2px; animation-duration: 36s; animation-delay: -10s; background-color: rgba(139, 92, 246, 0.5); }
.particle:nth-child(7) { left: 5%; width: 1px; height: 1px; animation-duration: 51s; animation-delay: -6s; background-color: rgba(192, 38, 211, 0.3); }
.particle:nth-child(8) { left: 95%; width: 1px; height: 1px; animation-duration: 54s; animation-delay: -1s; background-color: rgba(236, 72, 153, 0.3); }
.particle:nth-child(9) { left: 50%; width: 1px; height: 1px; animation-duration: 49s; animation-delay: -4s; background-color: rgba(139, 92, 246, 0.3); }
.particle:nth-child(10) { left: 20%; width: 2px; height: 2px; animation-duration: 53s; animation-delay: -9s; background-color: rgba(192, 38, 211, 0.3); }
.particle:nth-child(11) { left: 33%; width: 2px; height: 2px; animation-duration: 33s; animation-delay: -7s; background-color: rgba(139, 92, 246, 0.5); }
.particle:nth-child(12) { left: 66%; width: 3px; height: 3px; animation-duration: 28s; animation-delay: -12s; background-color: rgba(236, 72, 153, 0.6); }
.particle:nth-child(13) { left: 77%; width: 1px; height: 1px; animation-duration: 55s; animation-delay: -15s; background-color: rgba(192, 38, 211, 0.4); }
.particle:nth-child(14) { left: 15%; width: 2px; height: 2px; animation-duration: 40s; animation-delay: -4s; background-color: rgba(139, 92, 246, 0.6); }
.particle:nth-child(15) { left: 90%; width: 3px; height: 3px; animation-duration: 22s; animation-delay: -11s; background-color: rgba(236, 72, 153, 0.7); }

/* --- Subtle noise texture --- */
body::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 3;
    opacity: 0.06;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAUVBMVEWFhYWDg4N3d3dtbW17e3t1dXWBgYGHh4d5eXlzc3OLi4ubm5uVlZWPj4+NjY19fX2JiYl/f39ra2uRkZGZmZlpaWmXl5dvb29xcXGTk5NnZ2c8TV1mAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAABnSURBVEjH7dYxCgAgEAPB8IlFR8sL/v9/wlddKBPHyJTCGS1S4P91eSssgLPAFTaA2gPgK9gC+V9gL4A2YFwYgOK8dwJgHPiEAUdGVRf21bQ8hrjL+VRwDDB4GgA0fwAARsCRD+Z/kAZs2wAAAABJRU5ErkJggg==');
}

/* --- Gradient Text --- */
.gradient-text {
    background: linear-gradient(90deg, #ff8d4d, #e55c94, #bf5ff0);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
}

.serif-italic {
    font-family: 'Playfair Display', serif;
    font-style: italic;
}

/* --- Content Entrance Animation --- */
@keyframes fade-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.fade-in {
    animation: fade-in 0.8s ease-out forwards;
}