* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  width: 100%;
  height: 100%;
  background: #000;
  overflow: hidden;
}

body.hide-cursor { cursor: none; }

#stage {
  position: fixed;
  inset: 0;
  background: #000;
}

/* --- Slides --- */
.slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--fade-ms, 1500ms) ease-in-out;
  display: grid;
  gap: 1.2vmin;
  background: #000;
}
.slide.visible { opacity: 1; }

.slide.layout-1 { grid-template-columns: 1fr; }
.slide.layout-2 { grid-template-columns: 1fr 1fr; }
.slide.layout-3 { grid-template-columns: 2fr 1fr; }
.slide.layout-3 .cell:nth-child(1) { grid-row: span 2; }
.slide.layout-3.mirror { grid-template-columns: 1fr 2fr; }
.slide.layout-3.mirror .cell:nth-child(1) { grid-column: 2; grid-row: span 2; }
/* Auto-placement's cursor skips row 1 once nth-child(1) has an explicit
   column, collapsing nth-child(3) into a zero-height implicit row — place
   the other two cells explicitly instead of relying on that. */
.slide.layout-3.mirror .cell:nth-child(2) { grid-column: 1; grid-row: 1; }
.slide.layout-3.mirror .cell:nth-child(3) { grid-column: 1; grid-row: 2; }
.slide.layout-3 { grid-template-rows: 1fr 1fr; }

/* Narrow/portrait screens: stack collages vertically. */
@media (orientation: portrait) {
  .slide.layout-2 { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }
  .slide.layout-3 { grid-template-columns: 1fr 1fr; grid-template-rows: 2fr 1fr; }
  .slide.layout-3 .cell:nth-child(1) { grid-row: 1; grid-column: span 2; }
  .slide.layout-3.mirror .cell:nth-child(1) { grid-row: 1; grid-column: span 2; }
  /* Portrait's own auto-placement (cells 2/3 side by side in row 2) works
     correctly; undo the landscape-only explicit placement above. */
  .slide.layout-3.mirror .cell:nth-child(2) { grid-column: auto; grid-row: auto; }
  .slide.layout-3.mirror .cell:nth-child(3) { grid-column: auto; grid-row: auto; }
}

/* --- Cells: blurred self-backdrop + contained photo, Ken Burns wrapper --- */
.cell {
  position: relative;
  overflow: hidden;
}

.kb {
  position: absolute;
  inset: 0;
  animation: kenburns var(--kb-dur, 9500ms) linear forwards;
}

@keyframes kenburns {
  from { transform: var(--kb-from, none); }
  to   { transform: var(--kb-to, none); }
}

.cell .backdrop {
  position: absolute;
  inset: -6%;
  width: 112%;
  height: 112%;
  object-fit: cover;
  filter: blur(38px) brightness(0.5) saturate(0.9);
}

.cell .photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}