/* The isolated layer participates behind the existing document, never above it. */
body:has(> .memory-tape) { isolation: isolate; }
.memory-tape {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  overflow: hidden; contain: strict; opacity: 0;
  transition: opacity var(--retreat, 1600ms) ease-out;
  -webkit-mask-image: linear-gradient(transparent, #000 18%, #000 80%, transparent);
  mask-image: linear-gradient(transparent, #000 18%, #000 80%, transparent);
}
.memory-tape[data-ready="true"] { opacity: var(--active, .09); }
.memory-tape[data-ready="true"][data-idle="true"] {
  opacity: var(--idle, .22); transition-duration: var(--surface, 12000ms);
}
.memory-tape > .memory-tape-picture {
  position: absolute; inset: -2px; width: calc(100% + 4px); height: calc(100% + 4px);
  object-fit: cover; object-position: var(--position, 50% 50%);
  filter: saturate(.28) contrast(.72) brightness(.8);
}
.memory-tape > video { opacity: 0; }
.memory-tape > video[data-current="true"] { opacity: 1; }
/* A soft central shadow keeps the crisp device and its original lighting dominant. */
.memory-tape::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 48%, #191b1b66 0%, #191b1b24 36%, transparent 68%);
}
.memory-tape[data-interruption="dropout"] > .memory-tape-picture { visibility: hidden; }
.memory-tape[data-interruption="sync"] > video[data-current="true"] { transform: translateY(.7px); }
.memory-tape[data-interruption="exposure"] > video[data-current="true"] { filter: saturate(.28) contrast(.71) brightness(.83) !important; }
@media (max-width: 700px), (pointer: coarse) {
  .memory-tape > .memory-tape-picture { object-position: var(--mobile-position, 64% 50%); }
  .memory-tape::after { background: radial-gradient(ellipse at 50% 50%, #191b1b70, transparent 85%); }
}
@media (prefers-reduced-motion: reduce) {
  .memory-tape { transition: none !important; }
  .memory-tape > video { display: none; }
}