/*
 * This file contains the shared custom CSS for all pages.
 * The rules were extracted from the inline <style> tags in index1.html and index2.html.
 */

/* Import the Inter font for a modern look */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');

/* Apply base styling to the body */
body {
    font-family: 'Inter', sans-serif;
    color: #e0e0e0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

/* Hides the scrollbar but keeps the scrolling functionality */
body::-webkit-scrollbar {
    display: none; /* For WebKit browsers (Chrome, Safari) */
}
body {
    -ms-overflow-style: none; /* For Internet Explorer and Edge */
    scrollbar-width: none; /* For Firefox */
}

/* Full page background container */
.page-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    background-color: #0d0c1d;
    background-size: cover;
}

/* CSS for an individual star/spot */
.star {
    position: absolute;
    background-color: white;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
    animation-name: fade-in-star;
    animation-timing-function: ease-in;
    animation-fill-mode: forwards;
}

/* Animation for stars to fade in and move */
@keyframes fade-in-star {
    from {
        opacity: 0;
        transform: translate(0, 0);
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    to {
        opacity: 0;
        transform: translate(var(--star-travel-x, 0), var(--star-travel-y, 0));
    }
}

/* Header styling with progressive blur and a clean, non-rectangular look */
.blur-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
    /* The blur effect is now handled by the ::before pseudo-element to allow for masking. */
}

.blur-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* The blur amount is controlled by the --scroll-blur CSS variable, updated by JavaScript. */
    backdrop-filter: blur(var(--scroll-blur, 0px));
    -webkit-backdrop-filter: blur(var(--scroll-blur, 0px)); /* Vendor prefix for Safari */
    transition: backdrop-filter 0.3s ease-out;
    z-index: -1; /* Places the blurred background behind the header content (logo, buttons). */

    /* This mask creates the progressive/feathered blur effect by fading to transparent. */
    mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 100%); /* Vendor prefix for Safari */
}


/* Subtle hover effect for buttons */
.button-hover-effect {
    transition: background-color 0.2s ease-in-out;
    border-color: #4a5568;
}
.button-hover-effect:hover {
    background-color: rgba(64, 64, 64, 0.7) !important;
}

/* Hover effect for the main title words */
.word-hover-effect {
    position: relative;
    display: inline-block;
    transition: transform 0.2s ease-in-out;
    cursor: pointer;
    line-height: 1.2;
}

/* New CSS rule to make the word move up on hover */
.word-hover-effect:hover {
    transform: translateY(-5px);
}

/* Underline style, controlled by JS now */
.word-underline {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: white;
    transform: scaleX(0); /* Initially invisible */
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* New styles for the projects page layout */
.projects-grid {
    /* Set up a flexible grid container */
    display: grid;
    /* On mobile, use a single column */
    grid-template-columns: 1fr;
    /* Spacing between grid items */
    gap: 2rem;
    /* Adjust max-width to allow for a wider grid on larger screens */
    max-width: 90rem;
    margin: 0 auto; /* Center the grid */
}

/* Media query for tablets and larger screens */
@media (min-width: 768px) {
    .projects-grid {
        /* On screens wider than 768px, use two equal-width columns */
        grid-template-columns: repeat(2, 1fr);
    }
}

/* New media query for large desktops */
@media (min-width: 1024px) {
    .projects-grid {
        /* On screens wider than 1024px, use three equal-width columns */
        grid-template-columns: repeat(3, 1fr);
    }
}

.project-card {
    background-color: rgba(31, 41, 55, 0.5); /* Equivalent to bg-gray-800 with opacity */
    border-radius: 1rem; /* Equivalent to Tailwind's rounded-2xl */
    padding: 2rem; /* Equivalent to Tailwind's p-8 */
    border: 2px solid rgba(75, 85, 99, 0.5); /* Equivalent to border-gray-600 with opacity */
    backdrop-filter: blur(8px); /* Add a subtle blur effect */
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.project-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2);
}