#historia .history-stage { position: relative; isolation: isolate; }
#historia .history-board { opacity: 0; pointer-events: none; transition: opacity 1.6s ease; }
#historia .history-board.is-active { opacity: 1; pointer-events: auto; z-index: 1; }
#historia .history-mosaic { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); grid-template-rows: repeat(4,minmax(0,1fr)); gap: 8px; padding: 10px; background: linear-gradient(145deg,#102c50,#07172f); }
#historia .history-mosaic .history-photo { position: relative; width: 100%; height: 100%; min-height: 0; aspect-ratio: auto; padding: 2px; border: 1px solid #b3d6ff22; border-radius: 12px; background: #071a3d; box-shadow: 0 4px 16px #0003; }
#historia .history-mosaic .history-photo::before { content: ''; position: absolute; inset: 0; background: var(--history-photo) center / cover; filter: blur(14px); opacity: .3; transform: scale(1.12); }
#historia .history-mosaic .history-photo img { position: absolute; inset: 7%; z-index: 1; display: block; width: 86%; height: 86%; margin: 0; object-fit: contain; object-position: center; transform: none; border-radius: 0; }
#historia .history-mosaic .history-photo:nth-child(1) { grid-area: 1 / 1 / 3 / 3; }
#historia .history-mosaic .history-photo:nth-child(2) { grid-area: 1 / 3 / 2 / 5; }
#historia .history-mosaic .history-photo:nth-child(3) { grid-area: 2 / 3 / 3 / 4; }
#historia .history-mosaic .history-photo:nth-child(4) { grid-area: 2 / 4 / 3 / 5; }
#historia .history-mosaic .history-photo:nth-child(5) { grid-area: 3 / 1 / 4 / 2; }
#historia .history-mosaic .history-photo:nth-child(6) { grid-area: 3 / 2 / 4 / 3; }
#historia .history-mosaic .history-photo:nth-child(7) { grid-area: 3 / 3 / 5 / 5; }
#historia .history-mosaic .history-photo:nth-child(8) { grid-area: 4 / 1 / 5 / 2; }
#historia .history-mosaic .history-photo:nth-child(9) { grid-area: 4 / 2 / 5 / 3; }
#historia .history-mosaic .history-photo:nth-child(n+10) { display: none; }
@media(max-width:480px) { #historia .history-mosaic { gap: 5px; padding: 7px; } #historia .history-mosaic .history-photo { border-radius: 8px; } }
@media(prefers-reduced-motion:reduce) { #historia .history-board { transition: none; } }

/* Stagger each tile so photographs appear and move gently within the collage. */
#historia .history-mosaic .history-photo { opacity: 0; transform: translateY(4px); transition: opacity 1.2s ease, transform 1.2s ease; }
#historia .history-mosaic.is-active .history-photo { opacity: 1; transform: translateY(0); }
#historia .history-mosaic .history-photo:nth-child(3n+1) { transition-delay: .12s; }
#historia .history-mosaic .history-photo:nth-child(3n+2) { transition-delay: .28s; }
#historia .history-mosaic .history-photo:nth-child(3n) { transition-delay: .44s; }
@media(prefers-reduced-motion:reduce) { #historia .history-mosaic .history-photo { transition: none; transform: none; } }

#historia .history-mosaic .history-photo img.is-auto-zooming { will-change: transform; transform-origin: center; }