/* Assinatura da Riza Asset e da O2 Filmes, como créditos de cinema: os símbolos em uma cor
   (a do texto em volta), o nome na tipografia do site e uma barra vertical entre as marcas. */

.mark {
  display: inline-block; flex: none; height: var(--mark-size, 24px); background: currentColor;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.mark--riza { aspect-ratio: 167 / 190; -webkit-mask-image: url("../assets/brand/riza-symbol.svg"); mask-image: url("../assets/brand/riza-symbol.svg"); }
.mark--o2 { aspect-ratio: 534 / 693; -webkit-mask-image: url("../assets/brand/o2-symbol.png"); mask-image: url("../assets/brand/o2-symbol.png"); }

.signature {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; margin: 0;
  font: 600 .74rem/1 var(--font-fund); letter-spacing: .2em; text-transform: uppercase;
}
.signature__brand { display: inline-flex; align-items: center; gap: .75em; white-space: nowrap; }
.signature__bar { width: 1px; height: calc(var(--mark-size, 24px) + 6px); background: currentColor; opacity: .45; }
.signature__label { font-weight: 500; letter-spacing: .28em; opacity: .75; }
.signature__credit { display: inline-flex; flex-direction: column; gap: 12px; }
.signature__role { font-weight: 500; font-size: .66rem; letter-spacing: .24em; opacity: .7; }
.signature__and { font-weight: 500; letter-spacing: .08em; text-transform: none; opacity: .6; }

@media (max-width: 760px) {
  .signature__label { flex-basis: 100%; }
  .offer__signature .signature__bar { display: none; }
}

/* A. Cartela de abertura: "Riza Asset e O2 Filmes apresentam", acima do fio */
.title-card--credits { left: 50%; top: 22%; transform: translate(-50%, -12px); }
.title-card--credits.is-visible { transform: translate(-50%, 0); }
.signature--credits { --mark-size: 26px; justify-content: center; white-space: nowrap; color: color-mix(in srgb, var(--light) 80%, transparent); text-shadow: 0 0 18px rgba(0,0,0,.9); }
.signature--credits .signature__label { margin-left: .3em; }
@media (max-width: 760px) {
  .title-card--credits { top: 19%; width: min(88vw, 420px); }
  .signature--credits { --mark-size: 22px; white-space: normal; gap: 12px 14px; }
  .signature--credits .signature__label { flex-basis: 100%; text-align: center; margin: 4px 0 0; }
}
html.reduced-motion .title-card--credits { order: -2; }
html.reduced-motion .signature--credits { justify-content: flex-start; }
html.reduced-motion .signature--credits .signature__label { text-align: left; }

/* B. No encontro, os fios nascem dos símbolos */
.meeting__mark--riza { fill: var(--riza-brand, #DE9000); }
.meeting__mark--o2 { fill: var(--ink); }

/* C. "Uma realização" no fim da abertura e no rodapé; na oferta, o papel de cada empresa */
.opening__credits { --mark-size: 20px; margin-top: 34px; padding-top: 18px; border-top: 1px solid color-mix(in srgb, var(--light) 22%, transparent); color: color-mix(in srgb, var(--light) 68%, transparent); }
.offer__signature { --mark-size: 22px; align-items: flex-end; gap: 18px 28px; margin-top: 64px; padding-top: 22px; border-top: 1px solid color-mix(in srgb, var(--light) 22%, transparent); color: color-mix(in srgb, var(--light) 72%, transparent); }
.site-footer__signature { --mark-size: 28px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; padding-bottom: 28px; margin-bottom: 34px; border-bottom: 1px solid color-mix(in srgb, var(--light) 16%, transparent); color: var(--light); }
.site-footer__domain { font: 500 .8rem/1 var(--font-fund); letter-spacing: .12em; opacity: .7; }