/* --- Font Imports --- */
/* This rule imports the specified font families (Cinzel, Cormorant Garamond, Inter) from Google Fonts. */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;800&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;0,700;1,400;1,600&family=Inter:wght@300;400;500&display=swap');

/* --- Base Styles & Resets --- */
/* Universal box-sizing reset. This ensures that padding and borders are included in the element's total width and height. */
*, :after, :before { 
    box-sizing: border-box; 
    margin: 0; 
    padding: 0; 
    border: 0; 
}
/* Basic styles for the root HTML element. */
html { 
    scroll-behavior: smooth; /* Enables smooth scrolling for in-page links. */
    font-size: 16px; /* Sets the base font size for the document. */
    -webkit-text-size-adjust: 100%; /* Prevents automatic text inflation on mobile browsers. */
}
/* Default styles for the body of the document. */
body {
    background-color: #000; /* Sets a black background color. */
    color: #EAEAEA; /* Sets a light grey text color for high contrast. */
    font-family: 'Inter', sans-serif; /* Sets the default font for the entire page. */
    line-height: 1.6; /* Sets a comfortable line spacing for readability. */
    overflow-x: hidden; /* Prevents horizontal scrolling. */
    min-height: 100vh; /* Ensures the body takes up at least the full height of the viewport. */
}

/* --- Helper Classes --- */
/* A utility class to completely hide an element from both view and screen readers. */
.hidden { 
    display: none !important; 
}

/* --- Dynamic Background --- */
/* Styles for the container of the animated cosmic background. */
.cosmic-bg {
    position: fixed; /* Fixes the background relative to the viewport, so it doesn't scroll. */
    top: 0; 
    left: 0;
    width: 100%; 
    height: 100%;
    z-index: -1; /* Places the background behind all other content. */
    /* Creates a subtle gradient from a dark blue at the bottom to a darker shade at the top. */
    background: radial-gradient(ellipse at bottom, #1B2735 0%, #090A0F 100%);
    overflow: hidden; /* Prevents any content from spilling outside the background container. */
}

/* Styles for the nebula (colored cloud) effect in the background. */
.nebula-layer {
    position: absolute; /* Positions the nebula layer within the .cosmic-bg container. */
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0;
    /* Creates two soft, transparent colored circles to simulate distant nebulae. */
    background: 
        radial-gradient(circle at 20% 30%, rgba(76, 29, 149, 0.15) 0%, transparent 40%),
        radial-gradient(circle at 80% 70%, rgba(212, 175, 55, 0.08) 0%, transparent 40%);
    /* Applies the nebulaPulse animation to create a slow, pulsing effect. */
    animation: nebulaPulse 15s ease-in-out infinite alternate;
}

/* Defines the keyframes for the nebulaPulse animation. */
@keyframes nebulaPulse {
    /* The starting state of the animation. */
    0% { 
        transform: scale(1); /* Normal size. */
        opacity: 0.8; /* Slightly transparent. */
    }
    /* The ending state of the animation. */
    100% { 
        transform: scale(1.1); /* Slightly enlarged. */
        opacity: 1; /* Fully opaque. */
    }
}