/* =========================================================================
   The screen at the front of the room.

   Everything is scoped under .evshow. This bundle loads on every page in the
   app, the same as the others, and none of it may touch anything that is not
   the slideshow.

   Sized in vw and vh throughout rather than pixels, because the same page has
   to be right on a phone held up at a reception, a 55 inch television in a
   foyer, and a projector at 1024x768.
   ========================================================================= */

.evshow {
  position: fixed;
  inset: 0;
  background: #070a0b;
  overflow: hidden;
  z-index: 9999;
}

/* ---------------------------------------------------------------- the stage */

.evshow .evstage { position: absolute; inset: 0; }

/* A portrait photograph on a landscape screen leaves two black bars. Filling
   them with a blown-up, blurred copy of the same photograph keeps the frame
   feeling like it belongs to the picture instead of like a mistake. */
.evshow .evblur {
  position: absolute;
  inset: -6%;
  background-position: center;
  background-size: cover;
  filter: blur(42px) saturate(1.25) brightness(0.5);
  transform: scale(1.12);
  transition: background-image .6s linear;
}

.evshow .evframe {
  position: absolute;
  inset: 0;
  margin: auto;
  max-width: 94vw;
  max-height: 94vh;
  width: auto;
  height: auto;
  object-fit: contain;
  opacity: 0;
  transition: opacity .9s ease-in-out;
  border-radius: 6px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .55);
}

.evshow .evframe.on { opacity: 1; }

/* ---------------------------------------------------------------- who took it */

.evshow .evwho {
  position: absolute;
  left: 3vw;
  bottom: 3.4vh;
  color: #fff;
  font-size: clamp(15px, 1.7vw, 30px);
  font-weight: 600;
  letter-spacing: .01em;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .85);
  opacity: 0;
  transition: opacity .5s ease;
}

.evshow .evwho.on { opacity: .92; }

/* ---------------------------------------------------------------- the invitation

   The reason this is not a screensaver. Somebody watching a photograph they
   recognise needs the answer to "how do I put mine on there" already in front
   of them, so the code never leaves the screen. */

.evshow .evjoin {
  position: absolute;
  right: 2.4vw;
  bottom: 2.8vh;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 20px 14px 14px;
  background: rgba(255, 255, 255, .95);
  border-radius: 14px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .5);
}

.evshow .evjoinqr {
  width: clamp(72px, 7vw, 128px);
  height: clamp(72px, 7vw, 128px);
}

.evshow .evjoinqr svg { display: block; width: 100%; height: 100%; }

.evshow .evjointext {
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: #101413;
}

.evshow .evjointext b { font-size: clamp(14px, 1.4vw, 26px); }

.evshow .evjointext span {
  font-size: clamp(11px, 1vw, 18px);
  color: #4a5250;
}

.evshow .evjoinlogo {
  max-height: clamp(20px, 2vw, 38px);
  max-width: 160px;
  object-fit: contain;
  margin-bottom: 4px;
}

/* ---------------------------------------------------------------- waiting */

.evshow .evshowempty {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
  color: #fff;
  padding: 6vw;
  transition: opacity .6s ease;
}

.evshow .evshowempty.gone { opacity: 0; pointer-events: none; }

.evshow .evshowempty h1 {
  font-size: clamp(26px, 4vw, 68px);
  margin: 0 0 14px;
  font-weight: 700;
}

.evshow .evshowempty p {
  font-size: clamp(14px, 1.6vw, 26px);
  margin: 0;
  color: rgba(255, 255, 255, .72);
}

/* ---------------------------------------------------------------- controls

   Set up once on a device that then sits untouched for three hours, so this
   stays out of the way and off the thing the room is looking at. */

.evshow .evfull {
  position: absolute;
  top: 14px;
  left: 14px;
  font: inherit;
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .25);
  background: rgba(0, 0, 0, .4);
  color: rgba(255, 255, 255, .55);
  cursor: pointer;
  opacity: 0;
  transition: opacity .25s ease;
}

.evshow:hover .evfull { opacity: 1; }
.evshow .evfull:focus-visible { opacity: 1; outline: 2px solid #fff; }

@media (hover: none) {
  .evshow .evfull { opacity: .5; }
}

/* Somebody in the room may have asked for less movement. The crossfade is the
   only animation here, so honouring that means cutting rather than fading. */
@media (prefers-reduced-motion: reduce) {
  .evshow .evframe { transition: none; }
  .evshow .evblur { transition: none; }
}