/* ═══════════════════════════════════════════════════════════
   SCENE 07 — Memory Lane (date gallery)
═══════════════════════════════════════════════════════════ */

#scene-07 {
  background: #000;
  z-index: 42;
}

body.scene7-active #stage #scene-07 {
  animation: s7FadeIn 1.0s both;
  pointer-events: auto;
}
@keyframes s7FadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ── Background photo ───────────────────────────────────── */
#s7-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: opacity 0.4s ease;
  opacity: 0;
}

/* ── Gradient overlays ──────────────────────────────────── */
/* Top: darkens behind caption text */
#s7-caption-wrap {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 26px 50px 70px;
  background: linear-gradient(to bottom, rgba(0,0,0,0.75) 0%, transparent 100%);
  z-index: 10;
  pointer-events: none;
}

/* Bottom: darkens behind buttons */
#s7-bottom-veil {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 110px;
  background: linear-gradient(to top, rgba(0,0,0,0.70) 0%, transparent 100%);
  z-index: 10;
  pointer-events: none;
}

/* ── Caption text ───────────────────────────────────────── */
#s7-caption {
  font-family: 'Georgia', serif;
  font-size: 19px;
  color: #f5f0e8;
  line-height: 1.65;
  text-align: center;
  text-shadow: 0 1px 8px rgba(0,0,0,0.9);
  margin: 0;
  opacity: 0;
  transition: opacity 0.55s ease;
}
#s7-caption.visible { opacity: 1; }

/* ── Counter ────────────────────────────────────────────── */
#s7-counter {
  position: absolute;
  bottom: 76px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Georgia', serif;
  font-size: 13px;
  letter-spacing: 3px;
  color: rgba(255,255,255,0.55);
  margin: 0;
  z-index: 15;
  pointer-events: none;
}

/* ── Navigation buttons ─────────────────────────────────── */
.s7-btn {
  position: absolute;
  bottom: 28px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 32px;
  font-family: 'Bangers', 'Impact', cursive;
  font-size: 30px;
  letter-spacing: 2px;
  border: 3px solid rgba(255,255,255,0.25);
  border-radius: 6px;
  cursor: pointer;
  transition: opacity 0.3s ease, box-shadow 0.08s, background 0.08s;
  z-index: 20;
}

/* Back — dark ghost style */
#s7-back-btn {
  left: 52px;
  background: rgba(20,20,20,0.80);
  color: #f0ede8;
  box-shadow: 3px 3px 0 rgba(0,0,0,0.5);
  opacity: 0;
  pointer-events: none;
}
#s7-back-btn.s7-visible {
  opacity: 1;
  pointer-events: auto;
}
#s7-back-btn:hover  { background: rgba(50,50,50,0.9); }
#s7-back-btn:active { transform: translate(2px,2px); }

/* Next & Continue — red */
#s7-next-btn,
#s7-continue-btn {
  right: 52px;
  background: #e53935;
  color: #fff;
  border-color: #000;
  box-shadow: 4px 4px 0 #000;
}
#s7-next-btn:hover,
#s7-continue-btn:hover  { background: #ef5350; box-shadow: 6px 6px 0 #000; }
#s7-next-btn:active,
#s7-continue-btn:active { background: #b71c1c; box-shadow: 2px 2px 0 #000; transform: translate(2px,2px); }

#s7-continue-btn { display: none; }

/* ── Portrait adjustments ───────────────────────────────── */
@media (orientation: portrait) {
  #s7-caption-wrap { padding: 22px 32px 56px; }
  #s7-caption       { font-size: 16px; }
  .s7-btn           { font-size: 26px; padding: 10px 24px; bottom: 22px; }
  #s7-back-btn      { left: 28px; }
  #s7-next-btn,
  #s7-continue-btn  { right: 28px; }
  #s7-counter       { bottom: 66px; }
  #s7-bottom-veil   { height: 90px; }
}