/* ===== DESIGN — PROJECT SPACE ===== */
/* Full-screen space behind the header; stickers are placed by js/design-space.js */
.design-space {
  position: fixed;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.design-space.dragging { cursor: grabbing; }

/* No page scrolling or footer while the Design space is showing */
html:has(#design.active) { overflow: hidden; }
body:has(#design.active) .site-footer { display: none; }

/* Large faint title in the middle — shows the hovered project's name */
.design-space-title {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(-4deg);
  font-family: var(--font-heading);
  font-size: clamp(2.4rem, 6vw, 5rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  white-space: nowrap;
  color: var(--color-text);
  opacity: 0.07;
  pointer-events: none;
  z-index: 0;
}

.design-sticker {
  position: absolute;
  left: 50%;
  top: 50%;
  display: block;
  cursor: pointer;
  transform-origin: center;
  will-change: transform, opacity;
  -webkit-user-drag: none;
}

.design-sticker img {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.12));
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), filter 0.4s ease;
}

.design-sticker:hover img,
.design-sticker:focus-visible img {
  transform: scale(1.05);
  filter: drop-shadow(0 16px 36px rgba(0, 0, 0, 0.22));
}

.design-sticker.is-dragging { cursor: grabbing; }

/* Cut-out stickers: ignore clicks on the transparent square around the object;
   only the circle (.design-sticker-hit, added by js/design-space.js) responds */
.design-sticker:not(.design-sticker-card) { pointer-events: none; }

.design-sticker-hit {
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  pointer-events: auto;
  cursor: pointer;
}

.design-sticker.is-dragging .design-sticker-hit { cursor: grabbing; }

.design-sticker.is-dragging img {
  transform: scale(1.08);
  filter: drop-shadow(0 24px 48px rgba(0, 0, 0, 0.25));
}

.design-sticker:focus-visible { outline: none; }

/* Photo cards (e.g. Rigga) get a white card frame instead of a cut-out shadow */
.design-sticker-card img {
  border-radius: 16px;
  border: 1px solid var(--color-border);
  background: #fff;
  filter: none;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.4s ease;
}

.design-sticker-card:hover img,
.design-sticker-card:focus-visible img,
.design-sticker-card.is-dragging img {
  filter: none;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.2);
}

.design-space-hint {
  position: fixed;
  left: 50%;
  bottom: 1.5rem;
  transform: translateX(-50%);
  z-index: 2;
  font-size: 0.8rem;
  color: var(--color-text-light);
  padding: 0.4rem 0.9rem;
  border-radius: 100px;
  background: rgba(250, 250, 248, 0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  pointer-events: none;
  white-space: nowrap;
}

@media (hover: none) {
  .design-space-hint::before { content: 'Pinch to zoom · Drag to explore'; }
  .design-space-hint { font-size: 0; }
  .design-space-hint::before { font-size: 0.8rem; }
}

/* Phones and tablets: drop the effects that are expensive to redraw while
   zooming and dragging (soft shadows that follow the cut-out shape, and the
   blurred background behind the hint). */
@media (hover: none) {
  .design-sticker img,
  .design-sticker:hover img,
  .design-sticker.is-dragging img {
    filter: none;
    transition: none;
  }

  .design-sticker-card img,
  .design-sticker-card.is-dragging img {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }

  .design-space-hint {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(250, 250, 248, 0.9);
  }
}