/* Scroll-reveal prototype: full-screen pinned paintings, grayscale -> color
   as you scroll through each one, then a caption overlay (with a swipeable
   strip of the real process material) settles in before releasing to the
   next piece. Photos are raw and uncropped - shown with object-fit: contain
   and letterboxed on the black background, never cover-cropped. See
   js/scroll-reveal.js for the scroll math. */

.nav a.is-active { color: var(--accent); opacity: 1; }

.reveal-sequence { background: var(--reveal-bg, #000); } /* override per-page: style="--reveal-bg: #1C2125" */

.reveal-wrap {
  position: relative;
  height: 220vh; /* extra height = scroll distance spent "inside" this painting, and
                    what the color/caption reveal interpolates across - every wrap
                    needs this runway, including the last one, or its reveal has no
                    distance to animate over and just snaps straight to the end state. */
}

.reveal-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}

.reveal-slider {
  display: flex;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* legacy Edge */
}
.reveal-slider::-webkit-scrollbar {
  display: none; /* Chrome, Safari, current Edge */
}

.reveal-slide {
  flex: 0 0 100%;
  height: 100%;
  position: relative;
  scroll-snap-align: start;
}

.reveal-canvas-frame {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px;
}

.reveal-canvas {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(1);
  will-change: filter;
}

/* Optional: fades the photo's own edges to transparent so the page
   background shows through instead of a hard rectangle. Opt-in per page
   (build_reveal_page.py --soft-edge) - doesn't touch the banked default. */
.reveal-canvas--soft-edge {
  /* Two independent linear-gradient masks (one per axis), intersected -
     fades all 4 straight edges evenly. A single radial-gradient mask was
     tried first and looked broken: with the default farthest-corner
     sizing, the fade radius is set by the CORNER distance, so on a tall
     rectangle the fade never reaches the edge midpoints at all - it only
     shows up right at the corners. Verified this two-gradient version
     actually fades every edge before shipping it. */
  --reveal-canvas-fade: 14%;
  mask-image:
    linear-gradient(to right, transparent, #000 var(--reveal-canvas-fade), #000 calc(100% - var(--reveal-canvas-fade)), transparent),
    linear-gradient(to bottom, transparent, #000 var(--reveal-canvas-fade), #000 calc(100% - var(--reveal-canvas-fade)), transparent);
  mask-composite: intersect;
  -webkit-mask-image:
    linear-gradient(to right, transparent, #000 var(--reveal-canvas-fade), #000 calc(100% - var(--reveal-canvas-fade)), transparent),
    linear-gradient(to bottom, transparent, #000 var(--reveal-canvas-fade), #000 calc(100% - var(--reveal-canvas-fade)), transparent);
  -webkit-mask-composite: source-in;
}

/* Caption overlay - painting slide only. Materials live on their own
   slide(s), reached by swiping/scrolling .reveal-slider horizontally, not
   stacked under the caption. */
.reveal-overlay {
  position: absolute;
  inset: auto 0 0 0;
  padding: 56px 64px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 30%, transparent);
  opacity: 0;
  transform: translateY(16px);
  will-change: opacity, transform;
  pointer-events: none;
}

.reveal-overlay__num {
  font-size: 13px;
  letter-spacing: 0.08em;
  color: oklch(72% 0.1 45);
}
.reveal-overlay__title {
  margin: 10px 0 0;
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  font-weight: 300;
  color: oklch(97% 0.012 80);
}
.reveal-overlay__detail {
  margin: 10px 0 0;
  font-size: 14px;
  color: oklch(80% 0.02 75);
}

/* Swipe-for-materials hint: right edge of the painting slide, fades in with
   the caption, nudges horizontally to read as "there's more this way." A
   button (not just a decoration) so a mouse/keyboard user can advance too. */
.reveal-hint {
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  padding: 12px;
  color: oklch(97% 0.012 80);
  opacity: 0;
  cursor: pointer;
}
.reveal-hint__label {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
}
.reveal-hint__icon {
  animation: reveal-hint-nudge 1.8s ease-in-out infinite;
}
@keyframes reveal-hint-nudge {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(-6px); }
}

/* Material slides: same letterboxed treatment as the painting, always full
   color (this is reference/process material, not the artwork being
   revealed), with a small caption instead of the title block. */
.reveal-material-frame {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px;
}
.reveal-material-photo {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
.reveal-material-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 40px;
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: oklch(72% 0.02 75);
}

@media (max-width: 640px) {
  .reveal-overlay { padding: 28px 24px; }
  .reveal-canvas-frame, .reveal-material-frame { padding: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal-wrap { height: 100vh; }
  .reveal-canvas { filter: grayscale(0); }
  .reveal-overlay, .reveal-hint { opacity: 1; transform: translateY(0); }
  .reveal-hint__icon { animation: none; }
}