/* Basic Reset & Body Styling */
/* Define a CSS variable for transition duration at the root level */
:root {
    --transition-duration: 0.6s; /* Default transition duration for smooth changes */
}

body {
    margin: 0; /* Remove default margin */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Preferred font stack */
    background: url('your-photo.jpg') no-repeat center center fixed; /* Background image */
    background-size: cover; /* Cover the entire viewport */
    overflow-x: hidden; /* Prevent horizontal scroll */
    position: relative; /* Needed for pseudo-element positioning */
    color: white; /* Default text color */
    /* Use the CSS variable for transition duration */
    transition: background var(--transition-duration) ease, color var(--transition-duration) ease;
}

/* Hide scrollbar for Chrome, Safari, Opera */
body::-webkit-scrollbar {
    display: none;
}
/* Hide scrollbar for IE, Edge, Firefox */
body {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}


/* Overlay for background image */
body::before {
    content: ""; /* Required for pseudo-elements */
    position: fixed; /* Fix to viewport */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* Semi-transparent black overlay - Changed to 50% */
    backdrop-filter: blur(4px); /* Blur the background image */
    z-index: -1; /* Place behind other content */
    /* Use the CSS variable for transition duration */
    transition: background var(--transition-duration) ease;
}

/* Dark Mode Styles */
.dark-mode::before {
    background: rgba(0, 0, 0, 0.9); /* Darker overlay in dark mode */
}
.dark-mode {
    background: #000; /* Solid black background in dark mode */
}

/* Optional: Class for a faster transition, can be applied via JS for a "boom" effect */
/* This overrides the --transition-duration variable for a quicker change */
.fast-transition {
    --transition-duration: 0.3s;
}

/* --- START: Preloader Specific Styles (ADDED) --- */
.preloader {
    position: fixed; /* Stays fixed on screen */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000; /* Solid black background for the preloader */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Vertically center content */
    align-items: center; /* Horizontally center content */
    z-index: 1000; /* Ensures it's on top of everything */
    opacity: 1; /* Starts fully visible */
    transition: opacity 0.5s ease-out, visibility 0.5s ease-out; /* Smooth fade-out */
    visibility: visible; /* Starts visible */
}

/* Hide preloader when JS sets opacity to 0 and display to none */
.preloader[style*="opacity: 0"] {
    visibility: hidden;
    pointer-events: none; /* Prevents clicks on hidden preloader */
}

.greeting-container {
    display: flex;
    flex-direction: column;
    align-items: center; /* Center horizontally within flex container */
    justify-content: center; /* Center vertically within flex container */
    height: 100%; /* Take full height of preloader */
    width: 100%; /* Take full width of preloader */
    position: relative; /* Crucial: Establishes positioning context for absolute children */
}

.greeting {
    color: #fff;
    font-weight: 500;
    opacity: 0; /* Starts hidden, JS animates visibility */
    position: absolute; /* Allows greetings to overlap */
    text-align: center; /* Ensures text itself is centered within its box */
    transition: opacity 0.3s ease; /* Smooth fade for greetings */

    /* --- IMPORTANT: Centering for Absolutely Positioned Elements --- */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Moves element back by half its own width/height */
    width: 90%; /* Max width to ensure text doesn't hit edges on small screens */
    max-width: 600px; /* Prevent it from getting too wide on very large screens */
    font-size: 3rem; /* Default for larger screens */
}

/* Media query for smaller screens: adjusts font size for greetings */
@media (max-width: 768px) {
    .greeting {
        font-size: 2rem; /* Reduced font size for tablets/larger phones */
    }
}

@media (max-width: 480px) {
    .greeting {
        font-size: 1.5rem; /* Further reduced for smaller phones */
    }
}

.logo {
    position: absolute;
    bottom: 40px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 1rem;
    opacity: 0; /* Starts hidden */
    animation: fadeIn 1s ease 2s forwards; /* Fades in after a delay */
    text-align: center; /* Center text if it wraps */
    width: 100%; /* Ensure it spans the width */
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
/* --- END: Preloader Specific Styles (ADDED) --- */


/* Main Container Styling */
.container {
    max-width: 600px; /* Maximum width of the content area */
    margin: 0 auto; /* Center the container horizontally */
    text-align: center; /* Center text within the container */
    padding: 40px 20px; /* Padding inside the container */
    position: relative; /* For z-index to work with body::before */
    z-index: 1; /* Ensure container is above the overlay */
}

/* Profile Image Styling */
.profile-img {
    width: 140px; /* Fixed width */
    height: 140px; /* Fixed height */
    border-radius: 50%; /* Make it circular */
    object-fit: cover; /* Crop image to fit without stretching */
    border: 4px solid white; /* White border around the image */
}

/* Heading (Name) Styling */
h1 {
    margin: 15px 0 5px; /* Margin around the heading */
    font-size: 2.5rem; /* Large font size */
}

/* Tech Stack Section */
.tech-stack {
    margin-top: 15px; /* Space above */
    display: flex; /* Use flexbox for layout */
    flex-wrap: wrap; /* Allow items to wrap to the next line */
    justify-content: center; /* Center items horizontally */
    gap: 12px; /* Space between items */
}

/* Individual Tech Stack Tags */
.tech-stack span {
    background: rgba(255, 255, 255, 0.1); /* Semi-transparent white background */
    padding: 6px 12px; /* Padding inside the span */
    border-radius: 20px; /* Rounded corners for pill shape */
    font-size: 0.9rem; /* Smaller font size */
}

/* Buttons Section */
.buttons {
    margin-top: 25px; /* Space above */
    display: flex; /* Use flexbox */
    flex-direction: column; /* Stack buttons vertically */
    gap: 15px; /* Space between buttons */
    align-items: center; /* Center buttons horizontally */
}

/* Styling for all buttons (links and toggle button) */
/* This block defines the *generic* button style, which the .button class will now also share in its idle state */
.buttons a, .toggle-dark, .buttons-style {
    background: rgba(255, 255, 255, 0.15); /* Semi-transparent white background */
    color: white; /* Text color */
    padding: 12px 24px; /* Padding */
    border-radius: 30px; /* More rounded corners */
    text-decoration: none; /* Remove underline from links */
    display: inline-flex; /* Allow icon and text to align */
    align-items: center; /* Vertically align icon and text */
    gap: 10px; /* Space between icon and text */
    border: 1px solid rgba(255,255,255,0.2); /* Subtle border */
    transition: all 0.3s ease; /* Smooth transitions for hover effects */
    cursor: pointer; /* Indicate button is clickable */
    font-size: 1rem; /* Default font size */
}

/* Hover effect for generic buttons */
.buttons a:hover, .toggle-dark:hover, .buttons-style:hover {
    background: rgba(255, 255, 255, 0.25); /* Slightly more opaque on hover */
}


/* --- START: Specific Styling for the .button class (About Me button) --- */
/* This class now inherits the generic button styles for its idle state */
.button {
    /* Removed min-width and min-height to allow sizing by padding and font-size */
    display: inline-flex; /* Ensure it behaves like other buttons for padding/sizing */
    align-items: center; /* Align content vertically */
    gap: 10px; /* Space for potential icon, consistent with others */
    font-family: 'Nunito', sans-serif; /* Ensure Nunito font is used for this button */
    font-size: 1rem; /* Changed to match generic buttons */
    text-transform: uppercase;
    letter-spacing: 1.3px;
    font-weight: 700;
    color: #fff;
    /* Default state: semi-transparent white background, subtle white border - matching other buttons */
    background: rgba(255, 255, 255, 0.15); /* Match generic buttons */
    border: 1px solid rgba(255,255,255,0.2); /* Match generic buttons */
    border-radius: 900px; /* Fully rounded, overriding 30px from generic */
    text-decoration: none;
    cursor: pointer;
    outline: none;
    position: relative;
    padding: 12px 24px; /* Changed to match generic buttons */
    transition: all 0.3s ease-in-out 0s; /* Keep its own transition */
    overflow: hidden; /* Crucial for clipping the expanding circle */
    z-index: 1; /* Ensure button content is above pseudo-elements */
}

/* Instagram-like hover for the .button class */
.button:hover,
.button:focus {
    transform: translateY(-6px);
    color: #fff; /* Keep text white on hover */
    /* Solid purple background on hover */
    background: #583aba; /* Your specified purple color */
    border: 2px solid transparent; /* Hide default border on hover, as gradient border will be active */
    box-shadow: 0 0 60px rgba(88, 58, 186, 0.6); /* Adjusted shadow for new purple */
}

/* Gradient Border Effect using ::before */
.button::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 900px; /* Match button border-radius */
    padding: 2px; /* This creates the thickness of the gradient border */
    background: linear-gradient(45deg, #fff, #eee, #ddd); /* White gradient for border */
    /* This complex mask property creates the gradient border effect */
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0; /* Hidden by default */
    transition: opacity 0.3s ease-in-out 0s;
    z-index: -1; /* Behind the button content */
}

.button:hover::before,
.button:focus::before {
    opacity: 1; /* Show gradient border on hover/focus */
}

/* ::after pseudo-element for the expanding circle animation */
.button::after {
    content: '';
    width: 30px;
    height: 30px;
    border-radius: 50%;
    /* White gradient border for the expanding circle */
    border: 2px solid;
    border-image: linear-gradient(to right, #fff, #eee, #ddd) 1; /* White gradient for the circle border */
    position: absolute;
    z-index: -1; /* Behind the button content */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: ring 2s infinite; /* Changed speed to 2s (0.75x of 1.5s) */
}

.button:hover::after,
.button:focus::after {
    animation: none; /* Stop animation on hover/focus */
    display: none; /* Hide the circle on hover/focus */
}

@keyframes ring {
    0% {
        width: 30px;
        height: 30px;
        opacity: 0.7; /* Start more visible */
    }
    100% {
        width: 300px;
        height: 300px;
        opacity: 0;
    }
}
/* --- END: Specific Styling for the .button class --- */


/* Terminal Section Styling */
.terminal {
    background: rgba(0, 0, 0, 0.4); /* Dark semi-transparent background */
    padding: 25px; /* Padding */
    border-radius: 10px; /* Rounded corners */
    margin-top: 30px; /* Space above */
    font-family: monospace; /* Monospace font for terminal look */
    max-width: 100%; /* Ensure it fits within container */
    white-space: pre-line; /* Preserve line breaks from HTML */
    color: white; /* Text color */
    text-align: left; /* Align terminal text to the left */
}

/* Quote Box Styling */
.quote {
    margin-top: 40px; /* Space above */
    font-style: italic; /* Italic text */
    font-size: 1rem; /* Font size */
    transition: opacity 0.5s ease-in-out; /* Smooth fade for quote changes */
}

/* Projects Section Styling */
.projects {
    margin-top: 40px; /* Space above */
    background: rgba(0,0,0,0.3); /* Semi-transparent dark background */
    padding: 20px; /* Padding */
    border-radius: 10px; /* Rounded corners */
}

/* AI Project Card Specific Styling */
.project-card.ai-coming-soon {
    background: rgba(255, 255, 255, 0.04); /* Very subtle background */
    border: 1px dashed rgba(255, 255, 255, 0.2); /* Dashed border */
    padding: 25px; /* Padding */
    border-radius: 12px; /* Rounded corners */
    margin-top: 30px; /* Space above */
    text-align: center; /* Center text */
    animation: pulse-shadow 2s infinite alternate; /* Pulsing shadow animation */
    /* Nested element styles for readability, can be moved out if preferred */
}
.project-card.ai-coming-soon h3 {
    color: white;
    margin-bottom: 12px;
}
.project-card.ai-coming-soon p {
    color: #ccc; /* Lighter grey text */
    font-style: italic;
    font-size: 0.95rem;
}
.project-card.ai-coming-soon .tease-box {
    margin-top: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}
.project-card.ai-coming-soon .dot {
    width: 8px;
    height: 8px;
    background: white;
    border-radius: 50%;
    animation: blink 1.2s infinite ease-in-out alternate;
}
.project-card.ai-coming-soon .dot:nth-child(2) { /* Apply animation delay to second dot */
    animation-delay: 0.2s;
}
.project-card.ai-coming-soon .dot:nth-child(3) { /* Apply animation delay to third dot */
    animation-delay: 0.4s;
}
.project-card.ai-coming-soon .text#aiTease {
    margin-left: 10px;
    color: white;
    font-family: monospace;
    font-size: 0.9rem;
}

/* Footer Styling */
footer {
    background: rgba(255, 255, 255, 0.05); /* Semi-transparent white background */
    color: white; /* Text color */
    text-align: center; /* Center text */
    padding: 20px 0; /* Vertical padding */
    margin-top: 50px; /* Space above */
    font-size: 0.95rem; /* Smaller font size */
    border-top: 1px solid rgba(255, 255, 255, 0.1); /* Top border */
}

.footer-links {
    display: flex;
    justify-content: center;
    gap: 25px;
    flex-wrap: wrap;
}

footer a {
    color: white;
    text-decoration: none;
    font-size: 1rem;
}
footer a:hover {
    text-decoration: underline; /* Underline on hover for footer links */
}

/* Keyframe Animations */
@keyframes blink {
    from { opacity: 0.2; } /* Start nearly invisible */
    to { opacity: 1; } /* End fully visible */
}

@keyframes pulse-shadow {
    from { box-shadow: 0 0 10px rgba(255,255,255,0.2); } /* Initial shadow */
    to { box-shadow: 0 0 20px rgba(255,255,255,0.4); } /* Larger, brighter shadow */
}


/* --- NEW: Parallax Section Styling --- */
.parallax-section {
    /* Set the background image for this section */
    background-image: url('parallax-bg.jpg'); /* REMEMBER TO CHANGE THIS TO YOUR IMAGE PATH */
    background-size: cover; /* Scale the background image to cover the entire container */
    background-position: center; /* Center the background image */
    background-repeat: no-repeat; /* Do not repeat the background image */

    /* THIS IS THE MAGIC FOR PARALLAX */
    background-attachment: fixed; /* This makes the background image fixed relative to the viewport, creating the parallax effect */

    min-height: 500px; /* Give the section a minimum height so the parallax effect is visible as you scroll */
    display: flex; /* Use flexbox to center content vertically and horizontally */
    align-items: center; /* Center content vertically */
    justify-content: center; /* Center content horizontally */
    text-align: center; /* Center text within the content box */
    color: white; /* Text color for content within parallax section */
    margin-top: 50px; /* Add some space above this section */
    position: relative; /* Needed for overlay */
    overflow: hidden; /* Important for some mobile browsers to prevent artifacts with fixed backgrounds */
}

/* Optional: Add an overlay to the parallax section for better text readability */
.parallax-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4); /* Semi-transparent black overlay */
    z-index: 1; /* Place above the background image but below the content */
}

/* Styling for the content within the parallax section */
.parallax-content {
    position: relative; /* Position relative to allow z-index */
    z-index: 2; /* Ensure content is above the overlay */
    padding: 20px; /* Add padding to the content */
    background: rgba(0, 0, 0, 0.3); /* Slightly darker background for content box */
    border-radius: 10px; /* Rounded corners for content box */
    max-width: 80%; /* Limit width of content box */
}

.parallax-content h2 {
    font-size: 2.5rem; /* Larger heading */
    margin-bottom: 10px;
}

.parallax-content p {
    font-size: 1.2rem; /* Larger paragraph text */
}

/* Responsive Adjustments (Optional but Recommended) */
@media (max-width: 768px) {
    .parallax-section {
        min-height: 350px; /* Smaller height on smaller screens */
        /* On mobile, fixed background-attachment can be buggy or impact performance. */
        /* Revert to scroll to ensure smooth scrolling, even if it removes the parallax effect. */
        background-attachment: scroll;
    }
    .parallax-content h2 {
        font-size: 1.8rem;
    }
    .parallax-content p {
        font-size: 1rem;
    }
}


.apod-terminal {
    background: rgba(255, 255, 255, 0.05); /* subtle glass tint */
    backdrop-filter: blur(5px);
    color: white;
    border: 2px solid white;
    padding: 20px;
    font-family: monospace; /* for headings */
    max-width: 600px;
    opacity: 0; /* for scroll animation */
    transform: translateY(20px);
    transition: opacity 1s ease, transform 1s ease;
}

.apod-terminal p {
    font-family: inherit; /* default site font for paragraph */
}

.apod-terminal img {
    max-width: 100%;
    margin: 10px 0;
    cursor: pointer; /* indicates clickable for HD */
}

.apod-terminal small {
    display: block;
    color: white;
    font-family: inherit;
}

.apod-terminal.visible {
    opacity: 1;
    transform: translateY(0);
}