@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

:root {
    --black: #050505;
    --white: #ffffff;
    --project-a: #af96f5;
    --muted: rgba(255, 255, 255, .62);
    --line: rgba(255, 255, 255, .2);
    --page-transition-color: var(--black);
}

* { box-sizing: border-box; }
body { animation: pageEnter .6s ease both; }
body.page-transition-leaving { animation: pageExit .35s ease forwards; }
@keyframes pageEnter { from { opacity: 0; } to { opacity: 1; } }
@keyframes pageExit { from { opacity: 1; } to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { body { animation: none; } body.page-transition-leaving { animation: none; } }
.page-transition-overlay { position: fixed; inset: 0; z-index: 9999; background: var(--page-transition-color); opacity: 1; pointer-events: none; transition: opacity .35s ease; }
.page-transition-overlay.is-revealed { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .page-transition-overlay { transition: none; } }
html { scroll-behavior: smooth; background: #050505; }
body { margin: 0; min-height: 100vh; background: var(--black); color: var(--white); font-family: 'Poppins', sans-serif; }
a { color: inherit; }

.project-a-header { display: flex; justify-content: space-between; align-items: center; padding: 1.5rem 5vw; border-bottom: 1px solid var(--line); }
.back-link { color: var(--white); text-decoration: none; font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; transition: color .25s ease; }
.back-link:hover { color: var(--project-a); }
.project-a-language { display: flex; gap: .25rem; }
.project-a-language button { border: 1px solid var(--line); background: transparent; color: var(--white); padding: .4rem .55rem; font: 700 .68rem 'Poppins', sans-serif; cursor: pointer; }
.project-a-language button.active, .project-a-language button:hover { background: var(--project-a); border-color: var(--project-a); color: var(--black); }

.project-a-hero { width: 100%; margin: 0; padding: 4vh 0 8vh; }
.project-a-title { display: flex; align-items: baseline; justify-content: center; gap: 2rem; margin-bottom: 3rem; text-align: center; }
.eyebrow, .note-label { margin: 0; color: var(--project-a); font-size: .7rem; font-weight: 700; letter-spacing: .16em; }
.project-a-title h1 { margin: 0; font: 500 clamp(3rem, 8vw, 8rem)/.9 'Starstruck', fantasy; letter-spacing: -.05em; }
.project-a-title h1 span { color: var(--white); }
.project-a-title h1 strong { color: var(--project-a); font-weight: 500; }
.subtitle { margin: 0; color: var(--muted); font-size: 1rem; }
.project-a-overview { width: 100%; border-top: 1px solid var(--project-a); border-bottom: 1px solid var(--project-a); background: #000; overflow: hidden; box-shadow: 0 0 60px rgba(175, 150, 245, .1); }
.project-a-image-button { display: block; width: 100%; padding: 0; border: 0; background: #000; cursor: zoom-in; }
.project-a-overview img { display: block; width: 100%; max-width: none; height: auto; }

.project-a-lightbox { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 2vh 2vw; background: rgba(0, 0, 0, .96); opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s ease; }
.project-a-lightbox.is-open { opacity: 1; visibility: visible; }
.project-a-lightbox-viewport { max-width: 96vw; max-height: 96vh; overflow: hidden; }
.project-a-lightbox img { display: block; width: auto; height: auto; max-width: 96vw; max-height: 96vh; object-fit: contain; cursor: default; transition: transform .2s ease; touch-action: none; user-select: none; }
.project-a-lightbox.is-zoomed img { cursor: grab; }
.project-a-lightbox.is-dragging img { cursor: grabbing; transition: none; }
.project-a-zoom-controls { position: absolute; bottom: 1.5rem; left: 50%; display: flex; gap: .5rem; transform: translateX(-50%); }
.project-a-zoom-controls button { width: 2.5rem; height: 2.5rem; border: 1px solid rgba(255, 255, 255, .45); background: rgba(0, 0, 0, .75); color: var(--white); font: 1.3rem/1 'Poppins', sans-serif; cursor: pointer; }
.project-a-zoom-controls button:hover { border-color: var(--project-a); color: var(--project-a); }
.project-a-lightbox-close { position: absolute; top: 1rem; right: 1.5rem; border: 0; background: transparent; color: var(--white); font: 300 2.5rem/1 'Poppins', sans-serif; cursor: pointer; }

.project-a-notes { width: min(1280px, 90vw); margin: 0 auto; padding: 3rem 0 10rem; display: grid; grid-template-columns: 1fr 1.5fr 1fr; gap: 3rem; }
.note-block p:not(.note-label) { margin: .8rem 0 0; color: var(--white); font-size: .95rem; line-height: 1.7; }
.project-a-footer { display: flex; justify-content: space-between; padding: 1.5rem 5vw; border-top: 1px solid var(--line); color: var(--muted); font-size: .68rem; font-weight: 600; letter-spacing: .13em; }
.project-a-footer a { text-decoration: none; }
.project-a-footer a:hover { color: var(--project-a); }

@media (max-width: 760px) {
    .project-a-hero { padding-top: 3vh; }
    .project-a-title { display: flex; }
    .project-a-title h1 { margin: 1.2rem 0; }
    .project-a-notes { grid-template-columns: 1fr; gap: 2rem; padding-bottom: 6rem; }
    .project-a-footer { gap: 1rem; line-height: 1.5; }
}