/*
 * Quem somos: só animação, por cima da estrutura comum das abas.
 * Tudo vem do papel e da rua (panfleto, estêncil, marca-texto de jornal, fita de lambe-lambe):
 * - entrada: a página nova queima a anterior a partir do clique (View Transition);
 * - o cabeçalho se desdobra como um panfleto aberto;
 * - o título é pintado com spray através de um estêncil (máscara só durante a pintura);
 * - subtítulos ganham marca-texto amarelo, imagens são coladas com fita;
 * - parágrafos e citação pegam tinta presos à rolagem (animation-timeline).
 * Sem suporte ou com menos movimento: estático e visível.
 */

/* ---------------------------------------------------------- entrada: a brasa se espalha */
@property --vt-r { syntax: "<length>"; inherits: false; initial-value: 0px; }
html.vt-brasa::view-transition-old(root) { animation: vt-escurece 1.05s cubic-bezier(.65, 0, .35, 1) both; }
html.vt-brasa::view-transition-new(root) {
  animation: vt-queima 1.05s cubic-bezier(.65, 0, .35, 1) both;
  -webkit-mask-image: radial-gradient(circle at var(--vt-x) var(--vt-y), #000 calc(var(--vt-r) - 140px), rgba(0, 0, 0, .5) calc(var(--vt-r) - 50px), transparent var(--vt-r));
  mask-image: radial-gradient(circle at var(--vt-x) var(--vt-y), #000 calc(var(--vt-r) - 140px), rgba(0, 0, 0, .5) calc(var(--vt-r) - 50px), transparent var(--vt-r));
}
@keyframes vt-queima { from { --vt-r: 0px; } to { --vt-r: 160vmax; } }
@keyframes vt-escurece { to { opacity: .55; transform: scale(.985); } }

/* ---------------------------------------------------------- cabeçalho: panfleto que se abre */
.qs .cabeca-tela { transform-origin: 50% 0; }
.qs-entra.cabeca-tela { animation: qs-desdobra .75s var(--qs-d, 0s) cubic-bezier(.2, .8, .25, 1) both; }
.qs-entra.cabeca-tela::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(23, 23, 21, .28), rgba(23, 23, 21, 0) 70%); animation: qs-sombra-dobra .75s var(--qs-d, 0s) ease-out both; }
@keyframes qs-desdobra { from { transform: perspective(900px) rotateX(-72deg); } }
@keyframes qs-sombra-dobra { to { opacity: 0; } }
.qs-entra .indice-tela::after { animation: qs-regua .8s calc(.55s + var(--qs-d, 0s)) cubic-bezier(.16, 1, .3, 1) both; transform-origin: left; }
.qs-entra .lead-tela { animation: qs-tinta-entra .9s calc(1.2s + var(--qs-d, 0s)) cubic-bezier(.16, 1, .3, 1) both; }
.qs-entra .marca-dagua { animation: qs-carimba .5s calc(1.35s + var(--qs-d, 0s)) cubic-bezier(.3, 1.5, .5, 1) both; }
@keyframes qs-regua { from { transform: scaleX(0); } }
@keyframes qs-tinta-entra { from { opacity: 0; transform: translateY(10px); } }
@keyframes qs-carimba { from { opacity: 0; transform: scale(1.35) rotate(-6deg); } }

/* título pintado com spray: uma borda granulada (a textura do carimbo) varre da esquerda */
@property --spray { syntax: "<percentage>"; inherits: false; initial-value: 130%; }
.qs-entra:not(.qs-pintado) h1 {
  -webkit-mask-image: linear-gradient(90deg, #000 calc(var(--spray) - 22%), transparent calc(var(--spray) - 8%)), url("../assets/carimbo.png");
  mask-image: linear-gradient(90deg, #000 calc(var(--spray) - 22%), transparent calc(var(--spray) - 8%)), url("../assets/carimbo.png");
  -webkit-mask-size: 100% 100%, 16% 160%; mask-size: 100% 100%, 16% 160%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: 0 0, calc((var(--spray) - 20%) / .84) 50%; mask-position: 0 0, calc((var(--spray) - 20%) / .84) 50%;
  -webkit-mask-composite: source-over; mask-composite: add;
  animation: qs-spray 1.15s calc(.45s + var(--qs-d, 0s)) cubic-bezier(.45, .1, .35, 1) both;
}
@keyframes qs-spray { from { --spray: 0%; } to { --spray: 130%; } }

/* ---------------------------------------------------------- subtítulos: marca-texto de jornal */
.qs-marcador { background-image: linear-gradient(100deg, rgba(253, 199, 0, 0) 0, rgba(253, 199, 0, .7) 1.5%, rgba(253, 199, 0, .62) 96%, rgba(253, 199, 0, 0) 100%);
  background-repeat: no-repeat; background-position: 0 88%; background-size: 0% .5em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; padding: 0 .1em; margin: 0 -.1em;
  transition: background-size .7s cubic-bezier(.6, 0, .2, 1); }
.qs-marcado .qs-marcador { background-size: 100% .5em; }

/* ---------------------------------------------------------- imagens: coladas com fita */
.qs .bloco-imagem { position: relative; }
.qs-colar > img { opacity: 0; transform: translateY(-18px) rotate(-3deg) scale(1.03); transform-origin: 50% 0;
  transition: opacity .5s ease-out, transform .9s cubic-bezier(.2, .9, .3, 1.15); }
.qs-colar.qs-colada > img { opacity: 1; transform: rotate(-.6deg); box-shadow: 0 14px 30px rgba(0, 0, 0, .18); }
.qs-colar::before, .qs-colar::after { content: ""; position: absolute; z-index: 1; top: -12px; width: 110px; height: 30px; opacity: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, .25), rgba(255, 255, 255, .55) 50%, rgba(255, 255, 255, .25)), rgba(226, 216, 182, .78);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .15); transition: opacity .25s .55s ease-out, transform .35s .55s cubic-bezier(.3, 1.4, .5, 1);
  clip-path: polygon(0 8%, 5% 0, 10% 10%, 90% 2%, 95% 0, 100% 6%, 100% 94%, 94% 100%, 88% 92%, 8% 100%, 3% 90%, 0 100%); }
.qs-colar::before { left: calc(var(--gutter, 1rem) + 1rem); transform: rotate(-8deg) scale(1.3); }
.qs-colar::after { right: calc(var(--gutter, 1rem) + 1rem); transform: rotate(7deg) scale(1.3); }
.qs-colada::before { opacity: 1; transform: rotate(-8deg); }
.qs-colada::after { opacity: 1; transform: rotate(7deg); }

/* ---------------------------------------------------------- presas à rolagem (nativo) */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* parágrafos pegam tinta ao entrar na tela */
    body:not(.menos-movimento) .qs .corpo-capitulo > * {
      animation: qs-tinta linear both; animation-timeline: view(); animation-range: entry 0% cover 32%;
    }
    /* a citação pega tinta palavra por palavra enquanto atravessa a tela */
    body:not(.menos-movimento) .qs .citacao { view-timeline: --qs-cita block; }
    body:not(.menos-movimento) .qs .qs-palavra {
      animation: qs-acende linear both; animation-timeline: --qs-cita;
      animation-range: cover calc(22% + var(--i) * var(--passo)) cover calc(30% + var(--i) * var(--passo));
    }
  }
}
@keyframes qs-tinta { from { opacity: .1; transform: translateY(18px); } }
@keyframes qs-acende { from { opacity: .14; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  html.vt-brasa::view-transition-old(root), html.vt-brasa::view-transition-new(root) { animation: none; }
  .qs-entra.cabeca-tela, .qs-entra.cabeca-tela::after, .qs-entra .indice-tela::after, .qs-entra .lead-tela, .qs-entra .marca-dagua { animation: none; }
  .qs-entra:not(.qs-pintado) h1 { animation: none; -webkit-mask: none; mask: none; }
  .qs-marcador { transition: none; background-size: 100% .5em; }
  .qs-colar > img { opacity: 1; transform: none; transition: none; }
  .qs-colar::before, .qs-colar::after { opacity: 1; transition: none; }
}

/* entrou pela brasa: a abertura começa quando o círculo já cobriu boa parte da tela */
.qs-pos-brasa { --qs-d: .55s; }
/* menos movimento: tudo já no lugar */
.qs-calma .qs-marcador { transition: none; background-size: 100% .5em; }
.qs-calma .qs-colar > img { opacity: 1; transform: rotate(-.6deg); transition: none; }
.qs-calma .qs-colar::before, .qs-calma .qs-colar::after { opacity: 1; transition: none; }
.qs-calma .qs-colar::before { transform: rotate(-8deg); }
.qs-calma .qs-colar::after { transform: rotate(7deg); }