/*
 * fullscreen.css — Image fullscreen state for the Project page.
 *
 * Per BUILD_SPEC.md v1.5 §5.4 — the clicked gallery media expands from
 * its in-gallery position to a centered ~90vw position, then shrinks
 * back on close. Only the expanded media, its caption (if any), and
 * the close button are visible while the state is open.
 *
 * The expansion is driven by JS positioning the .fullscreen-media box
 * via inline top/left/width/height — those four properties transition
 * via the rules here. The caption and close button fade in after the
 * box has expanded (and out before it shrinks back).
 */

.fullscreen-stage {
  position: fixed;
  inset: 0;
  z-index: var(--z-fullscreen);
  pointer-events: none;       /* always transparent — children opt in individually */
}

.fullscreen-stage[hidden] {
  display: none;
}

/* Backdrop: fills the stage behind the media, fades in/out with is-open.
 * Covers the gallery and page chrome smoothly without hiding them
 * instantly. Transition duration matches the media box (0.42s) so both
 * settle at the same time. When open, it's the click target for closing
 * fullscreen — clicks on the media wrap (above it in z-order) go to the
 * media, not the backdrop, so only true outside-media clicks land here. */
.fullscreen-backdrop {
  position: absolute;
  inset: 0;
  background-color: var(--color-bg-light);
  opacity: 0;
  transition: opacity 0.42s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

.fullscreen-stage.is-open .fullscreen-backdrop {
  pointer-events: auto;
}

.fullscreen-stage.is-open .fullscreen-backdrop {
  opacity: 1;
}

/* The media box is positioned absolutely inside the stage. JS sets
 * top/left/width/height inline; we transition all four. The cubic
 * curve is "standard" easing — fast start, settled end. */
.fullscreen-media {
  position: absolute;
  pointer-events: auto;
  overflow: hidden;
  transition:
    top    0.42s cubic-bezier(0.4, 0, 0.2, 1),
    left   0.42s cubic-bezier(0.4, 0, 0.2, 1),
    width  0.42s cubic-bezier(0.4, 0, 0.2, 1),
    height 0.42s cubic-bezier(0.4, 0, 0.2, 1);
}

.fullscreen-media picture,
.fullscreen-media img,
.fullscreen-media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Caption: positioned by JS below the expanded media. Hidden while the
 * image is mid-animation; fades in after the box reaches its target
 * and fades out at the start of the close animation. */
.fullscreen-caption {
  position: absolute;
  pointer-events: none;
  margin: 0;
  font-size: var(--fs-label);
  font-weight: var(--fw-light);
  letter-spacing: 0.3px;
  line-height: var(--lh-snug);
  text-align: left;
  color: var(--color-fg-light);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.fullscreen-caption[hidden] {
  display: none;
}

.fullscreen-stage.is-open .fullscreen-caption:not([hidden]) {
  opacity: 0.6;
  transition: opacity 0.25s ease 0.22s; /* fade in after expand mostly done */
}

/* While the fullscreen state is open, chrome elements fade out smoothly.
 * The 0.2s transition here (higher specificity) controls the FADE-OUT speed.
 * The base transitions in project.css (0.6s, lower specificity) control the
 * FADE-IN speed when fullscreen closes — giving a slow, gentle restoration. */
.project-page.fullscreen-active .site-header,
.project-page.fullscreen-active .static-get-in-touch,
.project-page.fullscreen-active .static-info-row,
.project-page.fullscreen-active .static-back-arrow {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.project-page.fullscreen-active::before,
.project-page.fullscreen-active::after {
  display: none;
}

/* The source gallery item itself is visually hidden during fullscreen so
 * the user doesn't see a "twin" of the expanded media in the gallery
 * layout. visibility: hidden again — keeps layout intact for the close
 * rect calculation. */
.gallery-item.is-source-fullscreen {
  visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .fullscreen-media,
  .fullscreen-caption,
  .fullscreen-backdrop {
    transition: none;
  }
}