/* Projector-first layout. The QR occupies its own track and never covers photos. */
.living-canvas{position:relative;min-width:0;min-height:0;overflow:hidden;isolation:isolate}
.living-empty{height:100%;display:flex;flex-direction:column;justify-content:center;text-align:center;padding:20px}
.living-empty[hidden]{display:none}
.living-empty h1{font-size:clamp(2rem,5vw,5rem)}
.living-photo{position:absolute;margin:0;overflow:hidden;background:#454b3d;box-shadow:0 8px 25px #0004;opacity:1;transition:left 7s cubic-bezier(.22,.68,.2,1),top 7s cubic-bezier(.22,.68,.2,1),width 7s cubic-bezier(.22,.68,.2,1),height 7s cubic-bezier(.22,.68,.2,1),border-radius 8s ease,opacity 1.8s ease;will-change:left,top,width,height}
.living-photo.entering,.living-photo.leaving{opacity:0}
.living-photo.leaving{z-index:0;pointer-events:none}
.living-photo:not(.leaving){z-index:1}
.living-photo.featured{box-shadow:0 0 0 1px #c5ccb870,0 10px 35px #0005}
.living-photo img{position:absolute;width:100%;height:100%;display:block}
.living-photo .photo-original{object-fit:cover;object-position:center;padding:0}
@media(prefers-reduced-motion:reduce){.living-photo{transition:none;will-change:auto}}
.motion-enabled .living-photo{transition:left 7s cubic-bezier(.22,.68,.2,1),top 7s cubic-bezier(.22,.68,.2,1),width 7s cubic-bezier(.22,.68,.2,1),height 7s cubic-bezier(.22,.68,.2,1),border-radius 8s ease,opacity 1.8s ease!important}
.motion-off .living-photo{transition:none!important}
.projector {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(200px, 18vw, 320px);
  grid-template-rows: auto minmax(0, 1fr);
  height: 100dvh;
  gap: clamp(12px, 1.6vw, 30px);
  padding: clamp(12px, 1.6vw, 30px);
}
.projector > .kiosk-top { grid-column: 1 / -1; }
.projector > .collage,
.projector > .collage-empty { padding: 0; min-width: 0; min-height: 0; }
.projector > .qr-fixed {
  position: static;
  transform: none;
  width: 100%;
  align-self: center;
  display: block;
  padding: clamp(12px, 1.4vw, 24px);
}
.projector .qr-fixed h3 { margin: 12px 0; font-size: clamp(1.4rem, 2vw, 2rem); }
.projector .qr-fixed p { font-size: clamp(.875rem, 1.1vw, 1.15rem); }
.projector .collage.count-3 img:last-child { grid-column: 1 / -1; }
.projector .collage.count-5 img:last-child { grid-column: span 2; }
.projector .collage img { object-fit: contain; min-width: 0; min-height: 0; }
.projector .collage.count-1,.projector .collage.count-2 { grid-template-rows: minmax(0,1fr); }
@media (orientation: portrait) {
  .projector {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
  }
  .projector > .qr-fixed {
    display: grid;
    grid-template-columns: clamp(120px, 25vw, 200px) minmax(0, 1fr);
    column-gap: 16px;
    row-gap: 8px;
    align-items: center;
  }
  .projector .qr-fixed img { grid-row: 1 / 3; }
  .projector .qr-fixed h3 { align-self: end; margin: 0; }
  .projector .qr-fixed p { align-self: start; margin: 0; }
  .projector .collage { grid-template-columns: repeat(2,minmax(0,1fr)); grid-template-rows: repeat(3,minmax(0,1fr)); }
  .projector .collage.count-1 { grid-template-columns: 1fr; grid-template-rows: 1fr; }
  .projector .collage.count-2 { grid-template-columns: 1fr; grid-template-rows: repeat(2,minmax(0,1fr)); }
  .projector .collage.count-3,.projector .collage.count-4 { grid-template-rows: repeat(2,minmax(0,1fr)); }
  .projector .collage.count-7,.projector .collage.count-8 { grid-template-rows: repeat(4,minmax(0,1fr)); }
  .projector .collage-empty h1 { font-size: clamp(2rem,6vw,4rem); }
}
@media (orientation: landscape) and (max-height: 550px) {
  .projector { grid-template-columns: minmax(0,1fr) 180px; gap: 10px; padding: 10px; }
  .projector .qr-fixed { padding: 10px; }
  .projector .qr-fixed h3 { font-size: 1.1rem; margin: 6px 0; }
  .projector .qr-fixed p { font-size: .8rem; }
  .projector .collage-empty h1 { font-size: 2.3rem; }
}

/* A stationary central island, with the living photo field arranged around it. */
.projector{position:relative;display:block;padding:18px;overflow:hidden}
.projector>.kiosk-top{position:relative;z-index:5}
.projector>.living-canvas{position:absolute;inset:76px 18px 18px}
.projector>.qr-fixed{position:absolute;left:50%;top:50%;right:auto;bottom:auto;transform:translate(-50%,-50%);width:clamp(170px,17vw,285px);display:block;padding:16px;z-index:4;border-radius:12px;box-shadow:0 12px 48px #0005}
.projector .qr-fixed img{width:100%;height:auto}
.projector .qr-fixed h3{font-size:clamp(1.1rem,1.65vw,1.7rem);margin:8px 0}
.projector .qr-fixed p{font-size:clamp(.8rem,1vw,1rem);margin:0}
.projector .living-empty{justify-content:flex-start;padding:20px}
.projector .living-empty h1{font-size:clamp(1.5rem,3vw,3rem);margin-bottom:12px}
@media(orientation:portrait){.projector>.qr-fixed{width:clamp(150px,38vw,240px);padding:12px}.projector>.living-canvas{inset:88px 10px 10px}.projector{padding:12px}.projector .qr-fixed h3{font-size:1.1rem}.projector .qr-fixed p{font-size:.8rem}}
@media(orientation:landscape) and (max-height:550px){.projector>.living-canvas{inset:60px 10px 10px}.projector>.qr-fixed{width:155px;padding:10px}.projector .qr-fixed h3{font-size:1rem}.projector .qr-fixed p{font-size:.75rem}}

/* Animate compositor layers, never per-frame layout or rounded clipping. */
.living-photo,.motion-enabled .living-photo{transition:opacity 1.8s ease!important;will-change:transform,opacity;transform-origin:0 0;contain:layout paint;box-shadow:none}
.living-photo.featured{box-shadow:0 0 0 1px #c5ccb870}
.motion-off .living-photo{transition:none!important;will-change:auto}

.living-photo,.motion-enabled .living-photo{will-change:opacity;transition:opacity 1.8s ease!important}.motion-off .living-photo{transition:none!important;will-change:auto}

/* Brief, local dissolves; idle photos need no reserved compositor layers. */
.living-photo,.motion-enabled .living-photo{will-change:auto;transition:opacity .8s ease!important}

/* A botanical-sage heart surrounds the unmodified QR and its white quiet zone. */
.projector>.qr-fixed{width:clamp(250px,24vw,350px);padding:14px 18px 20px;border:1px solid #dcd9cd;background:#fffdf8}
.heart-qr{position:relative;width:100%;aspect-ratio:320/300;margin:0 auto 9px}
.heart-qr .heart-outline{display:block;width:100%;height:100%}
.projector .heart-qr img{position:absolute;width:60%;height:auto;left:20%;top:24%;border-radius:3px}
.projector .qr-fixed h3{font-size:clamp(1.1rem,1.6vw,1.5rem);line-height:1.2;margin:4px 0 12px;color:#48543e}
.projector .qr-fixed p{font-size:clamp(.85rem,1.05vw,1rem);line-height:1.45;color:#78553e}
@media(orientation:portrait){.projector>.qr-fixed{width:clamp(220px,45vw,300px);padding:12px 14px 16px}}
@media(max-height:600px){.projector>.qr-fixed{width:220px;padding:8px 12px 12px}.projector .qr-fixed h3{font-size:1rem;margin-bottom:6px}.projector .qr-fixed p{font-size:.8rem}.heart-qr{max-width:180px}}

.heart-code{width:100%;margin:0 auto 12px;background:white;border-radius:8px;overflow:hidden}.projector .heart-code img{display:block;width:100%;height:auto}

/* Keep the live photo display in the wedding palette, including exposed gaps. */
.collage-shell.projector{background:#e8eadd;color:#302e28}
.projector .kiosk-top .eyebrow{color:#48543e}
.projector .display-controls a,.projector .display-controls button{color:#48543e;border-color:#b6bea9;background:#fffdf8}
.projector>.qr-fixed{box-shadow:0 8px 28px #48543e18}


/* The centered invitation is the empty-state message; avoid text behind it. */
.projector .living-empty{visibility:hidden}