/*
 * The big screen (ScreensController, layouts/screen): the layouts of the wall and of the slideshow
 * depend on how many messages are shown and on their length, which Tailwind classes can't express
 * simply. Sizes are in vw so that the screen looks the same whatever the projector's resolution.
 * Colours are those of config/tailwind.config.js (night, ink, confetti).
 */

.screen-page {
  --night-950: #0b0719;
  --night-800: #1b1338;
  --night-600: #33275f;
  --ink: #f6f2ff;
  --ink-muted: #b9b0d8;
  --gap: 1.1vw;
}

.screen-page.cursor-hidden,
.screen-page.cursor-hidden * {
  cursor: none !important;
}

/* The confetti colours of the logo, one per card */
.accent-0 { --accent: #ef4b45; }
.accent-1 { --accent: #e64b93; }
.accent-2 { --accent: #8b6cf0; }
.accent-3 { --accent: #27b8d6; }
.accent-4 { --accent: #c6d84a; }
.accent-5 { --accent: #f68a4e; }

/* Background: slow drifting lights */
.screen-glow {
  position: absolute;
  border-radius: 9999px;
  filter: blur(8vw);
  opacity: .35;
  will-change: transform;
  animation: screen-drift 28s ease-in-out infinite alternate;
}

@keyframes screen-drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(6vw, -4vw, 0) scale(1.15); }
}

/* ---------- A message ---------- */

.screen-message {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border-radius: 1.4vw;
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--accent) 22%, transparent), transparent 55%),
    var(--night-800);
  border: .22vw solid color-mix(in srgb, var(--accent) 70%, transparent);
  box-shadow: 0 1vw 3vw rgba(0, 0, 0, .35);
  animation: screen-pop .6s cubic-bezier(.2, .9, .3, 1.2) both;
}

@keyframes screen-pop {
  0% { opacity: 0; transform: scale(.9) translateY(1.5vw); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

.screen-message__photo {
  flex: 1 1 0;
  min-height: 0;
  background: var(--night-950);
}

.screen-message__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.screen-message__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .6vw;
  padding: 1.2vw 1.4vw;
  min-height: 0;
}

.screen-message:not(.has-photo) .screen-message__content {
  flex: 1 1 auto;
}

.screen-message__body {
  margin: 0;
  color: var(--ink);
  font-weight: 800;
  line-height: 1.2;
  overflow-wrap: anywhere;
  white-space: pre-line;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.screen-message__author {
  margin: 0;
  color: var(--accent);
  font-family: "Baloo 2", Nunito, sans-serif;
  font-weight: 800;
  letter-spacing: .02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.screen-message__quote {
  position: absolute;
  top: -.8vw;
  right: 1vw;
  font-family: "Baloo 2", Nunito, sans-serif;
  font-size: 9vw;
  line-height: 1;
  color: var(--accent);
  opacity: .18;
  pointer-events: none;
}

/* ---------- Wall: the newest message featured on the left half, the others on the right ---------- */

.screen-messages--wall {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(6, minmax(0, 1fr));
  gap: var(--gap);
  height: 100%;
}

.screen-messages--wall .screen-message { grid-column: span 1; grid-row: span 2; }
.screen-messages--wall .screen-message .screen-message__body { font-size: 1.35vw; -webkit-line-clamp: 4; }
.screen-messages--wall .screen-message.len-s .screen-message__body { font-size: 1.7vw; }
.screen-messages--wall .screen-message.has-photo .screen-message__body { -webkit-line-clamp: 2; font-size: 1.15vw; }
.screen-messages--wall .screen-message .screen-message__author { font-size: 1.1vw; }
.screen-messages--wall .screen-message .screen-message__quote { display: none; }

/* The others, laid out by their number */
.screen-messages--wall[data-count="2"] .screen-message { grid-column: span 2; grid-row: span 6; }
.screen-messages--wall[data-count="3"] .screen-message { grid-column: span 2; grid-row: span 3; }
.screen-messages--wall[data-count="4"] .screen-message { grid-column: span 2; grid-row: span 2; }
.screen-messages--wall[data-count="5"] .screen-message { grid-column: span 1; grid-row: span 3; }
.screen-messages--wall[data-count="2"] .screen-message .screen-message__body,
.screen-messages--wall[data-count="3"] .screen-message .screen-message__body { font-size: 1.9vw; -webkit-line-clamp: 6; }
.screen-messages--wall[data-count="4"] .screen-message .screen-message__body,
.screen-messages--wall[data-count="5"] .screen-message .screen-message__body { -webkit-line-clamp: 7; }
.screen-messages--wall[data-count="2"] .screen-message.has-photo .screen-message__body,
.screen-messages--wall[data-count="3"] .screen-message.has-photo .screen-message__body { font-size: 1.5vw; -webkit-line-clamp: 3; }

/* The featured one */
.screen-messages--wall .screen-message:first-child {
  grid-column: 1 / 3;
  grid-row: 1 / 7;
  border-width: .3vw;
  box-shadow: 0 0 3vw color-mix(in srgb, var(--accent) 45%, transparent), 0 1vw 3vw rgba(0, 0, 0, .4);
}

.screen-messages--wall[data-count="1"] .screen-message:first-child { grid-column: 1 / -1; }

.screen-messages--wall .screen-message:first-child .screen-message__content { padding: 2vw 2.4vw; gap: 1vw; }
.screen-messages--wall .screen-message:first-child .screen-message__body { font-size: 2.6vw; -webkit-line-clamp: 8; }
.screen-messages--wall .screen-message:first-child.len-s .screen-message__body { font-size: 3.8vw; }
.screen-messages--wall .screen-message:first-child.len-l .screen-message__body { font-size: 2vw; -webkit-line-clamp: 10; }
.screen-messages--wall .screen-message:first-child.has-photo .screen-message__photo { flex: 1.6 1 0; }
.screen-messages--wall .screen-message:first-child.has-photo .screen-message__body { font-size: 2vw; -webkit-line-clamp: 3; }
.screen-messages--wall .screen-message:first-child .screen-message__author { font-size: 1.8vw; }
.screen-messages--wall .screen-message:first-child .screen-message__quote { display: block; }

/* ---------- Slideshow: one message at a time, full stage ---------- */

.screen-messages--slideshow {
  position: relative;
  height: 100%;
}

.screen-messages--slideshow .screen-message {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(.97);
  transition: opacity .8s ease, transform .8s ease;
  animation: none;
  border-width: .3vw;
  box-shadow: 0 0 4vw color-mix(in srgb, var(--accent) 40%, transparent), 0 1vw 3vw rgba(0, 0, 0, .4);
}

/* Before the controller starts, the newest one shows */
.screen-messages--slideshow:not(.is-running) .screen-message:first-child,
.screen-messages--slideshow .screen-message.is-current {
  opacity: 1;
  transform: none;
  z-index: 1;
}

.screen-messages--slideshow .screen-message.has-photo { flex-direction: row; }
.screen-messages--slideshow .screen-message.has-photo .screen-message__photo { flex: 1.3 1 0; height: 100%; }
.screen-messages--slideshow .screen-message.has-photo .screen-message__photo img { object-fit: contain; }
.screen-messages--slideshow .screen-message.has-photo .screen-message__content { flex: 1 1 0; }
.screen-messages--slideshow .screen-message__content { padding: 3vw 3.5vw; gap: 1.6vw; }
.screen-messages--slideshow .screen-message__body { font-size: 3.4vw; -webkit-line-clamp: 9; }
.screen-messages--slideshow .screen-message.len-s .screen-message__body { font-size: 5vw; }
.screen-messages--slideshow .screen-message.len-l .screen-message__body { font-size: 2.6vw; -webkit-line-clamp: 12; }
.screen-messages--slideshow .screen-message.has-photo .screen-message__body { font-size: 2.4vw; }
.screen-messages--slideshow .screen-message.has-photo.len-s .screen-message__body { font-size: 3.4vw; }
.screen-messages--slideshow .screen-message__author { font-size: 2.4vw; }
.screen-messages--slideshow .screen-message__quote { font-size: 14vw; top: -1.5vw; }

/* The time left for the current message */
.screen-progress {
  height: .35vw;
  border-radius: 9999px;
  background: linear-gradient(90deg, #e64b93, #f68a4e, #c6d84a);
  transform-origin: left center;
}

.screen-progress.is-running {
  animation: screen-progress var(--slide-duration, 10s) linear both;
}

@keyframes screen-progress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}