/* ===================================================================
   PROJECT PAGE MEDIA - key art blur-up + full-screen gallery
   Loaded after layout.css and components.css, which it overrides.
   =================================================================== */

/* ============ 1. Key art blur-up ============
   Gated behind .js so a browser without scripts still gets the picture -
   the class is set by an inline head script before the body is parsed, so
   there is no flash of the sharp image first. */

.js .project-hero img {
  opacity: 0;
  /* keeps the grade from layout.css, adds the blur on top */
  filter: blur(28px) contrast(1.05) saturate(1.1);
  transform: scale(1.08) translate3d(0, 0, 0);
  transition:
    opacity 1.1s cubic-bezier(0.22, 1, 0.36, 1),
    filter 1.5s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1.8s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, filter, transform;
}

.js .project-hero.is-loaded img {
  opacity: 1;
  filter: blur(0px) contrast(1.05) saturate(1.1);
  transform: scale(1.02) translate3d(0, 0, 0);
}

/* Something to look at while the bitmap decodes */
.js .project-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 45%, #16161a 0%, #0a0a0c 55%, #000 100%);
  transition: opacity 1s cubic-bezier(0.22, 1, 0.36, 1);
}

.js .project-hero.has-lqip::after {
  background-image: var(--hero-lqip);
  background-size: cover;
  background-position: center;
  filter: blur(34px) saturate(1.2);
  transform: scale(1.12);
}

.js .project-hero.is-loaded::after {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .js .project-hero img {
    transition: opacity 0.3s linear;
    filter: contrast(1.05) saturate(1.1);
    transform: scale(1.02) translate3d(0, 0, 0);
  }
}

/* ============ 2. Gallery plates ============ */

.image-gallery img.is-zoomable {
  cursor: zoom-in;
  transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.image-gallery img.is-zoomable:hover {
  opacity: 0.86;
}

.image-gallery img.is-zoomable:focus-visible {
  outline: 1px solid rgba(255, 255, 255, 0.7);
  outline-offset: 4px;
}

/* ============ 3. Lightbox ============ */

.lb {
  position: fixed;
  inset: 0;
  z-index: 100050;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.82);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  opacity: 0;
  transition: opacity 0.32s cubic-bezier(0.22, 1, 0.36, 1);
  cursor: zoom-out;
}

.lb[hidden] { display: none; }

.lb.is-open { opacity: 1; }

.lb-stage {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6vh 8vw;
  pointer-events: none;         /* only the picture itself is a target */
}

.lb-img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  cursor: default;
  pointer-events: auto;
  opacity: 1;
  filter: blur(0px);
  transform: scale(1);
  transition:
    opacity 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.lb-img.is-swapping {
  opacity: 0;
  filter: blur(16px);
  transform: scale(0.985);
}

.lb .is-open .lb-img,
.lb.is-open .lb-img {
  animation: lb-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes lb-in {
  from { opacity: 0; filter: blur(18px); transform: scale(0.965); }
  to   { opacity: 1; filter: blur(0px);  transform: scale(1); }
}

/* ---- controls ---- */

.lb-btn {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  padding: 0;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.62);
  cursor: pointer;
  transition:
    color 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    background-color 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.lb-btn svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: square;
}

.lb-btn:hover,
.lb-btn:focus-visible {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.55);
  background-color: rgba(255, 255, 255, 0.06);
  outline: none;
}

.lb-btn[hidden] { display: none; }

.lb-close {
  top: 1.75rem;
  right: 1.75rem;
}

.lb-prev { left: 1.75rem; top: 50%; margin-top: -26px; }
.lb-next { right: 1.75rem; top: 50%; margin-top: -26px; }

.lb-prev:hover { transform: translateX(-3px); }
.lb-next:hover { transform: translateX(3px); }

/* ---- readout ---- */

.lb-meta {
  position: absolute;
  left: 1.75rem;
  bottom: 1.75rem;
  right: 1.75rem;
  display: flex;
  align-items: baseline;
  gap: 1.25rem;
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  pointer-events: none;
}

.lb-count { color: #ffffff; }

.lb-caption {
  color: rgba(255, 255, 255, 0.42);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Body must not scroll behind the viewer */
.project-page.lb-open,
body.lb-open {
  overflow: hidden !important;
}

/* ---- small screens ---- */

@media (max-width: 768px) {
  .lb-stage { padding: 12vh 4vw; }

  .lb-btn {
    width: 42px;
    height: 42px;
  }

  .lb-btn svg { width: 17px; height: 17px; }

  .lb-close { top: 1rem; right: 1rem; }

  /* Arrows drop to the bottom corners so they never sit over the picture */
  .lb-prev { left: 1rem; top: auto; bottom: 1rem; margin-top: 0; }
  .lb-next { right: 1rem; top: auto; bottom: 1rem; margin-top: 0; }

  .lb-meta {
    left: 0;
    right: 0;
    bottom: 4.6rem;
    justify-content: center;
  }

  .lb-caption { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .lb,
  .lb-img,
  .lb-btn {
    transition: none !important;
    animation: none !important;
  }
}