/* =============================================
   PROJECT LAYOUT — project.css
   Pairs with style.css (shared base styles)
   ============================================= */

body.project-page {
    background: #0d0d0d;
    color: #f0ede8;
    overflow-x: hidden;
}

body.project-page ::selection {
    background: rgba(255,255,255,0.15);
    color: #fff;
}

/* Subtle ambient radial on project pages */
body.project-page::before {
    content: '';
    position: fixed;
    inset: 0;
    background: radial-gradient(ellipse 120% 60% at 30% 20%, rgba(130, 60, 255, 0.05) 0%, transparent 60%),
                radial-gradient(ellipse 80% 50% at 80% 80%, rgba(255, 100, 60, 0.03) 0%, transparent 55%);
    pointer-events: none;
    z-index: 0;
}

/* ── Top Navigation / Back button ── */
.project-top-nav {
    position: fixed;
    top: 24px;
    left: 24px;
    z-index: 1000;
}

.back-button {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    background: rgba(80, 80, 80, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 10px 24px;
    border-radius: 100px;
    transition: background 0.3s, opacity 0.3s, transform 0.3s;
}

.back-button:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateX(-4px);
}

/* ── Project Header ── */
.project-header {
    position: relative;
    z-index: 10;
    padding: 20vh 7vw 8vh;
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 1400px;
    margin: 0 auto;
}

.project-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    opacity: 0; /* GSAP reveal */
}

.project-tags .tag {
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(240, 237, 232, 0.6);
    border: 1px solid rgba(240, 237, 232, 0.15);
    border-radius: 100px;
    padding: 6px 14px;
}

.project-header-title {
    font-size: clamp(3rem, 7vw, 8rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    color: #f0ede8;
    line-height: 0.95;
    text-transform: lowercase;
    opacity: 0;
    transform: translateY(20px);
}

.project-description {
    font-size: clamp(1rem, 1.2vw, 1.2rem);
    line-height: 1.8;
    color: rgba(240, 237, 232, 0.6);
    max-width: 70ch;
    margin-top: 2vh;
    opacity: 0;
    transform: translateY(20px);
}

/* ── Media Layout Options ── */
.project-media-wrapper {
    position: relative;
    z-index: 10;
    padding: 0 5vw 12vh;
    max-width: 1600px;
    margin: 0 auto;
    opacity: 0;
    transform: translateY(40px);
}

/* Video standard */
.project-video {
    width: auto;
    max-width: 100%;
    /* Keep video constrained gracefully */
    max-height: 85vh;
    border-radius: 8px;
    background: transparent;
    display: block;
    margin: 0 auto;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}

/* Image Grids */
.project-image-flex {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.project-image-flex img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.4);
    background: #222;
}

/* ── Responsive adjustments ── */
@media (max-width: 768px) {
    .project-header { padding: 16vh 6vw 6vh; }
    .project-media-wrapper { padding: 0 4vw 10vh; }
}