header { justify-content: flex-end; }

.photo-stack {
  position: absolute;
  z-index: 2;
  right: 1vw;
  top: 0;
  width: min(650px, 49vw);
  height: 300px;
  pointer-events: auto;
}

.photo-stack .print {
  --stack-x: 0px;
  --stack-y: 0px;
  --stack-r: 0deg;
  --stack-z: 2;
  left: 58%;
  right: auto;
  top: clamp(14px, 2.3vw, 32px);
  bottom: auto;
  width: clamp(170px, 21vw, 310px);
  height: clamp(126px, 15.5vw, 225px);
  transform: translateX(calc(-50% + var(--stack-x))) translateY(var(--stack-y)) rotate(var(--stack-r));
  z-index: var(--stack-z);
  transition: transform .8s cubic-bezier(.2,.75,.2,1), box-shadow .8s ease;
}

.photo-stack .print-one { --stack-x: -28px; --stack-y: 15px; --stack-r: -7deg; --stack-z: 1; }
.photo-stack .print-two { --stack-x: -10px; --stack-y: 3px; --stack-r: 3deg; --stack-z: 3; }
.photo-stack .print-three { --stack-x: 10px; --stack-y: 11px; --stack-r: -2deg; --stack-z: 4; }
.photo-stack .print-four { --stack-x: 28px; --stack-y: 5px; --stack-r: 6deg; --stack-z: 2; }

.photo-stack:is(:hover, :focus-within) .print-one { --stack-x: -255px; --stack-y: 18px; }
.photo-stack:is(:hover, :focus-within) .print-two { --stack-x: -88px; --stack-y: 0px; }
.photo-stack:is(:hover, :focus-within) .print-three { --stack-x: 82px; --stack-y: 11px; }
.photo-stack:is(:hover, :focus-within) .print-four { --stack-x: 246px; --stack-y: 3px; }

.photo-stack .print {
  padding: 4px 4px 19px;
  border-width: 1px;
  box-shadow: 0 10px 22px #08130f4a;
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
}

.photo-stack .print span { left: 6px; bottom: 4px; font-size: .66rem; }

.photo-stack .print:focus-visible {
  outline: 3px solid var(--paper);
  outline-offset: 4px;
}

.hero-copy {
  top: 64%;
  transform: translate(-50%,-47%) translateY(var(--depth-y, 0px));
}

[data-depth]:not(.hero-copy) { transform: translateY(var(--depth-y, 0px)); will-change: transform; }

.camera-cursor {
  position: fixed;
  z-index: 200;
  left: 0;
  top: 0;
  width: 27px;
  height: 21px;
  color: var(--cream);
  filter: drop-shadow(0 2px 4px #0008);
  pointer-events: none;
  opacity: 0;
  transform: translate3d(-80px,-80px,0) rotate(-5deg);
  will-change: transform;
  transition: opacity .18s ease;
}

.camera-cursor.visible { opacity: .92; }
.camera-cursor.capturing { animation: camera-kick .22s ease-out; }
.camera-cursor svg { display: block; width: 100%; height: 100%; overflow: visible; }
.camera-cursor path { fill: #17251f; stroke: currentColor; stroke-width: 1.5; }
.camera-cursor circle { fill: none; stroke: currentColor; stroke-width: 1.5; }
.camera-cursor circle:last-child { fill: currentColor; stroke: none; }

.camera-flash {
  --flash-x: 50vw;
  --flash-y: 50vh;
  position: fixed;
  z-index: 190;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle 72px at var(--flash-x) var(--flash-y), #fff 0%, #fff9 12%, #fff0 72%);
}

.camera-flash.active { animation: shutter-flash .32s ease-out; }

@keyframes shutter-flash {
  0% { opacity: .9; }
  35% { opacity: .34; }
  100% { opacity: 0; }
}

@keyframes camera-kick {
  50% { scale: .88; rotate: -10deg; }
}

@media (max-width: 800px) {
  header nav a:nth-child(2) { display: inline; }
  .photo-stack .print {
    width: clamp(145px, 45vw, 190px);
    height: clamp(108px, 33vw, 145px);
    top: 20px;
  }

  .photo-stack { right: 0; width: 100%; height: 190px; }

  .photo-stack .print-one { --stack-x: -105px; --stack-y: 14px; }
  .photo-stack .print-two { --stack-x: -36px; --stack-y: -3px; }
  .photo-stack .print-three { --stack-x: 37px; --stack-y: 11px; }
  .photo-stack .print-four { --stack-x: 108px; --stack-y: 2px; }
  .hero-copy { top: 57%; }
  .hero h1 { font-size: 4.45rem; }
}

@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  .camera-cursor,
  .camera-flash { display: none; }
  .photo-stack .print { transition: none; }
}