/* WizardRP Hinweisseiten: guide, geschichte, charaktere.
   Eine Szene in voller Höhe, eine typografische Aussage. Auftritt nur per CSS (läuft ohne JavaScript). */

.wz-note {
  align-items: end;
  text-align: center;
}

.wz-note__media {
  overflow: hidden;
  overflow: clip;
  background: var(--ink-0);
}

.wz-note__media img {
  object-position: 50% 42%;
}

.wz-note__veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, var(--ink-0) 0%, rgb(7 8 13 / .88) 30%, rgb(7 8 13 / .5) 62%, rgb(7 8 13 / .3) 100%),
    linear-gradient(to bottom, rgb(7 8 13 / .78) 0%, rgb(7 8 13 / 0) 26%);
}

.wz-note__body {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: var(--s-8);
  padding-bottom: clamp(3rem, 2rem + 7vh, 7rem);
}

.wz-note__body .wz-orn {
  animation: wz-rise .6s var(--ease-out) both;
}

.wz-note__title {
  margin-top: var(--s-6);
  text-wrap: balance;
  animation: wz-rise .6s var(--ease-out) .08s both;
}

.wz-note__title em {
  display: block;
}

.wz-note__text {
  max-width: 46ch;
  margin-top: var(--s-6);
  animation: wz-rise .6s var(--ease-out) .16s both;
}

.wz-note__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-4);
  margin-top: var(--s-7);
  animation: wz-rise .6s var(--ease-out) .24s both;
}

@media (max-width: 599px) {
  .wz-note__title {
    font-size: min(12vw, 3.5rem);
  }

  .wz-note__actions .tt-btn {
    flex: 1 1 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wz-note__body > * {
    animation: none;
  }
}