:root {
    /* Material 3 Design Tokens (Approximation for Expressive Theme) */
    --md-sys-color-background: #000000;
    --md-sys-color-on-background: #ffffff;
    --md-sys-color-surface: #1e1e1e;
    --md-sys-color-on-surface: #e2e2e2;
    --md-sys-color-primary: #d0bcff;
    --md-sys-color-on-primary: #381e72;
    --md-sys-color-secondary-container: #4a4458;

    /* Typography */
    --md-sys-typescale-display-large: 57px;
    --md-sys-typescale-headline-large: 32px;

    /* Animation */
    --md-sys-motion-easing-emphasized: cubic-bezier(0.2, 0.0, 0.0, 1.0);
    --md-sys-motion-duration-long2: 500ms;
}

body {
    margin: 0;
    padding: 0;
    background-color: var(--md-sys-color-background);
    color: var(--md-sys-color-on-background);
    font-family: 'Roboto Flex', sans-serif;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.main-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
}

.main-title {
    font-size: 72px;
    /* Increased from display-large (57px) */
    font-weight: 700;
    /* Bold */
    color: var(--md-sys-color-on-background);
    margin: 0;
    text-align: center;
    letter-spacing: -1px;
}

.container {
    display: flex;
    gap: 3rem;
    /* Reduced gap */
    padding: 2rem;
    perspective: 1000px;
}

.profile-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transition: transform var(--md-sys-motion-duration-long2) var(--md-sys-motion-easing-emphasized);
    position: relative;
}

.image-container {
    width: 180px;
    /* Smaller square shape */
    height: 180px;
    /* Smaller square shape */
    border-radius: 24px;
    /* Keep rounded corners */
    overflow: hidden;
    position: relative;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
    transition: all var(--md-sys-motion-duration-long2) var(--md-sys-motion-easing-emphasized);
    background-color: var(--md-sys-color-surface);
}

.profile-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--md-sys-motion-duration-long2) var(--md-sys-motion-easing-emphasized);
}

.label {
    margin-top: 1rem;
    font-size: 24px;
    /* Reduced from headline-large */
    font-weight: 500;
    color: var(--md-sys-color-on-surface);
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

/* Recruiter Interaction: Zoom Out */
#recruiter-card:hover .image-container {
    transform: scale(0.95);
    /* Zoom out effect */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
    /* Lower elevation */
}

#recruiter-card:hover .label {
    opacity: 1;
    color: var(--md-sys-color-primary);
}

/* Stalker Interaction: Match Recruiter Exactly */
#stalker-card:hover .image-container {
    transform: scale(0.95);
    /* Zoom out effect */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
    /* Lower elevation */
}

#stalker-card:hover .label {
    opacity: 1;
    color: var(--md-sys-color-primary);
}

/* Click Feedback for Both */
#recruiter-card:active .image-container,
#stalker-card:active .image-container {
    transform: scale(0.90);
    /* Press deeper */
    transition: transform 0.1s;
    /* Snappy response */
}

/* Stalker Popup Styles */
.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 1;
    transition: opacity 0.3s ease;
}

.popup-overlay.hidden {
    display: none;
    opacity: 0;
    pointer-events: none;
}

.popup-content {
    background-color: var(--md-sys-color-surface);
    color: var(--md-sys-color-on-surface);
    padding: 2rem;
    border-radius: 24px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    text-align: center;
    position: relative;
    max-width: 400px;
    width: 90%;
    border: 1px solid var(--md-sys-color-secondary-container);
}

.popup-content h2 {
    margin-top: 0;
    color: var(--md-sys-color-primary);
    font-size: 24px;
}

.popup-content p {
    font-size: 16px;
    line-height: 1.5;
}

.close-btn {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 28px;
    font-weight: bold;
    color: var(--md-sys-color-on-surface);
    cursor: pointer;
    transition: color 0.3s;
}

.close-btn:hover {
    color: var(--md-sys-color-primary);
}