/* ------------------------------------------------------------------
   THEME 3 — "galeria"
   White-cube museum gallery. Each slide hangs as a matted artwork on
   a soft-white wall; the chrome (outline capsule, mute) reads as a
   pair of quiet wall labels sharing the card's own surface language.
   No watermark, no added ink inside the artwork: the content of every
   slide renders exactly as the default — only the frame changes.
   ------------------------------------------------------------------ */

body[data-theme="galeria"] {
  background: #fafaf7;
}

/* --- the wall ----------------------------------------------------- */
body[data-theme="galeria"] .card {
  background:
    radial-gradient(120% 90% at 50% 0%, #ffffff 0%, #fafaf7 55%, #f4f4ef 100%);
  transition: opacity 0.7s cubic-bezier(0.33, 1, 0.68, 1),
              visibility 0s linear 0.7s;
}
body[data-theme="galeria"] .card.on {
  transition: opacity 0.7s cubic-bezier(0.33, 1, 0.68, 1);
}

/* --- the hung artwork --------------------------------------------- */
/* inner slide floats inside generous white margins, like a framed
   piece centered slightly above the visual midline of the wall.
   scale() only — never reflows or resizes the slide's own layout. */
body[data-theme="galeria"] .card-inner {
  transform: scale(0.855) translateY(-1.9%);
  transform-origin: 50% 50%;
  border-radius: 5px;
  overflow: hidden;
  box-shadow:
    0 1px 2px rgba(42, 35, 32, 0.05),
    0 12px 44px -18px rgba(42, 35, 32, 0.16),
    0 34px 80px -46px rgba(42, 35, 32, 0.14);
  transition: box-shadow 0.8s ease;
}

/* hairline frame edge only — no sheen gradient over the artwork */
body[data-theme="galeria"] .card-inner::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 9;
  background: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(42, 35, 32, 0.05);
}

/* --- outline capsule: a wall label beside the frame ---------------- */
/* full default height so the section list stays visible and scrollable;
   surface matches the card: off-white, hairline border, soft shadow.
   Sits entirely inside the bottom-left gutter. */
body[data-theme="galeria"] #outline {
  height: 138px;
  bottom: clamp(14px, 3vh, 34px);
  padding: 0.4rem 1.1rem;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(16px) saturate(1.1);
  -webkit-backdrop-filter: blur(16px) saturate(1.1);
  border: 1px solid rgba(42, 35, 32, 0.1);
  border-radius: 5px;
  box-shadow:
    0 1px 2px rgba(42, 35, 32, 0.05),
    0 12px 34px -16px rgba(42, 35, 32, 0.22);
  letter-spacing: 0.02em;
  transition: box-shadow 0.6s ease;
}
/* rows dissolve into the capsule surface at its edges instead of
   clipping mid-letter; overlay sits above the list, below nothing */
body[data-theme="galeria"] #outline::before,
body[data-theme="galeria"] #outline::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 16px;
  pointer-events: none;
  z-index: 2;
}
body[data-theme="galeria"] #outline::before {
  top: 0;
  background: linear-gradient(to bottom, rgba(255,255,255,0.95), rgba(255,255,255,0));
  border-radius: 5px 5px 0 0;
}
body[data-theme="galeria"] #outline::after {
  bottom: 0;
  background: linear-gradient(to top, rgba(255,255,255,0.95), rgba(255,255,255,0));
  border-radius: 0 0 5px 5px;
}
body[data-theme="galeria"] #outline:hover {
  box-shadow:
    0 1px 2px rgba(42, 35, 32, 0.06),
    0 16px 44px -16px rgba(42, 35, 32, 0.28);
}
body[data-theme="galeria"] #outline .sec {
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.5;
  color: #4a423d;
}
body[data-theme="galeria"] #outline a {
  color: #2a2320;
  opacity: 0.52;
  transition: opacity 0.4s ease;
}
body[data-theme="galeria"] #outline a:hover { opacity: 0.9; }
body[data-theme="galeria"] #outline a.here {
  opacity: 1;
  font-weight: 600;
  color: #2a2320;
}
body[data-theme="galeria"] #outline .list {
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

/* --- mute: a matching small capsule docked beside the label -------- */
body[data-theme="galeria"] #mute, body[data-theme="galeria"] #vmute {
  bottom: clamp(14px, 3vh, 34px);
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  border: 1px solid rgba(42, 35, 32, 0.1);
  border-radius: 5px;
  box-shadow:
    0 1px 2px rgba(42, 35, 32, 0.05),
    0 12px 34px -16px rgba(42, 35, 32, 0.2);
  color: #4a423d;
  opacity: 0.8;
  transition: opacity 0.5s ease, box-shadow 0.6s ease;
}
body[data-theme="galeria"] #mute:hover, body[data-theme="galeria"] #vmute:hover {
  opacity: 1;
  box-shadow:
    0 1px 2px rgba(42, 35, 32, 0.06),
    0 16px 44px -16px rgba(42, 35, 32, 0.28);
}