/* ============================================================
   THE ARCHIVE — photographic slides on the desk
   35mm mounted transparencies with glass sheen + imperfections
   ============================================================ */

.slide-tray {
  position: relative;
  flex: 0 0 auto;
  width: 100%;
  z-index: 30;
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-end;
  justify-content: safe center;
  gap: clamp(10px, 1.5vw, 22px);
  /* room above for a lifted slide: a scroller clips what overflows it */
  padding: 26px 5vw calc(clamp(14px, 3vh, 34px) + env(safe-area-inset-bottom));
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.slide-tray::-webkit-scrollbar { display: none; }

/* each slide */
.slide {
  position: relative;
  width: clamp(88px, 13vh, 150px);
  aspect-ratio: 1 / 1.08;
  flex: 0 0 auto;
  display: block;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transform: rotate(var(--rot, 0deg)) translateY(0);
  transition: transform 0.5s var(--ease-soft), filter 0.5s var(--ease-soft);
  filter: drop-shadow(0 10px 14px rgba(0,0,0,0.55));
}
@media (hover: hover) {
.slide:hover {
  transform: rotate(calc(var(--rot, 0deg) * 0.35)) translateY(-16px) scale(1.04);
  filter: drop-shadow(0 22px 26px rgba(0,0,0,0.6)) drop-shadow(0 0 24px rgba(255,170,80,0.28));
  z-index: 5;
}
}
.slide.is-hidden { opacity: 0; pointer-events: none; }

/* the currently-projecting slide stays on the desk, gently lifted + lit */
.slide.is-active {
  transform: rotate(calc(var(--rot, 0deg) * 0.2)) translateY(-12px) scale(1.03);
  filter: drop-shadow(0 18px 22px rgba(0,0,0,0.6)) drop-shadow(0 0 26px rgba(255,170,80,0.4));
  z-index: 4;
}
.slide.is-active::after {
  content: "";
  position: absolute; left: 50%; bottom: -10px;
  width: 30%; height: 2px; transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  box-shadow: 0 0 10px rgba(201,168,106,0.8);
  border-radius: 2px;
}
.slide.is-active .slide-window { filter: brightness(1.08) saturate(1.08); }

/* the mount (frame) */
.slide-mount {
  position: absolute; inset: 0;
  border-radius: 7px;
  padding: 9% 9% 0;
  display: block;
  background:
    linear-gradient(150deg, #2a2420 0%, #191512 50%, #221c17 100%);
  box-shadow:
    inset 0 1px 1px rgba(255,225,180,0.18),
    inset 0 -2px 4px rgba(0,0,0,0.6);
  border: 1px solid rgba(120,90,46,0.28);
}
.slide-mount::before {
  /* subtle mount texture */
  content: "";
  position: absolute; inset: 0; border-radius: 7px;
  background: repeating-linear-gradient(45deg, rgba(255,255,255,0.02) 0 2px, transparent 2px 5px);
  opacity: 0.5; pointer-events: none;
}

/* image window */
.slide-window {
  position: relative;
  display: block;
  width: 100%; height: 56%;
  border-radius: 2px;
  overflow: hidden;
  background:
    radial-gradient(70% 90% at 35% 25%, hsla(var(--tint,30),70%,60%,0.85), transparent 60%),
    radial-gradient(80% 80% at 80% 80%, hsla(calc(var(--tint,30) - 14),60%,36%,0.9), transparent 65%),
    linear-gradient(140deg, hsl(calc(var(--tint,30) + 6),45%,24%), hsl(var(--tint,30),40%,10%));
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.6), inset 0 0 18px rgba(0,0,0,0.5);
  filter: brightness(0.82) saturate(0.92);
  transition: filter 0.5s var(--ease-soft);
}
@media (hover: hover) { .slide:hover .slide-window { filter: brightness(1.05) saturate(1.05); } }
.slide-window img { width: 100%; height: 100%; object-fit: cover; display: block; }
.slide-window::after {
  /* faint exposed horizon so placeholder reads as a photo */
  content: "";
  position: absolute; left: -10%; right: -10%; top: 55%; bottom: -10%;
  background: linear-gradient(180deg, transparent, hsla(var(--tint,30),55%,7%,0.8));
  filter: blur(4px);
}

/* glass sheen reflection */
.slide-glass {
  display: block;
  position: absolute; inset: 0;
  border-radius: 7px;
  pointer-events: none;
  background: linear-gradient(125deg,
    rgba(255,255,255,0.0) 30%,
    rgba(255,245,225,0.22) 46%,
    rgba(255,255,255,0.0) 56%,
    rgba(255,245,225,0.10) 70%,
    rgba(255,255,255,0.0) 80%);
  background-size: 250% 250%;
  background-position: 70% 70%;
  transition: background-position 0.6s var(--ease-soft), opacity 0.5s;
  opacity: 0.8;
  mix-blend-mode: screen;
}
@media (hover: hover) { .slide:hover .slide-glass { background-position: 20% 20%; opacity: 1; } }

/* number + title on the mount; two lines so a title is never cut mid-word */
.slide-num {
  position: absolute;
  right: 9%; top: 68%;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  color: var(--gold);
}
.slide-name {
  position: absolute;
  left: 9%; right: 26%; top: 65%;
  font-family: var(--serif);
  font-size: clamp(11px, 1.62vh, 15px);
  font-style: italic;
  line-height: 1.12;
  color: var(--ivory-dim);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* the flying clone used during insertion (positioned fixed by JS) */
.flying-slide {
  position: fixed;
  z-index: 80;
  pointer-events: none;
  transition: none;
  will-change: transform, opacity;
  filter: drop-shadow(0 24px 30px rgba(0,0,0,0.7));
}