/* --- Color Palette --- */
:root {
    --color-reality: #36454F; /* Deep Charcoal Gray */
    --color-potential: #008080; /* Teal/Emerald Green */
    --color-text-light: #f8f9fa; /* White/Light */
    --color-text-dark: #212529; /* Black/Dark */
    --color-danger: #dc3545; /* Red for Reality badges */
    --color-success: #198754; /* Green for Potential badges */
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: var(--color-text-light);
    color: var(--color-text-dark);
}

/* --- Navigation Bar Styling --- */
#main-nav {
    background-color: rgba(54, 69, 79, 0.95); /* Semi-transparent Charcoal */
    transition: background-color 0.3s;
}
.navbar-brand, .nav-link {
    color: var(--color-text-light) !important;
}
.btn-outline-light {
    color: var(--color-text-light);
    border-color: var(--color-potential);
}
.btn-outline-light:hover {
    background-color: var(--color-potential);
}

/* --- Hero Section Styling (Conceptual Split) --- */
.hero-split {
    height: 100vh;
    overflow: hidden;
    position: relative;
    background-color: var(--color-reality); /* Fallback */
}
.hero-split .split-slider-container {
    position: absolute;
    width: 100%;
    height: 100%;
    /* In a real implementation, a JavaScript library like "Twentytwenty" would make the image slider work here. */
}
.hero-split img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.hero-overlay {
    position: relative;
    z-index: 10;
    color: var(--color-text-light);
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.8);
}
.btn-potential {
    background-color: var(--color-potential);
    border-color: var(--color-potential);
    color: var(--color-text-light);
    font-weight: bold;
    padding: 0.75rem 2rem;
}
.btn-potential:hover {
    background-color: #00b3b3; /* Lighter Teal */
    border-color: #00b3b3;
}

/* --- Image Gallery Styling (The Flip Card) --- */
#gallery {
    padding-top: 5rem;
    padding-bottom: 5rem;
}
.image-card {
    position: relative;
    perspective: 1000px; /* For the 3D flip effect */
    height: 300px; /* Fixed height for consistent grid look */
    cursor: pointer;
}
.card-face {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    transition: transform 0.6s;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.card-face img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.reality-face {
    transform: rotateY(0deg);
}
.potential-face {
    transform: rotateY(180deg); /* Start hidden */
}

/* The Flip Effect: Add this class to the .image-card via JavaScript on hover/click */
.image-card.flipped .reality-face {
    transform: rotateY(-180deg);
}
.image-card.flipped .potential-face {
    transform: rotateY(0deg);
}

.card-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
    padding: 15px;
    color: var(--color-text-light);
}
.card-overlay h3 {
    font-size: 1.25rem;
    margin-bottom: 5px;
}
.badge.bg-danger {
    background-color: var(--color-danger) !important;
}
.badge.bg-success {
    background-color: var(--color-potential) !important;
}

/* --- Footer --- */
footer {
    background-color: var(--color-reality);
    color: #a0a0a0;
}