/* Poster rendering. Shared by the editor canvas and the export page, so keep
   it free of anything that depends on the app chrome. Font families come from
   the --f-* variables the server injects from config. */

.poster {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: #024230;
  font-kerning: normal;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
}

.poster .poster-defs { position: absolute; width: 0; height: 0; }

.poster .p-bg,
.poster .fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.poster .pl {
  position: absolute;
  box-sizing: border-box;
  transform-origin: center center;
}

.poster .pl-text { display: flex; flex-direction: column; }
.poster .pl-text[data-valign="middle"] { justify-content: center; }
.poster .pl-text[data-valign="bottom"] { justify-content: flex-end; }

.poster .pl-tw { position: relative; width: 100%; }
.poster .pl-t { position: relative; width: 100%; margin: 0; }
.poster .pl-ghost { position: absolute; inset: 0 auto auto 0; pointer-events: none; }
.poster .pl-t .ln { display: block; white-space: pre-wrap; overflow-wrap: break-word; }
.poster .pl-t .lt { margin-right: calc(-1 * var(--trk, 0em)); }
.poster .pl-t[data-fit] .ln { white-space: pre; }
.poster .pl-t[data-fit] .lt { display: inline-block; }

.poster .pl-arc { display: block; }

.poster .pl-image { overflow: hidden; }
.poster .pl-image img {
  display: block;
  width: 100%;
  height: 100%;
  user-select: none;
  -webkit-user-drag: none;
}

.poster .pl-missing {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border: 3px dashed rgba(244, 241, 234, 0.45);
  color: rgba(244, 241, 234, 0.7);
  font: 600 26px/1.2 var(--f-condensed);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  padding: 20px;
}

.poster .pl-logo > svg,
.poster .pl-svg > svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.poster .fx-grain { background-repeat: repeat; }
.poster .fx-halftone {
  background-image: radial-gradient(circle, rgba(0, 0, 0, 0.55) 1.2px, transparent 1.9px);
  background-size: 7px 7px;
  mix-blend-mode: multiply;
}