/* Project detail page (project.html). Loaded after styles.css and shared.css. */

/* Same view-transition rules as projects.css: the collection photo morphs into .phero__bg on the way in (named by the script in the page <head>); nothing morphs on the way out */
@view-transition { navigation: auto; }
::view-transition-group(project-hero) { animation-duration: .8s; animation-timing-function: var(--ease); }
::view-transition-old(project-hero), ::view-transition-new(project-hero) { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: normal; }
::view-transition-group(root) { animation-duration: .5s; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }
.site-header { view-transition-name: site-header; } /* the nav stays put instead of fading with the page */

/* ---------- Hero: full-screen photo; the overlay and then the name fade in softly after it lands ---------- */
.phero { position: relative; height: 100vh; height: 100svh; min-height: 520px; display: flex; align-items: flex-end; color: var(--white); overflow: hidden; background: var(--secondary); }
.phero__bg { position: absolute; inset: 0; }
.phero__bg img { width: 100%; height: 100%; object-fit: cover; }
.phero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(rgba(20,17,18,.55), rgba(20,17,18,.28) 40%, rgba(20,17,18,.7)); /* dark at the top keeps the nav legible, dark at the bottom backs the name */
  animation: phFade 1.4s var(--ease) .5s both;
}
.phero .wrap { position: relative; z-index: 1; padding-bottom: clamp(40px, 6vw, 96px); }
.phero__title { animation: phFade 1.4s var(--ease) .8s both; }
.phero__title h1 { margin-top: 14px; }
.phero .eyebrow { color: var(--white); opacity: .9; }
@keyframes phFade { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Description: accent-stroked container (drawn on scroll-in, see .draw-frame), one short paragraph centered in it. The space above and below it equals the side gutter. ---------- */
.pdesc { padding-block: var(--gutter) 0; }
.pdesc__box { padding: clamp(48px, 8vw, 128px) var(--gutter); }
.pdesc__box p { max-width: 760px; margin-inline: auto; text-align: center; }

/* ---------- Gallery: two columns, every frame the same size, photos fill their frames. js/project.js folds away everything past the first six behind View More. ---------- */
.pgallery { padding-block: var(--gutter) var(--section-y); }
.gallery__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.gallery__item { position: relative; display: block; padding: 0; aspect-ratio: 4 / 3; overflow: hidden; background: var(--secondary); cursor: zoom-in; }
.gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.gallery__item:hover img { transform: scale(1.04); }
.gallery__item::after { /* soft accent stroke that eases in on hover and out again on hover off */
  content: ""; position: absolute; inset: 0; border: 1px solid var(--accent); opacity: 0; pointer-events: none;
  transition: opacity .6s var(--ease);
}
.gallery__item:hover::after, .gallery__item:focus-visible::after { opacity: 1; }
.gallery__grid.is-collapsed .is-extra { display: none; }

/* View More sits under the last row. Once the rest of the photos are open it becomes View Less and floats at the bottom of the screen until you collapse the gallery. */
.pgallery .section-cta { margin-top: clamp(32px, 4vw, 56px); }
.pgallery .btn { background: var(--bg); } /* solid, so it reads over the photos when it floats */
.pgallery .btn:hover { background: var(--accent); }
.pgallery.is-expanded .section-cta { position: sticky; bottom: var(--gap); z-index: 5; pointer-events: none; }
.pgallery.is-expanded .section-cta .btn { pointer-events: auto; } /* only the button catches clicks, not the strip beside it */
.pgallery .btn[hidden], .pgallery .section-cta:has(> [hidden]) { display: none; } /* .btn's display would otherwise override [hidden] */

/* ---------- Lightbox: dark gray, logo mark behind the photo, arrows underneath ---------- */
.lb {
  position: fixed; inset: 0; z-index: 200;
  background: var(--secondary); color: var(--white);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px;
  padding: 72px var(--gutter) 28px; overflow: hidden;
  opacity: 0; visibility: hidden;
  transition: opacity .5s var(--ease), visibility .5s;
}
.lb.is-open { opacity: 1; visibility: visible; }
.lb__mark { /* the home page's process mark, set the same way: big, bottom-aligned and pushed down so the bottom clips; the size keeps the top clear of the screen edge */
  position: absolute; left: 50%; bottom: 0; width: min(143vh, 125vw); height: auto; aspect-ratio: 404 / 268;
  transform-origin: 50% 100%; transform: translate(-50%, 18%) scale(1.15);
  opacity: .1; pointer-events: none;
}
.lb .mark__accent { fill: var(--accent); }
.lb .mark__light { fill: var(--white); }
.lb__stage {
  position: relative; z-index: 1; width: min(100%, 1400px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: scale(.97); transition: opacity .6s var(--ease) .1s, transform .6s var(--ease) .1s;
}
.lb.is-open .lb__stage { opacity: 1; transform: none; }
.lb__stage img { max-width: 100%; max-height: calc(100svh - 72px - 52px - 24px - 28px); width: auto; height: auto; object-fit: contain; } /* the arrows sit right under the photo, whatever its shape */
.lb__nav { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 22px; opacity: 0; transition: opacity .6s var(--ease) .2s; }
.lb.is-open .lb__nav { opacity: 1; }
.lb__count { min-width: 72px; text-align: center; }
.lb__close { position: absolute; z-index: 2; top: 20px; right: var(--gutter); width: 44px; height: 44px; }
.lb__close span { position: absolute; left: 10px; right: 10px; top: 21px; height: 1px; background: var(--white); transition: background-color .3s var(--ease); }
.lb__close span:nth-child(1) { transform: rotate(45deg); }
.lb__close span:nth-child(2) { transform: rotate(-45deg); }
.lb__close:hover span { background: var(--accent); }
.lb .tst__btn { color: var(--accent); }
.lb .tst__btn:hover { background: var(--accent); color: var(--white); }
html.lb-open, html.lb-open body { overflow: hidden; }
@media (max-width: 768px) {
  .lb { padding-top: 68px; gap: 20px; }
  .lb__stage img { max-height: calc(100svh - 68px - 52px - 20px - 28px); }
}
@media (prefers-reduced-motion: reduce) { .lb, .lb__stage, .lb__nav, .gallery__item img, .gallery__item::after { transition: none; } .phero::after, .phero__title { animation: none; } }