/* Entry 009 — The fading archive (rebuilt)
   Scene art direction: a calm, bright photo library — real photographs in a
   soft iOS-style grid, floating in a frosted-white panel над a dreamy, blurred
   landscape. A LIGHT scene, on purpose: a departure from the dark cinematic
   entries around it. Kept photos hold full colour; the rest desaturate and
   dim, the way a year softens. One accent: a warm honey, for what's kept.
   Display serif: Spectral (the memory line). Chrome: system sans. */

.fade-scene {
  --keep: #c0863a;            /* warm honey — the one accent */
  --keep-glow: rgba(214, 158, 80, 0.6);
  --ink: #2a2620;             /* warm ink, never pure black */
  --soft: #8d8576;            /* faded label ink */
  --panel: rgba(252, 250, 246, 0.74);

  position: relative;
  display: grid;
  place-items: center;
  min-height: 820px;
  padding: 104px 32px;
  border-color: rgba(214, 206, 192, 0.9);
  background: #efe9e0;        /* warm paper base, in case the photo is slow */
}

/* layer 1 — the dreamy, blurred photographic backdrop */
.haze {
  position: absolute;
  inset: -48px;
  z-index: 0;
  background: center / cover no-repeat
    url("../../public/media/backgrounds/pastel-06-johannes.jpg");
  filter: blur(46px) saturate(1.12) brightness(1.06);
  transform: scale(1.06);
  pointer-events: none;
}

/* a soft light scrim so the white panel reads as floating, not pasted */
.fade-scene::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 30%, rgba(255, 253, 248, 0.5), transparent 70%),
    linear-gradient(180deg, rgba(250, 247, 241, 0.36) 0%, rgba(236, 228, 216, 0.42) 100%);
}

/* keep grain + vignette quiet on this bright scene */
.fade-scene .scene-grain { opacity: 0.05; }
.fade-scene .scene-vignette { box-shadow: inset 0 0 150px rgba(70, 56, 36, 0.2); }

/* ------------------------------------------------------------------ */
/* THE COMPONENT — a photo library that forgets                        */
/* ------------------------------------------------------------------ */

.library {
  position: relative;
  z-index: 2;
  width: min(560px, 100%);
  padding: 26px 26px 24px;
  border-radius: 30px;
  font-family: var(--ui-sans);
  color: var(--ink);
  background: var(--panel);
  border: 1px solid rgba(255, 255, 255, 0.62);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.8) inset,
    0 40px 100px rgba(78, 62, 38, 0.26),
    0 10px 30px rgba(78, 62, 38, 0.14);
  backdrop-filter: blur(26px) saturate(1.3);
  -webkit-backdrop-filter: blur(26px) saturate(1.3);
}

.lib-bar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.lib-title h2 {
  margin: 0;
  font-size: 23px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink);
}

.lib-sub {
  margin: 3px 0 0;
  font-size: 12.5px;
  letter-spacing: 0.01em;
  color: var(--soft);
}
.lib-sub b { color: var(--keep); font-weight: 700; font-variant-numeric: tabular-nums; }

.lib-fade {
  flex: none;
  border: 1px solid rgba(120, 100, 70, 0.28);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.42);
  padding: 9px 16px;
  font: 600 12.5px/1 var(--ui-sans);
  color: #6a5c44;
  cursor: pointer;
  transition: background 200ms ease, border-color 200ms ease, color 200ms ease, opacity 200ms ease;
}
.lib-fade:hover { background: rgba(255, 255, 255, 0.72); border-color: rgba(120, 100, 70, 0.45); }
.lib-fade:disabled { opacity: 0.5; cursor: default; }

/* ---- the grid ---- */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.tile {
  position: relative;
  aspect-ratio: 1 / 1;
  padding: 0;
  border: none;
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  background: #e7e2d9;
  box-shadow: 0 4px 14px rgba(70, 56, 36, 0.12);
  transition: box-shadow 360ms ease, transform 360ms cubic-bezier(0.2, 0.6, 0.2, 1);
  outline: none;
}

.tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* default state = softening: desaturated, dimmed */
  filter: grayscale(0.52) brightness(1.07) contrast(0.93);
  opacity: 0.72;
  transition: filter 850ms ease, opacity 850ms ease, transform 700ms cubic-bezier(0.2, 0.6, 0.2, 1);
}

.tile:hover img,
.tile:focus-visible img { transform: scale(1.05); }

.tile:hover,
.tile:focus-visible {
  box-shadow: 0 14px 34px rgba(70, 56, 36, 0.26);
  z-index: 2;
}

.tile:focus-visible { outline: 2px solid var(--keep); outline-offset: 2px; }

/* kept = vivid, with a quiet honey ring + indicator */
.tile.kept {
  box-shadow: 0 0 0 2px var(--keep), 0 14px 34px rgba(70, 56, 36, 0.22);
}
.tile.kept img {
  filter: saturate(1.06) contrast(1.02);
  opacity: 1;
}

/* deep fade = the year exhales */
.tile.deepfade img {
  filter: grayscale(0.92) brightness(1.13) contrast(0.85) blur(1.4px);
  opacity: 0.42;
}

/* the kept indicator — a small filled honey dot, top-right */
.dot {
  position: absolute;
  top: 9px;
  right: 9px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--keep);
  border: 2px solid rgba(255, 252, 246, 0.92);
  box-shadow: 0 0 10px var(--keep-glow);
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 300ms ease, transform 300ms cubic-bezier(0.2, 0.7, 0.2, 1.3);
}
.tile.kept .dot { opacity: 1; transform: scale(1); }

/* ---- the memory line (soul voice, serif) ---- */
.cap {
  margin: 18px 2px 0;
  min-height: 26px;
  display: flex;
}
.cap figcaption {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
}
.cap-line {
  font-family: "Spectral", "Newsreader", Georgia, serif;
  font-style: italic;
  font-size: 18px;
  line-height: 1.3;
  color: #4a4234;
  transition: color 240ms ease;
}
.cap-status {
  flex: none;
  font-size: 10.5px;
  font-weight: 650;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--soft);
  white-space: nowrap;
}
.cap-status.is-kept { color: var(--keep); }

.scene-credit.on-light { color: rgba(74, 62, 44, 0.4); }

@media (prefers-reduced-motion: reduce) {
  .tile img, .tile, .dot { transition: none; }
}

@media (max-width: 720px) {
  .fade-scene { padding: 56px 14px; min-height: 0; }
  .library { padding: 18px 16px 18px; border-radius: 24px; }
  .grid { gap: 7px; }
  .tile { border-radius: 13px; }
  .cap figcaption { flex-direction: column; gap: 3px; }
  .cap-status { align-self: flex-start; }
}