/* Main page, layer from the former version 2: photographs at different volumes, a longer sequence in the lightbox,
   light under the tickets and a detail of the audience next to the hall. */

/* Hero: <picture> only chooses the portrait poster on phones; the image keeps its absolute layout. */
.stage-atmosphere>picture{display:contents}

/* Lightbox sequence: a click on any gallery photo opens it. */
.lightbox-nav{display:flex;align-items:center;justify-content:center;gap:22px;margin-top:14px;font-size:12px;letter-spacing:1.2px;color:#c9d6e2}
.lightbox-step{width:44px;height:44px;border:1px solid #c7deef55;border-radius:50%;background:transparent;color:var(--paper);font-size:18px;line-height:1}
.lightbox-step:hover{border-color:var(--paper)}
#photo-large{touch-action:pan-y}

/* Invitation: pass it on. */
.invite-share{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-top:24px}
.share-invite{display:inline-flex;align-items:center;gap:16px;min-height:46px;padding:11px 20px;border:1px solid var(--ink);border-radius:3px;background:transparent;color:var(--ink);font-size:14px;transition:background .2s,color .2s}
.share-invite:hover{background:var(--ink);color:var(--paper)}
.share-status{font-size:13px;line-height:1.5;color:var(--muted);overflow-wrap:anywhere}

/* Tickets: a body lying in a pool of stage light along the lower edge, below the text, as if at the front of the stage.
   The screen blend keeps only the light; the text never sits on the bright part. */
.tickets-section{position:relative;isolation:isolate;overflow:hidden;padding-bottom:118px}
.tickets-light{position:absolute;z-index:-1;left:-6%;bottom:-101px;width:60%;max-width:920px;height:auto;mix-blend-mode:screen;opacity:.5;pointer-events:none;-webkit-mask-image:linear-gradient(90deg,#000 55%,transparent 95%);mask-image:linear-gradient(90deg,#000 55%,transparent 95%)}
.calendar-link{display:inline-flex;align-items:center;gap:8px;min-height:32px;margin-top:6px;font-size:13px;color:#f5bc8e;border-bottom:1px solid #f5bc8e55}
.calendar-link:hover{color:#ffd2b4;border-color:#ffd2b4}

/* Venue: the audience in a small detail beside the empty hall. */
.venue-photo{position:relative}
.venue-photo .venue-detail{position:absolute;right:-8%;bottom:-12%;width:26%;height:auto;aspect-ratio:4/5;object-fit:cover;outline:7px solid var(--paper);box-shadow:0 24px 40px -24px #0b162666}

@media(max-width:760px){
  .lightbox-nav{gap:16px}
  .tickets-section{padding-bottom:92px}
  .tickets-light{left:-38%;bottom:-74px;width:170%;max-width:none;opacity:.45}
  .venue-photo{margin-bottom:24px}
  .venue-photo .venue-detail{right:14px;bottom:-24px;width:31%;outline-width:5px}
}
@media(prefers-reduced-motion:reduce){.share-invite{transition:none}}